主要内容区域
2011年(264)
分类: 系统运维
2011-04-29 15:28:32
本文是《CSS 那些事儿》阅读笔记第二篇(布局篇)。本篇中主要介绍DOCTYPE、盒模型的理解以及一些设计原则,以及常见的两列,三列或多列页面布局的实现方式...
一、文档类型DOCTYPE即DTD声明,用于指定页面所使用XHTML或HTML的版本。
1. STRICT(严格型)1 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> |
1 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> |
1 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" ""> |
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
1.2 盒模型实际高:margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom
2. 盒模型的不同表现形式border和padding计入了width值,故width实际占据了“width-border-padding”
margin + width + margin
3.2 其他状态宽:标准值 + 20px
高:标准值 + 38px
1 2 3 4 5 6 7 8 | 头部信息
主要内容区域 侧边栏
|
方法:宽高确定,mainBox、SideBox左右浮动。
缺点:内容过多超出高度后会溢出。
方法:去掉container、mainBox、SideBox高度,mainBox、SideBox左右浮动、footer清除左右浮动(必须)。
注意:footer清除浮动不能直接使用“clear:both”,否则footer会紧挨container。只能对container使用overflow或伪类:after来清除浮动。
3. 负边距应用如果mainBox、SideBox宽度之和大于container宽度,将导致错位。为此可对SideBox应用负边距“margin-left:-XX”,或对mainBox应用“margin-right:-XX”。
原理:外边距margin的作用是增加容器与容器的间距,负值是减少间距。
五、两列宽度自适应结构方法:将mainBox、SideBox宽度单位px改为百分比。(注意该宽度并不是盒模型的总宽度,而是盒模型内容区域width的宽度。)
缺点:IE7及以下版本出现错位。解决方法:#footer{width:100%}或#footer{clear:both}
六、单列定宽、单列自适应结构方法:mainBox 宽70%、SideBox 宽200px
缺点:缩小窗口会错位、用负边距解决,则mainBox与SideBox内容会重叠。
解决方法:浮动及清除浮动失效,无法撑开父级元素高度,可用JS解决。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #container { position:relative; } .mainBox { width:auto; margin-right:200px; } .sideBox { position:absolute; top:0px; right:0px; width:200px; margin-left:-200px; } |
方法:背景Y轴平铺,即Repeat-y
缺点:宽度必须确定、经常要修改图片。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #container{ overflow:hidden; //完全清除浮动,以自适应高度 } .mainBox, .sideBox{ padding-bottom:9999px; margin-bottom:-9999px; } #container:after{ display;block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; //清除左右浮动 } |
缺点:不能使用背景图片、必须保证一边高度不能大于另一边(mainBox )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #container{ position:relative; } .mainBox { float:left; width:680px; border-right:280px solid #AAAAAA; } .sideBox { position:absolute; top:0; right:0; width:280px; } #container:after { display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; } /* 清除内容区域的左右浮动 */ |
1 2 3 4 5 6 7 8 9 10 |
1. 如果width=auto(默认值),则width=浏览器窗口所能显示的最大值。
2. 如果width=auto,且有float属性,则width=随盒模型中内容而变化。
1 2 3 4 5 6 7 8 9 | 头部信息
主要内容区域
次内容区域
侧边栏
|
思路:mainBox左浮动,且宽度100%占据一行;其子元素content宽度为auto,且用 margin(不用padding)为其左右留下空白;subMainbox、sideBox利用负边距原理被吸到content的左右空白区域,注意的 是subMainbox负边距为"-100%"而非"-300px"...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .mianBox{ float:left; width:100%; background:#FFF; } .mianBox .content{ margin:0 210px 0 310px; background:#000; } subMainBox{ float:left; width:300px; margin-left:-100%; background:#666; } .sideBox{ float:left; width:200px; margin-left:-200px; background:#666; } |
这个很好理解,沿用上面代码,并修改以下部分。
1 2 3 4 5 6 7 8 9 10 | .mianBox .content{ margin:0 41% 0 310px; background:#000; } .sideBox{ float:left; width:40%; margin-left:-40%; background:#666; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .mianBox .content{ margin:0 21% 0 41%; background:#000; } .subMainBox{ float:left; width:40%; margin-left:-100%; background:#666; } .sideBox{ float:left; width:20%; margin-left:-20%; background:#666; } |