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值；
转载请注明原文地址: https://www.6miu.com/read-85630.html
