弹性盒媒体查询

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

成都创新互联公司成立于2013年，我们提供高端网站建设、成都网站制作公司、成都网站设计、网站定制、全网营销推广、微信平台小程序开发、微信公众号开发、成都网站营销服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为成都水电改造企业提供源源不断的流量和订单咨询。

    标准盒模型和怪异盒模型的区别：
    在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
    在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

    Css3中box-sizing：属性让两种盒模型相互转变
    box-sizing ： content-box || border-box || inherit;

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

column-width和column-count这两个属性提供了分栏的标准，只写其中的一个
column-gap和column-rule就处在相邻两列之间。
让某个元素跨栏加到某个元素上：column-span : all / none ; 是否跨栏显示；

三、flex概念
采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为容器项目。
弹性盒媒体查询

容器属性
1、display:flex 设置为弹性盒（父元素添加）
2、flex-direction (主轴排列方向)
说明：指定了弹性子元素在父容器中的位置
row 默认在一行内排列
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3、justify-content(主轴对齐方式)
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

      ■ flex-start  默认，左对齐
      ■ flex-end  右对齐
      ■ center   居中对齐
      ■ space-between  两端对齐，中间自动分配
      ■ space-around  自动分配距离

4、align-items（侧轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值项目的高度自适应容器（注：子元素不能设置高度）
5、flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’> 属性类似。注：本属性在只有一行的伸缩容器上没有效果。
■ flex-start没有行间距
■ flex-end底对齐没有行间距
■ center居中没有行间距
■ space-between两端对齐，中间自动分配
■ space-around自动分配距离
7、align-self
align-self 属性规定灵活容器内被选中项目的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。

auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
Stretch元素被拉伸以适应容器。
Center元素位于容器的中心。
flex-start元素位于容器的开头。
flex-end 元素位于容器的结尾。
8、order
number排序优先级，数字越大越往后排，默认为0，支持负数。
弹性盒媒体查询
9、 flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
flex-grow: ;
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
10、 flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
11、 flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

四、媒体查询
媒体查询
可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

响应式网站设计(Responsive Web design)的理念是：
集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

响应式网站布局的依据是：媒体查询

分享文章：弹性盒媒体查询
文章转载：http://cdxtjz.cn/article/gijeji.html

弹性盒媒体查询

其他资讯