css布局难点

布局

使用块元素搭建网页结构，改变默认文档流的方式，让其一列显示多行

浮动布局

作用：pc端一行多列显示
使用方式：

1. 子元素全部浮动，一行中出现多列，子元素全部浮动，父元素失去支撑
2. 第一个子元素浮动，第二个元素添加margin-right，不浮动的元素撑起父元素

重要：
脱离文档流：
1.默认宽高都由内容或子元素决定
2.在默认文档流中的空间会被其他兄弟抢占
3.多个浮动元素可以在一行排列，放不下会自动换行
4.浮动元素不会对父元素进行支撑

当父元素的宽/高固定，子元素的宽/高超过了父元素可使用overflow-y（头像就是这样做的）

定位布局

作用：使某个元素悬挂在其他元素之上（模态框，固定侧栏，二级栏目）
使用方法：

1. 非定位 static
2. 定位
   1）relative 相对定位
   参照原来位置
   不脱离文档流
   2）absolute 绝对定位
   参照距离它最近的父定位元素
   脱离文档流
   3）fixed 固定定位
   参照浏览器视口
   脱离文档流
   不随着网页滚动而滚动
   4）sticky 粘滞定位
   relative+fixed
   设置临界点 top/bottom/left/right

伸缩盒布局

作用：手机网页（小程序）常用的布局方式
使用方式：
1.父元素
display:flex
flex-direction
flex-wrap
2.子元素
flex-shrink
flex-grow
flex-basis
flex速写