有关前端的基本概念:盒模型......

1.盒模型的阴影

box-shadow：x轴偏移量 Y轴偏移量 模糊值 阴影颜色 inset（内阴影）；

2.怪异盒模型：

box-sizing：border-box；

盒子的总占位=width+padding+border+margin；

定义的width和height包括padding和border；

3.标准盒模型

box-sizing：content-box；

定义的width和height不包括padding和border；

17、从box-sizing出发，简述盒模型？

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的， 盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

4.弹性盒模型（加给父元素）

display：-webkit-box；定义弹性盒子元素的排列方式；

（0） box-orient：vertical；（纵向，垂直方向）

horizontal；（水平方向，横向）

*设置弹性盒子元素的水平方向对齐方式：horizontal；（水平方向，横向）

box-pack：start；在开始位置对齐，左对齐

center；居中对齐

end;在结束位置对齐，右对齐

justify；两端对齐，分散对齐

*设置弹性盒子元素的垂直方向对齐方式：vertical；（纵向，垂直方向）

box-align：start；在开始位置对齐，顶对齐

center；居中对齐

end;在结束位置对齐，底对齐

（1） 定义弹性盒子的排列是否反向：

box-direction：normal；正常

reverse；反向

（2） 设置弹性盒子元素显示顺序：

box-ordinal-group:数值小的在前面，数值相等时，HTML结构在前的就在前面

（3） 分配盒子的剩余空间：

box-flex:N；将剩余空间分成N份；

子元素尺寸=盒子尺寸*子元素box-flex属性值/所有子元素的box-flex属性值的和；

子元素尺寸=盒子尺寸/子元素box-flex之和*当前子元素的box-flex值；