一、基础概念
W3C标准:由万维网联盟制定的一系列标准:包括:
结构化标准语言(HTML和XML);
表现标准语言(CSS);
行为标准语言(DOM和ECMAScript)。
倡导结构,样式,行为分离。
CSS中的定位机制:
1、标准文档流(Normal flow):从上到下,从左到右,输出文档内容,由块级元素(从左到右撑满页面,独占一行;触碰到页面边缘时,会自动换行。常见块级元素:div、lu、li、d、dt、p……)和行级元素(能在同一行内显示,不会改变HTML文档结构。常见行级元素:span、strong、img、input……)组成。
2、浮动(Floats):
3、绝对定位(Absolute positioning):
盒子模型:网页布局的基石,有四部分组成:
边框(border)、外边距(margin)、内边距(padding)、盒子中的内容(content)。如下图:
盒子的尺寸=边框+外边距+内边距+盒子中的内容尺寸
注:块级元素和行级元素都是盒子模型。
盒子3D模型:
常见页面布局及解决方案:
二、自动居中一列布局
关键词:标准文档流,块级元素,margin属性
自动居中一列布局需要设置margin左右值为auto,而且一定要设置宽度为一个定值。
auto会根据浏览器的宽度自动地设置两边的外边距
如果想让页面自动居中,当设置margin属性为auto的时候,不能再设置浮动和绝对定位属性
代码示例:
一列布局固定:
XML/HTML Code复制内容到剪贴板
一列布局body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.head, .main, .footer{ width:960px; margin:0 auto} /*margin属性及具体的宽度*/
.head{ height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
head