炒冷饭11

布局搭框架###

浮动 vs 负margin
对于相邻的两个浮动元素，如果因为空间不够导致第二个浮动元素下移，可以通过给第二个浮动元素设置 margin-left: 负值 来让第二个元素上移，其中 负值 大于等于元素上移后和第一个元素重合的临界值

单列布局

ee7cb56f-35bb-45b3-ba25-b1b66a001d.jpg

一栏布局

头部

内容

尾部

通栏布局优化

头部

内容

尾部

内部元素水平居中

.parent{text-align:center;}
.child{display: inline-block;}

双列布局(一列固定宽度，另外一列自适应宽度)

74f2ada5-53.jpg

左固定，右自适应——注意清父容器的浮动 注意margin-left的用法

aside

content

footer

三列布局

1959.jpg

两侧两列固定宽度，中间列自适应宽度

aside

aside

content

footer

通用九宫格

• 1


• 2


• 3


• 4


• 5


• 6


• 7


• 8

圣杯布局:缺点浏览器拉小会出现问题
注意写法 margin-left:-100%
.aside{
width: 100px; /1/
height: 300px; /1/
background: red; /1/
margin-left: -100%; /4/
position: relative; /6/
left: -100px; /6/

main

aside

extra

双飞翼布局

main

aside

extra