CSS-0806

---

title: “CSS 0806”
date: 2022-08-06T08:37:25+08:00

高度塌陷

产生条件

1. 父元素未设置宽高
2. 子元素浮动

解决方法

1. 给高度塌陷的元素设置 overflow:hidden;(触发BFC)

2. 在父元素的最后加个块级元素并清除浮动

   • 在浮动元素的后面添加一个块级元素(必须要加到后面,因为前面元素不会受到浮动影响)

   • 给该块级元素清除浮动(清除浮动的属性对内联元素不生效的)

     缺点：代码中会出现很多空的div标签,会造成代码冗余(多余)

3. 完美清除法：建立在第二种方法的基础上，将标签用伪元素的方式添加进去：

   高度塌陷的元素::after{ 
       /*添加进来的属于内联元素,需要把内联元素转为块级元素*/
       content: "";
       clear: both; /*清除到浮动元素带来的影响*/
       display: block; /*清除属性只对块生效*/
   }
   

   一般会给高度塌陷的元素设置 clearfix的class名,即:

   .clearfix::after{
         
         
       content: "";
       clear: both;
       display: block;
   }
   

表格补充

表格html属性

• cellpadding:单元格的填充,和padding是一样的

表格新增css属性

• border-spacing: 数值px; 边框之间的距离(和cellspacing一样)
• border-collapse:collapse;合并边框 边框间距去掉后会变粗，用该属性可以变回到细的效果
• table-layout: auto/fixed(固定); 单元格宽度默认会被内容撑大,固定后可不被撑宽，但是高度还是会变

表格新增标签

• 表格标题 caption 直接放到表格最顶部的位置且居中
• 表格列标题 th (将td换成th即可) 文字默认加粗且居中
• 表格行分组
  • 表头 thead 一般只有一组，放列标题对应的一整行
  • 表体 tbody 不分组的话，浏览器默认会把所有的行都归到表格主体里面，可以有多组，放表格的主要内容
  • 表尾 tfoot 只有一组，一般放合计、总计、备注之类的行

form表单元素

表单集form:表单的集合,不带任何样式

<form action=""></form>

action:提交路径,填写完信息后 点击按钮将信息提交的位置，一般是后端提供

表单元素(input/select/textarea/select)内联块元素

1. 单选框 拥有一个相同的name属性可互斥

   <input type="radio" name="">
   

2. 文本输入框

   <input type="text" name="">
   

3. 密码输入框

   <input type="text" name="">
   

4. 多选框 (不需要相同的name)

   <input type="checkbox"
   

5. 多行文本域 textarea{resize:none;}禁止用户缩放

   <textarea name="" id="" ></textarea>
   

6. 文件上传

   <input type="file">
   

7. 提交按钮

   <input type="submit" value="按钮文本">
   

8. 重置按钮

   <input type="reset" value="按钮文本">
   

9. 普通按钮

   <input type="button" value="普通按钮">
   

10. 隐藏域(不会显示到页面中，但是可以存储一些值)

    <input type="hidden">
    

11. 下拉选项 select与option一起用

    <select name="" id="">
        <option value=""></option>
    </select>
    

表单html属性

• placeholder 提示信息 不占位置，填写内容后信息就会消失
• value 默认值，不用手动填写，默认就存在
• disabled 禁止选择
• checked 默认选中
• selected 下拉列表的默认选中
• name和value主要是结合后台使用的

position定位

position:static;默认值

静态定位(相当于没有定位)

position:relative；相对定位

1. 参考物：元素本身

2. 方向和距离：left/right/top/bottom: 数值px;

   注意: 如果要用几个方向去移动的话必须加定位属性

position:absolute;绝对定位

1. 参考物：有定位属性(且值一般为relative(其它值也可以))的祖先元素
   • 如果当前绝对定位的祖先元素身上都有定位属性,那就参考离该元素最近的祖先元素
   • 如果当前绝对定位的祖先元素身上都没有定位属性,那就参考浏览器的第一屏窗口(没有在滚动之前的所看到的第一个窗口,出示包含块)
