企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
``` 来了,我们的2020新课时来了,OMG!!! ``` # position、display、float、z-inde ## 1、position >position是定位的一个非常重要的属性,不具有继承性 1、`static`:正常的文本流,默认值,没有定位 2、`absolute`:相对于static以外的第一个父元素进行定位(也就是最近的一个),定位后的空间被回收,会脱离文本流 3、`relative`:相对于自己正常位置进行定位,定位后的空间没有被回收,不会脱离文本流 4、`fixed`:相对于浏览器窗口的绝对定位。最牛逼的一个定位,一般用于右侧的导航条、客服或者需要一致固定在屏幕的,它相对于浏览器进行定位,会脱离文本流 5、`inherit`:从父元素继承position值 ``` absolute:示例: *{ margin:0; padding: 0;     } .div1 { width: 500px; height: 500px; position: absolute; border: 1pxsolidred; top: 200px; left: 200px;     } .div2 { width: 500px; height: 500px; position: absolute; border: 1pxsolidred; left: 200px; top: 200px;     } .div3 { width: 500px; height: 500px; border: 1pxsolidred; position: relative; top: 200px; left: 200px;     } ``` ``` relative:示例: div { font-size: 15px; color: #fff;   } .test1 { width: 500px; height: 500px; background: #123; } .test2 { width: 400px; height: 400px; background: #234; position: relative; left: 50px; top: 50px; } .test3 { width: 300px; height: 300px; background: #345; position: absolute; right: -20px; top: -20px; } <div class = "test1"> test1 <div class = "test2"> test2 <div class ="test3">test3</div> </div> </div> ``` ``` fixed示例: * { padding: 0; margin: 0;     } div { font-size: 15px; color: #fff;     } .test1 { width: 500px; height: 500px; background: #123;     } .test2 { width: 400px; height: 400px; background: #234; position: fixed; right: 20px; top: 20px;     } .test3 { width: 300px; height: 300px; background: #345; position: absolute; left: -40px; top: 40px;     } <div class = "test1"> test1 <div class = "test2"> test2 <div class ="test3">test3</div> </div> </div> ``` ## 2、display display属性规定元素生成框的类型,默认值是inline ,没有继承性。 >`inline`:行内元素,没有宽高和行高,被里面的文字撑大的,取决于font-size,元素不会独占一行,多个相邻的元素会排列到一行,直到排不下,才会换新的一行,width和height属性无效。水平的padding和margin可以边距产生效果,但是垂直的padding和margin不会产生边距效果 `block`:总是在新的一行开始,前后都默认有换行,宽度默认是其父元素的100%,高度需要设置高、行高、顶和低边距 `inline-block`:行内块,在chorme和Opera可以支持,但是IE会触发layout,通过对vertical-align去修改对齐方式 `flex`:弹性布局 拓展: `list-item`:为元素生成块型盒,其效果和ul中出现项目列表符号一样。 `inherit`:规定应该从父元素继承display属性的值 `table-column`:此元素作为一个单元格列显示,类似`col` `table-cell`:此元素作为表格单元显示,类似于`td`和`th` `table-row`:此元素作为一个表格行显示,类似`tr` `table-header-group`:此元素作为一个或多个行的分组显示,类似于`thead` `table-footer-group`:此元素作为一个或多个行的分组显示,类似于`tfoot` `table-column-group`:此元素作为一个或多个列的分组来显示,类似于`colgroup` `table`:此元素作为块级表格来显示,类似于`table`,表格前后有换行符 `inline-table`:此元素作为内联表格来显示,类似于`table`,表格前后没有换行符 ``` 块级元素:div, p, form, ul, li, ol, dl, address, table, menu, hr 行内元素:span, strong, em, br, a, i, small, b, label,h1 行内块: button, input, textarea, img, select ``` ## 3、float >元素水平方向的移动,只是左右移动,不能上下移动,直到碰到边框才会换行,类似于行内块的换行方式 `none`:默认值,元素不浮动,并且显示在文本出现的位置 `left`:元素向左浮动 `right`:元素向右浮动 `inherit`:继承父级float属性 ## 4、z-index `auto`: 默认值 ,为1 `number`:数字,按照堆叠顺序。 `inherit`:规定应该从父元素继承 z-index 属性的值。 >z-index无效时和处理方法 >* 无效的情况: 1、问题标签无position(不含static) 2、问题标注含有浮动(float)属性 3、问题标签的祖先标签的z-index值比较小 >* 解决办法有三个: 1、position:relative改为 position:absolute 2、浮动元素添加position属性(relative和absolute、fixed等) 3、去除浮动 (辅助) 4、问题标签的祖先标签的z-index值调大 ![](images/display_float_position.png) ## 补充1 :清除浮动 * 为什么需要清楚浮动?? 清楚浮动主要时处理父元素因为子元素浮动引起的内部高度为0的问题。 ![](https://img.kancloud.cn/28/a3/28a300eca6a86ecfc07416043fac46d4_720x540.png) 清楚浮动有五种方法: * 1 额外标签法 (在最后一个额外标签加一个标签,clear:both) 不推荐 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fahter{ width: 400px; border: 1px solid deeppink; } .big{ width: 200px; height: 200px; background: darkorange; float: left; } .small{ width: 120px; height: 120px; background: darkmagenta; float: left; } .footer{ width: 900px; height: 100px; background: darkslateblue; } .clear{ clear:both; } </style> </head> <body> <div class="fahter"> <div class="big">big</div> <div class="small">small</div> <div class="clear">额外标签法</div> </div> <div class="footer"></div> </body> </html> ``` 效果图: ![](https://img.kancloud.cn/aa/8d/aa8dfd7165fe012e5eff8adbc9649865_1484x542.png) 优点:通俗易懂,方便,浏览器兼容性好 缺点:添加无意义标签,语义化差 * 2 父级添加overflow属性(父元素添加overflow:hidden)(不推荐)通过触发BFC方式来清除浮动 ``` .fahter{ width: 400px; border: 1px solid deeppink; overflow: hidden; } ``` 优点:代码简洁 缺点:内容增多的时候容易造成不会自动换行导致内容被隐 藏掉,无法显示要溢出的元素 * 3 使用after伪元素清除浮动(推荐使用) ``` .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/ } <body> <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> <!--<div class="clear">额外标签法</div>--> </div> <div class="footer"></div> </body> ``` 优点:符合闭合浮动思想,结构语义化正确 缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout. * 4、使用双伪元素清除浮动 推荐使用 有相邻元素就可以直接用相邻元素也是可以的 ``` .clearfix:after,.clearfix:before{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> </div> <div class="footer"></div> ``` 优点:代码更简洁 缺点:用zoom:1触发hasLayout. * 4 给父容器添加浮动 不推荐使用 ``` .fahter{ width: 400px; border: 1px solid deeppink; float:left; (或者right) } ``` 优点:操作简单 缺点:影响布局, > 什么时BFC ? Block Formatting Context ,是布局过程中生成的块级盒子的区域,也是浮动元素与其他元素交互限定区域,是一个独立的单元,你进不来,我出不去。 >触发BFC的条件 ,通常是这四种 1. float不为none 2. position为fixed和absolute的元素 3. overflow不为visible的元素 4. display为inline-block、table-cell、table-caption,flex,inline-flex的元素 >有的时候我们需要去触发BFC来处理问题,哪有什么可以解决的呢? 1. 浮动元素的父元素高度塌陷 2. 两栏自适应布局 3. 外边距垂直方向重合 处理地址:https://blog.csdn.net/weixin_43687095/article/details/104292827