三栏式布局
左右两边固定宽度200px,中间自适应!
1、绝对定位position
外层元素设置宽度未100%,利用 position : absolute; 使左右两边固定宽度200px、高度和位置,中间栏给定高度,宽度继承自父元素100%,但左右margin值要给定大于200px的值!
优点:简单实用,并且主要内容可以优先加载;主体三个div不分顺序。
缺点:如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。
2、弹性布局flex
外层元素设置为容器 display : flex; 左右两栏设置不放大 flex-grow:0; 可缩放 flex-shrink:1 ,固定的 flex-basis:200px ,简写 flex:0 1 200px;;中间栏 flex:1 1 auto,可放大!
优点:简单实用。
缺点:需要考虑浏览器的兼容性,主体三个div一定要按照左中右顺序。
3、自身浮动float(流式布局)
左右栏给定宽度高度,并分别向左、向右浮动;中间栏给定margin值的左右距离大于200px,并给定高度(必须)。
优点:代码简洁高效。
缺点:主体三个div,中间栏必须放在最后;中间栏注意不能使用clear:both; ;主要内容无法最先加载,当页面内容较多时会影响用户体验。
4、margin负值(双飞翼布局)
三栏全浮动,将左侧栏设置 margin-left:-100%; ,将右侧栏设置 margin-left:-200px; 把左右两栏放到指定位置;中间栏的外层元素width:100% ,在嵌套一个内层元素,设置主要内容的高度与左右间距(大于200px)。
优点:三栏相互关联,具有一定抗性——布局不受内部影响;主要内容可以优先加载。
缺点:主体三个div,中间栏必须放在第一位上;理解困难;出现百分比宽度,过多的负值定位,如果出现布局的bug,排查不易。
5、圣杯布局
三栏全浮动,利用margin负值布局(类似于双飞翼布局),把左右两栏放到指定位置;在最外层容器上加样式 margin:0 220px; 使整个布局向中间压缩,再利用 position:relative; 使左右两栏分别向左、向右移动定位,让出中间栏被压住的部分。
优点:与双飞翼布局相似,三栏关联,具有一定抗性;主要内容可以优先加载;相对于双飞翼来说,HTML代码相对简单。
缺点:主体三个div,中间栏必须放在第一位上;样式定义较为复杂;问题与双飞翼布局相似。
6、BFC布局
左右栏给定宽度高度,并分别向左、向右浮动;并给左右两栏分别设置右边距、左边距;中间栏给定高度,设置overflow:hidden; 。
优点:与流式布局相似,代码简洁高效。
缺点:主体三个div,中间栏必须放在最后;与流式布局相似,主要内容无法最先加载,当页面内容较多时会影响用户体验。
7、Table布局
将最外层容器 display:table; ,主体三个div均设置其 display:table-cell; ,分别设置左右栏的宽度高度即可。
优点:代码简单,容易理解。
缺点:主体三个div一定要按照左中右顺序;无法设置栏间距(这里要想设置栏间距,建议可以在中间栏外包一层div,外层div设置属性 display:table-cell ,再设置内层的margin值与具体高度)