布局
默认布局
块元素
浮动布局
1.浮动
让多个块元素在一行显示
float:left
clear:both
2.层次关系
float:left
块元素脱离默认文档流
默认宽度为0
失去了对父元素支撑的能力【伪元素】
在浮动流中,多个浮动元素在一行中显示,当一行容纳不下,就会自动换行
3.清理浮动
为容器内部添加一个子元素,一般使用伪元素较方便
ul.list::after{}
content:"";
display:block;
clear:both;
4.盒子居中
margin:0 auto;
定位布局
position
1.static
默认,静态
2.relative
相对点
该元素在文档流中初始的位置
是否脱离文档流
不脱离
最佳实践
一般不移动,作为相对点
3.absolute
相对点
距离他最近的父定位元素,如果没有父定位元素,只能相对于浏览器视口
是否脱离文档流
脱离
4.fixed
相对点
相对于浏览器视口,并且不会随着浏览器的滚动而滚动
是否脱离文档流
脱离
5.sticky
是相对定位和固定定位的结合
当元素上的position的取值为relative、absolute、fixed、sticky之一,我们就认为当前这个元素为定位元素,定位布局可以使用定位属性
定位属性
left
right
top
bottom
伸缩盒布局
作用
与浮动布局的作用类似,用于将一个容器中多个子元素【块元素】在一行中多列排列
主轴 交叉轴
由flex-direction决定
子元素都是沿着主轴来排列的
一般建议给容器添加宽高,子元素在容器中排列
响应式布局
PC端
类似于腾讯视频
容器的宽度随着屏幕的分辨率大小的改变而改变
纯响应式(与mobile兼容)
完全兼容移动设备
mobile端
手机型号不同,宽度不同
不要给容器【块元素】指定宽度,让他默认为100%
子元素【列元素】宽度使用相对单位%
媒体查询技术
使用
ul 容器
li子元素
元素
ul{display:flex;}
让容器成为伸缩盒容器
flex-direction
row
容器中子元素的排列方式,row沿着x轴
col
flex-wrap
换行
justify-content
空白部位如何布局
flex-basis
主轴中基准值,主轴是x,相等于width
flex-grow
主轴中剩余空间分配所占份数
flex-shrink
主轴中如果有亏损,所占亏损的份数
flex:1;