CSS3学习笔记-页面布局

多栏布局的三种实现方案

固定宽度，流动，弹性

原则上应该控制布局宽度，而让内容决定布局高度

固定宽度布局

解决设置margin,padding或border后元素宽度变宽的方法

（1）设置box-sizing属性为border-box。存在兼容性问题，可以使用腻子脚本ployfill来解决。

<!--[if lt IE 8 ]>
<script src="helpers/borderBoxModel.js"></script>
<![endif]--> 

（2）在元素宽度中减去对应的宽度

（3）给容器内部的元素应用内边距和边框。前提是内部元素没有设定宽度。比如设置一个没有宽度的div包裹容器里的所有元素，然后再设置这个div的边距。注：如果内部容器的上下边框不可见，内部div的上下边距会叠加。

          使用子星选择符，比如section>*来设置边距，可以达到不用div包裹就能设置元素内边距和边框的效果。

          使用子星选择符的缺点：

           （1）子元素中设置边距只能用margin-top这种指定只

           （2）存在性能问题，在子元素较多的情况下

预防过大元素,包括大图片，长url，以及包含内容过多的元素

例如图片

（1）可以设置最大宽度

img{max-width:100%;}

（2）设置父元素的overflow:hidden;

为了避免过长的单词在撑大较窄的元素，可以设置word-wrap:break-word;

三栏-中栏流动布局

负外边距实现

设置最外层的包裹层min-width:600px;max-width:1100px;

用一个div包裹三栏，再用一个div包裹左中栏，设置包裹左中栏的右边距margin-right:-210px。设置中栏的宽度自适应，并设置中栏的右边距margin-right:210px

应用人造栏技术，可以在视觉上让各栏的高度相同

原理：在包裹各栏的父元素上，应用与各栏同宽的背景颜色与背景色

表格实现

display属性有table-row table-cell table,table-cell属性能够直接让块级元素并排显示

直接设置display属性为table-sell，浏览器会自动补全<table>和<td>等属性

缺点：IE7中并不支持

多行多栏布局

在大量标签重复的情况下，使用Id标记每个模块能够提高可读性

注意：作为栏的元素只能设置水平方向的边距，而将垂直方向的边距设置在栏上，原因是父元素没有上下边框时，子元素的上下间距会折叠。

弹性布局flex

（1）设置主轴方向 flex-direction | 设置换行 flex-wrap

（2）flex-flows是flex-direction（row | column）和 flex-wrap（nowrap）的简写

（3）主轴对齐方式 justify-content

（4）侧轴对齐方式 align-content 对齐伸缩行 | align-items  | align-self（设置单独的一个容器，可用来覆盖align-items的属性）注：层级关系align-content>align-items>align-self

（5）显示顺序 order：number  未设置默认为0

（6）flex-grow 按比率放大 | flex-shrink 按比率缩小 | flex-basis  伸缩项目主轴的起始数值