2. 移动方向和距离: left/top/right/bottom:数值px/数值%
3. 特点
   • 百分数参考的是参考物，不一定是父元素
   • 当给元素不设置宽且加绝对定位的话，宽度会由内容撑开(因为脱离文档流后,不符合宽度的公式)
   • 绝对定位的元素会脱离文档流，遮挡住后面的元素和文字
   • 绝对定位元素margin:auto会失效(因为脱离文档流后,不符合宽度的公式,auto没法计算)
   • 绝对定位会让内联元素变块

position:fixed;固定定位

1. 参考物: 只看浏览器的可视窗口
2. 移动方向和距离:移动方向和距离 left/top/right/bottom:数值px/数值%
3. 特点：
   • 脱离文档流,遮挡住后面的元素且遮挡文字
   • 不会跟随滚动条滚动
   • 后面的元素如果被固定定位的元素挡住的后,添加margin-top向下移动

position:sticky;粘性定位

1. 参考物：浏览器可视窗口
2. 移动方向和距离: top:数值px;
3. 特点:没有达到top值之前正常滚动的,达到top值之后类似于固定定位,不跟随滚动条滚动,一般将top值设置为0,达到吸顶效果

利用绝对定位实现元素的（水平&垂直）居中

第一种方法：

css代码：（顺便加了文字的居中）

.box1{
    
    
    width: 500px;height: 500px;background-color: aqua;
    /* 水平居中 */
    margin: auto;
    position: relative;
}
.box2{
    
    
    width: 200px;height: 300px;background-color: pink;
    position: absolute;
    /* 方法一 */
    left: 50%;/*首先移动到参考物的中心点的右侧*/
    margin-left: -100px;/*100px是当前元素宽度的一半，使其往回（左）边移动*/
    top: 50%;/*首先移动到参考物的中心点的下侧*/
    margin-top: -150px;/*150px是当前元素高度的一半，使其往回（上）边移动*/
    /* 文字水平/垂直居中 */
    text-align: center;
    line-height: 300px;
}

html代码：

<div class="box1">
    <div class="box2">
        我也要居中
    </div>
</div>

第二种方法

css代码

.box1{
    
    
    width: 400px;height: 500px;background-color: blueviolet;
    position: relative;
    /* 水平居中 */
    margin: auto;
}
.box2{
    
    
    width: 100px;height: 150px;background-color: red;
    position: absolute;
    /* 第二种方法 */
    top: 0;bottom: 0;
    left: 0;right: 0;
    margin: auto;/*正常来说绝对定位的元素该属性的会失效,但是将方向值设置为一样之后,可以重新满足宽度的计算公式,能够实现水平且垂直居中*/
}

html代码

<div class="box1">
    <div class="box2">
        我也要居中
    </div>
</div>

box-shadow阴影标签

box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

你几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 border-radius属性，那么阴影也会有圆角效果。

语法：

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

向元素添加单个 box-shadow 效果时使用以下规则：

• 如果只给出两个值，那么这两个值将会被当作 <offset-x><offset-y> 来解释。
• 如果给出了第三个值，那么第三个值将会被当作<blur-radius>(模糊半径)解释。
• 如果给出了第四个值，那么第四个值将会被当作<spread-radius>(扩散半径)来解释。

注意：若要对同一个元素添加多个阴影效果，请使用逗号将每个阴影规则分隔开。

取值：

inset

如果没有指定inset，默认阴影在边框外，即阴影向外扩散。使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。

<offset-x>和<offset-y>

这是头两个数值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过 y 垂直方向向下。 <offset-x> 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 <offset-y> 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。

如果两者都是 0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。需要考虑 inset

<blur-radius>

这是第三个数值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为 0，此时阴影边缘锐利。

<spread-radius>

这是第四个数值。取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大。需要考虑 inset

<color>

阴影的颜色。如果没有指定，则由浏览器决定——通常是颜色的值，不过目前 Safari 取透明。

补充

标签未闭合时的错误bug

a{
    
    
    background-color: aqua;
}
.box{
    
    
    width: 100px;
    height: 100px;
    background-color: pink;
}

正常html情况下代码：

<a href="" class="abq">我是一个a标签</a>
<div class="box">我是a标签下面的一个盒子</div>

结果如图：

错误html代码实例（少了个a的闭合标签）：

<a href="" class="abq">我是一个a标签
<div class="box">我是a标签下面的一个盒子</div>

结果如图：