CSS3弹性盒

一、新版盒模型

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：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

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

       复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
       缩写「flex: 1」, 则其计算值为「1 1 0%」
       缩写「flex: auto」, 则其计算值为「1 1 auto」
       flex: none」, 则其计算值为「0 0 auto」
       flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

10、flex三个属性值介绍

       flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

       flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

       flex-basis：项目的长度

二、旧版盒模型

1、display：box  ：(必须加前缀)设置弹性盒 使用如下属性，必须在父代设置display:box;

2、box-orient

       在父级上设置该属性，则子代按水平排列或竖直排列。
　　注：所有主流浏览器不支持该属性，必须加上前缀。
　　1）horizontal  水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
　　2）vertical  垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。

3、box-pack

       在父级设置，子代的水平对齐方式。（父容器里面主轴对齐方式）
　　1）start  水平左对齐
　　2）end  水平右对齐
　　3）center  水平居中对齐

4、box-align

         在父级设置，子代的垂直对齐方式。（父容器里面子容器侧轴对齐方式）
　　 1）start  垂直顶部对齐
　　 2）end 垂直底部对齐
　　 3）center 垂直居中对齐
　　 4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。

5、box-direction

         在父级上设置该属性，确认子代的排列顺序。
　　 1）normal  默认值，子代按html顺序排列
　　 2）reverse  反序

6、box-flex

        1）占父级元素宽度的number份
　　 2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数
　　 3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份

三、CSS3多列

1、column-count

        属性规定元素应该被分隔的列数
        适用于：除table外的非替换块级元素, table cells, inline-block元素

 

 

2、column-gap：说明： 属性规定列之间的间隔大小

3、column-rule

        设置或检索对象的列与列之间的边框。复合属性。
         column-rule-color规定列之间规则的颜色。
         column-rule-style规定列之间规则的样式。
         column-rule-width规定列之间规则的宽度。

4、column-fill

       设置或检索对象所有列的高度是否统一
       auto：列高度自适应内容
       balance：所有列的高度以其中最高的一列统一

5、column-span

       设置或检索对象元素是否横跨所有列。
        none：不跨列
        all：横跨所有列

6、column-width：设置或检索对象每列的宽度。

7、columns：设置或检索对象的列数和每列的宽度，复合属性。

break-inside:avoid避免中断

描述了在多列布局页面下的内容盒子如何中断，写给多列容器里的中断元素。

四、媒体查询

1、什么是媒体查询

        媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

2、媒体查询操作方式

        实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

3、媒体查询结构

@media all and (min-width:320px) { body { background-color:blue;} }

设备类型（默认为all）

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

 默认样式 注意：默认样式要写在最前面

/* 打印样式 */@media print {}

/* 手机等小屏幕手持设备 */ @media screen and (min-width: 320px) and (max-width: 480px) {}

/* 平板之类的宽度 1024 以下设备 */ @media only screen and (min-width: 321px) and (max-width: 1024px) {}

/* PC客户端或大屏幕设备: 1028px 至更大*/ @media only screen and (min-width: 1029px) {}

/* 竖屏 */@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

/* 横屏 */@media screen and (orientation:landscape){对应样式}

4、CSS2 Media用法

其实并不是只有CSS3才支持Media的用法，早在CSS2开始就已经支持Media，具体用法，就是在HTML页面的heaad标签中插入如下的一段代码
<link rel="stylesheet" type="text/css" media="screen" href="style.css">

想知道现在的移动设备是不是纵向放置的显示屏，可以这样写：
<link rel=“stylesheet” type=“text/css” media=“screen and (orientation:portrait)” href="style.css">
第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

5、常涉及到的CSS属性

display；width；float；text-align；font

6、常见的布局方案

1）固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；

2）可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；

3）弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；

4）混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

5）布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；
移动优先（从移动端向上设计）；无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）