传智播客前端学习第六天总结

目录

为什么要清除浮动

清除浮动

额外标签法

overflow

使用after伪元素清除浮动

使用before，after双伪元素清除浮动

定位

边偏移

定位模式

子绝父相

定位的盒子居中对齐

固定定位

定位模式转换

叠放次序

---

为什么要清除浮动

• 很多情况父盒子不方便给高度，只能让内容撑开盒子。
• 这种情况下如果内部的盒子都是浮动的话，那么与父盒子同级的盒子就会浮上来
• 原因：浮动的盒子不占高度，父盒子又没有高度

清除浮动

• 本质：解决父级元素因为子级浮动引起内部高度为0的问题

额外标签法

• 单词：clear
• 特点：给最后一个浮动标签添加clear属性（如果清除了浮动，父亲会自动检测孩子的高度，以最高的为准）
• 使用：clear：both；（left，right）

overflow

• 单词：overflow
• 特点：给父标签添加overflow
• 使用：overflow：hidden；

使用after伪元素清除浮动

• 单词：.clearfix:after   .clearfix 
• 特点：多类名调用时为clearfix
• 使用：.clearfix { *zoom：1；}  .clearfix:after { content：“”；display：block；height：0；clear：both；visibility：hidden； }

使用before，after双伪元素清除浮动

• 单词：.clearfix:before，.clearfix:after      .clearfix:after     .clearfix 
• 特点：多类名调用时为clearfix
• 使用：.clearfix { *zoom：1；}  .clearfix:after { clear：both； }  .clearfix:before，.clearfix:after{ cotent：“”；display：table；}

定位

边偏移

• 单词：top，bottom，left，right
• 特点：偏移量
• 使用：top：100px；

定位模式

• 单词：position
• 特点：给定位置
• 使用：position：relative；left：10px；top：10px；

 

• 属性值如下
• static：静态定位，无法通过边偏移来改变元素位置（默认值）。唯一用处，取消定位（一会有定位，一会没有定位）
• relative：相对定位，以自己原来的左上角位置移动（原来的位置仍然占有）
• absolute：绝对定位，若所有父元素都没有定位，以浏览器当前屏幕为基准点对齐（不占位置）。如果父亲有定位，则根据最近的定位父元素为基准点对齐
• fixed：后面叙述

子绝父相

• 子级是绝对定位的话，父亲要用相对定位
• 因为父亲要占位置防止下面的盒子升上来，所以要用相对定位。而子级不占位置悬浮在几个图片上所以用相对定位

定位的盒子居中对齐

• 加了定位和浮动的盒子，margin：100px auto；就完全失效了
• position：absolute；left：50%；margin-left：-盒子的一半大小px；

固定定位

• 单词：fixed
• 特点：固定在浏览器的某个位置不动（不占位置）
• 使用：position：fixed；

定位模式转换

• 元素添加了定位后，会转换为行内块模式（和float一样）

叠放次序

浮动是后面的被压住，定位是前面的被压住

• 单词：z-index
• 特点：只有定位的盒子才有。且数字越大层级越高。若取值相同，根据书写顺序后来者居上。（默认值为0）
• 使用：z-index：2；（例如：下拉菜单被盖住）