一、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:标签规定文档的主要内容。元素中的内容对于文档来说应当是唯一的。在一个文档中，不能出现一个以上的

元素。

元素不能是以下元素的后代：

、

CSS3Flex和圣杯布局

一、css3盒模型

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

你可能感兴趣的:(CSS3Flex和圣杯布局)