2022-3-1****
对盒子模型添加阴影****
box-shadow为盒子模型添加阴影
1. hoffset：控制阴影在水平方向的偏移
2. Voffset：控制阴影在垂直方向的偏移
3. Blurlength：控制阴影的模糊程度
4. Scalelegth：控制阴影的缩放程度
5. Color：控制阴影的颜色
例div class=a
.a{
宽高、box-shadow：6px 6px 6px #222
加上border-radius就是圆角}
分栏效果****
1. columns：可同时指定分栏的宽度和栏目数
2. column-width：指每个栏目的宽度
3. column-count：指一个整数值，用于指定栏目数
4. column-rule：用于指定栏目数之间的分隔条，可同时指定分隔条的宽度、样式、颜色
5. column-rule-width：指定一个长度值，指定栏目之间分隔条的宽度
6. column-rule-style：设置分隔条的线性
7. column-rule-color:设置分隔条的颜色
8. column-gap：指定一个长度值，用于指定栏目之间的间距
9. column-fill：用于控制栏目的高度
10. Auto：随内容变化而变化
11. Balance：各栏目的高度将会统一成内容最多的那一栏的高度
例：大多用于文字介绍；{ 宽高、阴影box-shadow、圆角、columns 200px 3数量；分隔条column-rule： 1px 、solid、#ff0}
Display：box可以是多栏布局（大多数浏览器不支持）属性前加内核例如：display:-webkit-box；display：-moz-box；
盒子模型其他属性
Box-orient：设置box盒子模型里子元素的排列方向
Horizontal：box盒子模型里子元素水平排列，如果没有指定高度，那么将按照父元素的高度显示
Verticalbox：盒子模型里子元素垂直排列，如果没有指定宽度，那么将按照父元素的宽度显示
box-flex：盒子模型里子元素自适应的宽度比例
box-ordinal-group：子元素的显示顺序
box-flex：子元素如何分配剩余空间
box-align：垂直对齐方式（start | end |center |baseline |strerch）
例.a{宽高、display：box、display：-moz-box; display:-webkit-box;
Box-orient:horizontal(排列方向)}
例：(左侧固定，右侧自动分配)
div style=width:100px;>left/div
div style=box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;> right /div
Flex布局****
采用flex布局的元素，称为flex容器（flex container），简称“容器”。它所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”
容器默认存在两根轴：水平的主轴（ main axis）和垂直的交叉轴（cross axis）
主轴开始的位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
![]()
****
Flex布局属性（容器属性）有以下几个****
Flex-direction：属性决定主轴的方向（即项目的排列方向）
Flex-direction：row | row-reverse | column | column-reverse；
Row：默认值：主轴为水平方向，起点在左端
row-reverse：主轴水平方向，起点在右端
Column：主轴为垂直方向，起点在上沿
Column-reverse：主轴为垂直方向，起点在下沿
常用的flex布局属性（容器属性）有以下几个****
flex-wrap：默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不了，如何换行。
Flex-wrap：nowrap | wrap | wrap-reverse
Nowrap：（默认）不换行
Wrap：换行，第一行在上方
Wrap-reverse：换行，第一行在下方
Flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow：flex-direction>|| flex-wrap>;
