| CSS（四） |
一、高度塌陷
1、在浮动布局中，父元素的高度默认由子元素撑开，子元素浮动后脱离文档流，将无法撑起父元素高度从而导致塌陷
2、父元素高度丢失后，其下元素会自动上移导致页面的布局混乱
3、BFC：块级格式化环境，CSS中隐含属性，为元素开启BFC会变成独立的布局区域
4、BFC特点：
- 开启BFC的元素不会被浮动元素所覆盖
- 子元素和父元素之间外边距不会重叠
- 可以包含浮动的子元素
5、开启BFC的方法：
- 设置元素浮动（将失去宽度）
- 将元素设置为行内块（将失去宽度）
- 将元素的overflow设置为一个非visible的值 如：overflow:hidden
二、clear属性
1、用来消除其他元素浮动对其的影响
- left消除左侧影响
- right消除右侧影响
- both消除两侧较大的影响
2、原理：设置清除后，浏览器会自动为元素添加一个外边距，以使位置不受其他元素的影响
不使用clear时：
使用clear
三、使用after 伪类解决高度塌陷
四、定位(position)
1、通过定位可以将元素摆放在页面的任何位置，通过position属性来设置
- static默认值，静止，没有开启定位
- relative开启元素的相对定位
- absolute绝对定位
- fixed固定定位
- sticky粘滞定位
2、相对定位 relative
-
开启相对定位后，若不设置偏移量，将不会发生任何变化，通过偏移量来修改元素的位置
-
top 定位元素和定位位置上边的距离
-
bottom定位元素和定位位置下边的距离
-
left\right控制水平方向的位置
-
相对定位时参照元素在文档流中的位置（它之前所在的位置）
-
相对定位会提升元素的层级
-
相对定位会使元素脱离文档流
-
相对定位不会改变元素性质
效果：
3、绝对定位 absolute -
绝对定位如果不设置偏移量，则元素的位置不发生改变
-
元素会从文档流中脱离
-
绝对定位会改变元素性质，行内元素变成块元素，块的宽高被内容撑开
-
绝对定位会提高元素的层级
-
绝对定位使其对于其包含块进行定位
什么是包含块嘞？ (●’◡’●)
①正常情况下包含块是离当前元素最近的祖先元素
②绝对定位的包含块是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则相对于根元素（html)进行定位
③根元素(html)是初始包含块我上面写错了，应该是移动到根元素的左上角(⊙ˍ⊙)
4、固定定位 fixed -
固定定位也是一种绝对定位，特点与绝对定位差不多
-
固定定位永远参照与浏览器的视口进行定位
-
固定定位元素不会随网页的滚动而滚动（联想：小广告）
5、粘滞定位 sticky
- 与相对定位特点基本一直，在元素到某位置后固定不变
- 相对于包含块（body）进行偏移
6、绝对定位元素的位置
- 水平布局：margin-left/right+left/right+border-leftt/right+width+padding-left/right=包含块内容区宽度
- 开启绝对定位后，千万不要忘了增加了left和right，9个属性值需要满足等式
- 当发生过度约束时，如果没有auto，则自动调整right
- 若有auto，则调整auto
- left 和right 默认auto
- 垂直方向必须满足（只有绝对定位才可以）：margin-top/bottom+top/bottom+border-top/bottom+height+padding-top/bottom=包含块的高度，过度约束的时候会自动调整bottom来满足等式
7、元素的层级
- 开启定位元素，可通过z-index来指定元素层级，z-index整数越大，越优先显示
- 若层级一致，则优先显示靠下面位置的元素
- 祖先元素层级再高也不会盖住后代元素