弹性盒媒体查询

<强>一、怪异盒模型
浏览器对盒模型的解析一共有两种模式,一种是标准模式,另一种就是怪异模式。
一般在页面头部声明了DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6, ie7, ie8下将会触发怪异模式(怪癖模式)。

 <代码>标准盒模型和怪异盒模型的区别:
　　在标准模式,下一个块的总宽度=宽度+保证金(左,右)+填充(左,右)+边界(左,右)
　　在怪异模式,下一个块的总宽度=宽度+保证金(左,右)(即宽度已经包含了填充和边界值)
　　
　　Css3中box-sizing:属性让两种盒模型相互转变
　　box-sizing:内容框| | border-box | |继承; 

当设置为box-sizing:内容框时,将采用标准模式解析计算,也是默认模式,
当设置为box-sizing: border-box时,将采用怪异模式解析计算,

<强>二,css3多列分栏布局
1。汽车| column-count:整数;——控制栏数
2.列宽:价值;——每栏的宽度
3。纵队间隔:价值;——两栏之间的间距
4。column-rule:宽度、线型,颜色;——栏与栏的间隔线
类似边境,固体|点|冲实线|点线|虚线

列宽和column-count这两个属性提供了分栏的标准,只写其中的一个
纵队间隔和column-rule就处在相邻两列之间。
让某个元素跨栏加到某个元素上:列空间:所有/没有;是否跨栏显示;

<强>三,flex概念
采用flex布局的元素,称为flex容器,它的所有子元素自动成为容器成员,称为容器项目。
拉伸元素被拉伸以适应容器。
中心元素位于容器的中心。
flex-start元素位于容器的开头。
flex-end元素位于容器的结尾。
,
订单数量排序优先级,数字越大越往后排,默认为0,支持负数。
弹性盒媒体查询