css圣杯模式的HTML代码,CSS3Flex和圣杯布局

一、css3盒模型

css3增加了盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。box-sizing：content-box  border-box

content-box    元素的宽 = width + padding + border

border-box    元素的宽 = width(包含padding和border)保持盒子整体不会变

二、伸缩布局(弹性盒)盒模型

css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。

主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。

flexbox布局功能主要具有以下几点：

1、屏幕和浏览器窗口大小发生变化也可以灵活调整布局；2、指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；3、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；4、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；5、控制元素在页面上的布局方向；6、按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

flexbox模型中的专业术语：

1、主轴和侧轴2、主/侧轴、侧/侧轴方向3、主/侧轴起点、主/侧轴终点4、主/侧轴长度5、伸缩容器(大div)和伸缩项目(子元素或内容)

弹性盒模型的使用：

声明伸缩容器(父元素)：display：flex；需要加前缀display：-webkit-flex；display：-moz-flex；display：-ms-flex；display：-o-flex；display：flex；

display: -webkit-flex;display: -moz-box-flex;display: -ms-flexbox;display: -o-flex;

伸缩项目(子元素)-webkit-flex:1;-moz-flex:1;-ms-flex:1;-o-flex:1;flex:1;

-webkit-flex: 1;-moz-box-flex:1 ;-ms-flex:1;-moz-box-flex:1 ;

伸缩容器属性：

1、伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向

?row：从左向右row-reverse：与row相反；column：从上到下column-reverse：与column相反；

2、伸缩换行 flex-wrap：

?nowrap 不换行    默认值，不管超出还是不超出都不会换行wrap 换行    一旦伸缩项目超出伸缩容器，那么就会换行wrap-reverse 换行反向    主轴水平时，上下反向，主轴垂直时，左右反向；

3、伸缩流方向与换行 flex-flow  缩写形式。

flex-flow：flex-direction  flex-wrap;  两个值同时定义或者单独定义都生效

4、主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式；

?flex-start：伸缩项目向一行的起始位置靠齐；flex-end：伸缩项目向一行的结束位置靠齐；center：伸缩项目向一行的中间位置靠齐；space-between：伸缩项目会平均的分布在行里；space-around：伸缩项目会平均的分布在行里，两端保留一半的空间；

5、侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式

?flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；center：伸缩项目的外边距盒 在该行的侧轴上居中放置；baseline：伸缩项目根据伸缩项目的基线对齐；stretch：伸缩项目拉伸填充整个伸缩容器。

6、align-self(加在子元素上)：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items。flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；(元素位于容器的开头)flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；(元素位于容器的结尾)center：伸缩项目的外边距盒 在该行的侧轴上居中放置；(元素位于容器的中间)stretch：伸缩项目拉伸填充整个伸缩容器。(元素被拉伸以适应容器)

早上讲过的值，大多数是加在父元素上面的，flex、align-self是加在子元素上面的

7、堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式；  往往要与换行同时应用，没有换行就不存在多行的情况。flex-start：各行向伸缩容器的起点位置堆叠；(没有行距)flex-end：各行向伸缩容器的结束位置堆叠；(底部对其没有行距)center：各行向伸缩容器的中间位置堆叠；(居中没有行距)space-between：各行在伸缩容器中平均分布；(两端对齐，中间自动分配)space-around：各行在伸缩容器中平均分布，两端保留一半的空间；(自动分配距离)

伸缩项目属性：

1、显示顺序 order (加在子元素上)默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序。

不定义order的伸缩项目会排到前面

​

order：1； 排第一

order：2； 排第二

三、多列布局

css3多列布局可以自动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版非常相似。

核心属性：columns：column-width 列宽  column-count 列数column-width：定义每列列宽； 类似于最小宽度min-width； auto 自适应；column-count：定义分列列数；最多列数，auto自适应(由列宽、容器宽和列间距决定)，也可固定column-gap：定义列间距； 不能为负数；column-rule：定义列边框；与定义边框一样：2px dashed #ccc;column-span：定义多列布局中子元素的跨列效果；通常用于标题；none：不跨列；all：跨所有列

main:标签规定文档的主要内容。元素中的内容对于文档来说应当是唯一的。在一个文档中，不能出现一个以上的 元素。 元素不能是以下元素的后代：、、、 或 。、

-----------------------------补充

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值(比如350px)，则项目将占据固定空间。不常用，还在不断变化中。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。