1.CSS 参考手册

2.元素的分类

首先我们要知道一共有几种元素

1.行内元素（可以与其他行内元素位于同一行，不会以新行开始高度、宽度不能设置）

2.块级元素（每个块级元素都从新的一行开始，其后的元素也另起一行。默认排列方式：从上至下元素的高度、宽度、行高、内外边距都可设置）

3.行内块元素（和其他元素都在一行上元素的高度、宽度、行高、内外边距 都可设置）

3.布局的三大分类

1.float浮动布局

浮动元素的顶部，在标准文档流的底部

1. 对div2进行浮动：浮动元素的顶部，在标准文档流的底部
2. 对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
3. 对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
4. 对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部

2.position 定位

1.relative 相对定位：相对原来位置，偏移一定距离

2.absolute 绝对定位：相对于position不为static的父元素，偏移一定距离

父相子绝：父元素relative，子元素absolute

3.fixed 固定定位：相对浏览器定位

4.static 没有定位

3.flex布局

1.父元素属性

row   				行排布 row-reverse			同一行反向排布 column				列排布 column-reverse		同一列反向排布 

2.justify-content 主轴子元素排列

flex-start  		从头部排列 flex-end			从尾部排列 center				居中排列 space-around		平分剩余 space-between		两边贴边，平分剩余 

3.align-items 侧轴方向，子元素的排列

flex-start			从上到下 flex-end			从下到上 stretch				拉伸（子元素去掉高度） center				居中 

4.flex-wrap属性 子元素是否换行

wrap    换行 no-wrap    不换行 

5.align-content属性 子元素整体，在父元素中的对齐方式

flex-start		侧轴头部排列 flex-end		侧轴尾部排列 center			居中排列 space-around	侧轴平分空间 space-between	两侧贴边，平分剩余空间 

2.子元素属性

1.flex属性（份数）

flex:1 

2.align-self 属性（自己的对齐方式）

stretch			拉伸 center			居中 start			左对齐 end				右对齐 

本文转自 https://blog.csdn.net/m0_73302873/article/details/126372410，如有侵权，请联系删除。