多栏布局的三种实现方案
固定宽度,流动,弹性
原则上应该控制布局宽度,而让内容决定布局高度
固定宽度布局
解决设置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 伸缩项目主轴的起始数值