css布局
1、表格布局
display:table;转换成table标签
display:table-cell;table-cell是单元格的意思
特别适合做布局但是标签量过大造成缓存慢,让用户等待时间长
2、浮动
floft
对自身有影响都脱离文档流,使元素独
立起来并且可以设置宽高,
改变兄弟元素布局,
对父容器造成了坍塌;
所以需要在使用完浮动后清除浮动
3、定位
能不用相对定位就不用,用绝对定位
固定布局:使用标准px单位(推荐)
流式布局:使用百分比定位
4、多列布局
section;根据列宽自适应窗口分为几列
列宽:column-width
改变列间间隙:column-gap
列间加入一条分割线:column-rule
5、弹性布局
flex:实现子元素在父元素中自动伸缩;特别适合移动端布局
主轴:排列方向是水平方向主轴就是X轴,排列方向是垂直方向主轴就是Y轴
侧轴:与主轴垂直关系
弹性盒模型:
-
display:flex; 默认主轴方向是x轴,起始线是左边开始
-
改变主轴方向:
-
flex-direction;
-
row:X轴为主轴;
-
column:Y轴为主轴;
-
row-reverse:X轴为主轴,起始线从右开始;
-
column-reverse:Y轴为主轴,起始线从下开始;
-
-
换行:
- flew-wrap;
- 默认是不换行(压缩):no-wrap
- 换行(子元素在父元素中换行):no-wrap
-
以上两种的综合属性
- flew-flow :主轴方向 换行;
-
设置子元素在父容器的排列位置
- justify-content:;
- 两端对齐(有空余会分配给每个子元素中间):space-between
- (将剩余空间分为元素的2倍,分别为元素的左右分配):space-around
- 平均分配:space-evenly
- justify-content:;
-
设置侧轴上的位置
- align-items
- 居中:center;
- 起始线:flex-start
- 终止线:flex-end
- 设置侧轴在子元素上的位置
- align-self
- align-items