1、flex布局
6个属性：//子元素设置flex值调整空间占比
-
flex-direction 决定主轴的方向（即项目的排列方向）row（默认值）：主轴为水平方向，起点在左端
-
flex-wrap 换行方式，nowrap（默认）：不换行。 wrap：换行
-
flex-flow 前两种属性的简写
-
justify-content :定义了项目在主轴上的对齐方式
-
center： 居中
-
space-between：两端对齐，项目之间的间隔都相等。
-
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
-
align-items ：定义项目在交叉轴上如何对齐 end靠下
-
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
-
align-content 定义了多根轴线的对齐方式
-
flex: 1; 的值是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
2、grid布局
是二维布局方式，可以同时控制行和列
grid-template-columns:1fr 1fr 1fr //在一行内平分3列 fr：剩余空间
column-gap: 20px; 列间距 row-gap:20px 行间距
grid-template-areas:"h h a" → header{grid-area:h} | foot{grid-area:a}
align-items 项目竖直方向对齐 justify-items：space-between 项目水平两端对齐
align-content 整体内容在容器里的竖直位置 justify-content ：整体内容在容器里的水平位置
3、居中对其方法
1。margin:auto 水平居中
- 父元素设置
display: flex;
justify-content: center;
align-items: center;
3。父元素设置
display: grid;
justify-content: center;
align-content: center; 或 align-items：center
4。父元素：
display: table-cell;
vertical-align: middle; //垂直居中
text-align: center;
子：display:inline-block;
5。
父元素：
position: relative;
子元素：
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;//如果宽高未知，transform:translate(-50%,-50%)；
4。常用的css可继承的属性：
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文本颜色
visibility：元素可见性
光标属性：cursor
字体样式，字体颜色，文本缩进。
5。CSS 盒模型
css的盒模型由里到外包括：content,padding,border,margin4部分,
css的盒模型有两种：IE盒模型和标准盒模型。
2.两种盒模型的区别*
W3C标准盒子模型(content-box)：内容就是盒子的边界。
- W3C标准盒子模型(content-box)： width=内容宽度
- IE盒子模型(border-box)：边框才是盒子的边界。
- IE盒子模型(border-box)： width=内容宽度+padding+border
6、CSS中的BFC
BFC（block formatting context）块级格式化上下文，
形成BFC的条件： 1.浮动元素：float属性值除none以外的元素。
2.定位元素：position属性值为（ absolute 或是 fixed ）的元素。
3.dispaly属性值为（inline-block、table-cell、table-caption、flex、inline-flex）其中任意一个值的元素。
4.overflow属性值除visible以外的元素。（hidden、auto、scroll）.。
BFC的特性： 1.内部盒子会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定，属于同一个BFC盒子的margin会重叠。
3.在BFC盒子中，每个盒子的左边缘会触碰父容器的左边缘，即在没有margin和padding值时，父border内边与子border外边重叠。
4.BFC盒子不会与浮动盒子产生交集，而是紧贴浮动元素边缘。
5.如果父容器没有设置高度，但子盒子中存在浮动元素，那么在计算bfc的高度时，会计算上浮动盒子的高度。
6.BFC是一个独立的容器，容器内的元素不会影响外部元素，同样外部元素也不会影响容器内元素。
7。清浮动的方法
1.给浮动元素后的元素添加clear属性
2.给浮动元素添加伪类。
3，浮动元素的父元素设置overflow属性。
8。响应式布局方法
1。媒体查询
