布局方式
- 1.静态块级
- 2.弹性布局(flex)
- 3.网络布局(grid)
- 4.自适应布局(根据当前访问设备进行多套样式来适配)
- 5.响应式布局(通过媒体查询进行适配,rem/em)
- 6.浮动布局(float)
- 7.定位布局(position)
float和position有什么区别?
float:none left right inherit
特性:
- 浮动会脱离文档流,并且会随着分辨率和窗口尺寸的变化而变化
- 浮动后面的元素如果是块级元素,会占据块级元素的文本位置,但会与块级元素背景和边框重叠
- 多个浮动不会产生重叠现象
- 会将块级元素和行内元素变为行内块元素
- position:relative absolute fixed static 特性
- relative和static不会脱离文档流
- absolute和fixed会脱离文档流
- absolute根据relative定位。fixed根据body定位
- absolute和fixed会触发BFC
- 定位的优先级高于浮动