布局
表格布局
display:table-cell;(变成单元格)
标签太多,加载缓慢。
浮动布局
浮动带来的问题;
对自身的影响:脱离文档流,使元素独立起来并且可以设置宽高。
对兄弟元素的影响:改变了兄弟元素的布局。
对父级的影响:对父容器造成坍塌。
定位布局
固定布局:使用标准px单位。(推荐使用)
流式布局:使用百分比 %。
多列布局
clumn-width:200px; 设置列宽
clumn-count: 设置几列宽
弹性盒模型
display:flex; 弹性盒模型,默认主轴方向是x轴,起始线是左边开始。
属性:
flex-direction 改变主轴方向,row x抽为主轴,colum y轴为主轴 。
row-reverse x轴为主轴,起始线从右开始。
column-reversey轴为主轴,起始线从下开始。
flex-wrap; wrap;换行;(默认是nowrap不换行)子元素在父元素中换行。
综合属性:
flex-flow:; 以上两种的综合属性
重要属性:
justify-content 设置子元素在父容器中主轴的排列位置的。
flex-start : 弹性盒子元素将向行起始位置对齐flex-end: 弹性盒子元素将向行结束位置对齐center: 弹性盒子元素将向行中间位置对齐
常用的几种:
justify-content:;
space-between:弹性盒子元素会平均地分布在行里(两端对齐,有空余会分配给每个子元素中间)
space-around:弹性盒子元素会平均地分布在行里,两端保留(将剩余空间分成元素的2倍,分别在元素的左右分配)
space-evenly: 平均分配剩余空间
其他
1.align-items(适用于父类容器上) 设置或检索弹性盒子元素在侧轴方向上的对齐方式
属性:
(和重要属性里面的属性一样)
align-items: center;设置侧拍上居中
2.align-self: flex-end(设置起始线位置);设置元素在侧轴的位置