一列固定宽度
#layout{
height:300px;
width:400px;
background:#99ffcc;
}
固定列宽度居中
在IE6及以上版本和标准的浏览器中,当设置一个盒模型的margin为auto时,可以让这个盒模型居中。
#layout {
height: 300px;
width: 400px;
background: #99FFcc; margin: auto; }
一列自适应宽度
自适应宽度是相对于浏览器而言,盒模型的宽度随着浏览器宽度的改变而改变,这时要用到宽度的百分比。当一个盒模型不设置宽度时,它默认是相对于它的父元素显示的,此处是body元素。
#layout {
height: 300px;
background: #99FFcc;
}
白边是由于body默认的外边距造成的,当我们不用任何样式进行定义时,body,h1-h6,ul等元素默认有外边距或其他样式。我们增加一项
body{
margin:0;
}
白边就没了。
一列自适应宽度居中
body{
margin:0px;
}
#layout{
margin:auto;
height:300px;
background:#99ffcc;
width:80%;
}
一列 两至多块布局
一般网站整体可分为上中下结构,即 头部,中间主体,底部。我们用三个块级元素来划分。
header,content,footer
代码如下:
body { margin:0; padding:0;}
#header {
margin:5px auto;
width:500px;
height:80px;
background:#9F9;}
#main {
margin:5px auto;
width:500px;
height:400px;
background:#9FF;}
#footer {
margin:5px auto;
width:500px;
height:80px;
background:#9f9;
}
原网址:十天学会Div+CSS之一列布局