布局模型在早期没有平板和智能手机等移动设备大行其道的时期，Web页面的设计主要是面向PC端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。一般来说有4:3、16:10、16:9这样的主要分辨率。那么，从这种比例上来看，长度总是大于宽度的。从最低分辨率1024*768设计即可。为了使浏览器底部不出现滚动条，需要减去适当的宽度，比如减去28，最终固定长度设置为996即可。当然，也有一些网站在近两年讲最低分辨率设置为1280减去滚动条宽度，因为大显示器逐步主流。除了刚才所说的固定长度的布局，还有一种是流体布局，就是布局的长度为百分比，比如100%。不管你是什么分辨率，它都能全屏显示，当然，局限性也特别大，只适合一些单一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。我们创建一个三行两列模型。并采用表格布局和浮动布局，构建固定和流体布局的方式，模型图如下：
表格布局表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。当然这个布局非常不建议使用，只是教学了解。表格应该用它最为语义的地方，就是二维表的数据显示。
表格布局
//HTML部分
<table border="0">
<tr>
<td colspan="2" class="header">header</td>
</tr>
<tr>
<td class="aside">aside</td>
<td class="section">section</td>
</tr>
<tr>
<td colspan="2"class="footer">footer</td>
</tr>
</table>
//CSS部分
body{
margin:0;
}
table{
margin:0 auto; //auto 可以使左右两边居中
width:960px;
border-spacing:0;
}
.header{
height:120px;
background-color:olive;
}
.aside{
width:200px;
height:500px;
background-color:purple;
}
.section{
width:760px;
height:500px;
background-color:maroon;
}
.footer{
height:120px;
background-color:gray;
}
流体布局
表格的固定布局改成流体布局非常简单，只需要设置table为100%即可。
//修改table
table{
width:100%;
}
浮动布局
浮动布局主要采用float和clear两个属性来构建。
- 固定布局
//HTML部分
<header>header</header>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer>
//CSS部分
body{
width:960px;
margin:0 auto;
color:white;
}
header{
height:120px;
background-color:olive;
}
aside{
width:200px;
height:500px;
background-color:purple;
float:left;
}
section{
width:760px;
height:500px;
background-color:maroon;
float:right;
}
footer{
height:120px;
background-color:gray;
clear:both;
}
- 流体布局流体布局只要更改body元素的限定长度为auto或100%。然后左右两列分别设置20%和80%即可。
//CSS部分
body{
width:auto;
}
aside{
width:20%;
}
section{
width:80%;
}
定位布局
在使用定位布局前，我们先了解一下定位属性的用法。CSS2提供了position属性来实现元素的绝对定位和相对定位。
static默认值，无定位。
absolute绝对定位，使用top、right、bottom、left进行位移。
relative相对定位，使用top、right、bottom、left进行位移。
fixed以窗口参考定位，使用top、right、bottom、left进行位移。
body {
margin: 100px;
height: 800px;
border: 1px solid red;
}
header {
width: 100px;
height: 100px;
background-color: silver;
}
//绝对定位，脱离文档流，以窗口文档左上角0,0为起点
header {
width: 100px;
height: 100px;
background-color: silver;
position: absolute;
}
111不见了
header {
width: 100px;
height: 100px;
background-color: silver;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
所谓脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在了空中一般，有了层次感。
由于绝对定位脱离了文档流，出现层次概念。那么每个元素到底在那一层，会不会冲突覆盖。这时通过z-index属性来判定它们的层次关系。
auto默认层次
数字设置层次，数字越大，层次越高
aside {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}
//以窗口参考定位，脱离文档流，会随着滚动条滚动而滚动
header{
position:fixed;
top:100px;
left:100px;
}
//相对定位，不脱离文档流，占位偏移
header {
width: 100px;
height: 100px;
background-color: silver;
position: relative;
top: 0px;
left: 0px;
}
header {
width: 100px;
height: 100px;
background-color: silver;
position: relative;
top: 0px;
left: 0px;
}
这三种分别都在各自的情况下使用，均比较常用。
但还有一种情况，就是：
1.既要脱离文档流（这样元素之间不会相互冲突）；
2.以父元素，比如body或其他父元素为参考点（这样可以实现区域性绝对定位）；
3.还必须是绝对定位。
比如以红圈为点做决定定位
body {
margin: 100px;
height: 800px;
border: 1px solid red;
/*这body父元素设置一个不需要top和left定位的相对定位，这个叫做设置参考点*/
position: relative;
}
header {
width: 100px;
height: 100px;
background-color: silver;
position: absolute;
top: 20px;
left: 20px;
}
固定布局
//CSS部分
body{
width:960px;
margin:0 auto;
position:relative;
}
header{
width:960px;
height:120px;
background-color:olive;
position:absolute;
top:0;
left:0;
}
aside{
width:200px;
height:500px;
background-color:purple;
position:absolute;
top:120px;
left:0;
}
section{
width:760px;
height:500px;
background-color:maroon;
position:absolute;
top:120px;
/*left:200px;*/
right:0;
}
footer{
width:960px;
height:120px;
background-color:gray;
position:absolute;
top:620px;
}
//html部分
<header>
header
</header>
<aside>
aside
</aside>
<section>
section
</section>
<footer>
footer
</footer>
在上面，基本都用了定位来进行固定布局。但细心的可以发现，其实只有右侧需要实行绝对定位，其他就按照普通的摆放即可。对于设计成流体布局，只要将长度设置成百分比即可。
box-sizing
在盒模型那个章节，我们了解到元素盒子如果加入了内边距padding和边框border后，它的总长度会增加。那么如果这个元素用于非常精确的布局时，我们就需要进行计算增减。这其实是比较烦人的操作，尤其是动态设置页面布局的时候。CSS3提供了一个属性box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。
content-box默认值，border和padding设置后用于元素的总长度。
border-box border和padding设置后不用于元素的总长度。
//设置border-box让border和padding不在额外增加元素大小
body {
width: 960px;
margin: 0 auto;
}
header {
height: 120px;
background-color: olive;
overflow: auto;
}
aside {
width: 200px;
height: 500px;
background-color: purple;
border: 5px solid green;
padding: 10px;
box-sizing: border-box;
float: left;
}
section {
width: 760px;
height: 500px;
background-color: maroon;
float: right;
}
footer {
width: 960px;
height: 120;
background-color: gray;
clear: both;
}
Border两边增加了5，如果不用box-sizing:border-box;
加上该属性，恢复正常
box-sizing是CSS3推出的，各个厂商在实现时设置了私有前缀。
//完整形式
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
resize
CSS3提供了一个resize属性，来更改元素尺寸大小。
none默认值，不允许用户调整元素大小。
both用户可以调节元素的宽度和高度。
horizontal用户可以调节元素的宽度。
vertical用户可以调节元素的高度。
一般普通元素，默认值是不允许的。但如果是表单类的textarea元素，默认是允许的。而普通元素需要设置overflow:auto，配合resize才会出现可拖拽的图形。
//允许修改
header {
height: 120px;
background-color: olive;
overflow: auto;
resize: both;
}
按住三角就可以随意拖动
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
