尚硅谷web前端——CSS（四）

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整数越大，越优先显示
• 若层级一致，则优先显示靠下面位置的元素
• 祖先元素层级再高也不会盖住后代元素