起因是这个网站上说了一些css布局的，但是在这个网站上没有说明具体怎么布局
?
margin:0 auto ：CSS布局居中功能
width 设置宽度
border边框样式为本案例便于观察而加入CSS样式，实际项目布局根据需要增减
height 设置高度 也是本案例便于观察每个DIV层而设置的高度样式，一般结构布局不需要设置高度，因为一般布局如果内容多少不能确定就不设置高度。
?
margin:0 auto(DIV居中功能)
width:400px(设置宽度为400px)
border:1px solid #F00; border:1px solid #FF0; border:1px solid #00F(设置设置3个分别为红黄蓝的边框)
height:100px;height:200px;height:100px 设置三个CSS高度值
?
1、上下结构
以下为上下布局结构截图
<html>???
<head>???
<meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"?/>???
<style?type="text/css">??
#header,#content{margin:0?auto;width:400px;?height:100px}???
#header{border:1px?solid?#F00}???
#content{?border:1px?solid?#FF0;?height:200px}???
</style>??
</head>???
<body>???
????<div?id="header"></div>??
????<div?id="content"></div>??
</body>???
</html>???
感觉其实没什么东西，div默认就是上下排布。
2、上中下结构（竖向）
上中下布局结构截图
<html>???
<head>???
<meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"?/>???
<style?type="text/css">??
#header,#content,#footer{margin:0?auto;width:400px;?height:100px}???
#header{border:1px?solid?#F00}???
#content{?border:1px?solid?#FF0;?height:200px}???
#footer{border:1px?solid?#00F}???
</style>??
</head>???
<body>???
????<div?id="header"></div>??
????<div?id="content"></div>??
????<div?id="footer"></div>??
</body>???
</html>??
?
3、左右结构
常见左右分以下2种
第1个左右
第2个左右
当然还有平等分的左右结构
这个我有点不太确定float:left;这个可以实现，它的意思是div向左排队，要实现左右，就要每一个div都有这个属性，但是如果浏览器变小，第二个div就去下一行了。
#left,#right{width:400px;?height:100px}???
#left{border:1px?solid?#F00;?float:left;}???
#right{?border:1px?solid?#FF0;?float:left;}???
第二个方案是position:absolute;意思是绝对定位，第一个div是绝对定位，第二个div左外边距就是第一个div的宽度
#left,#right{width:400px;?height:100px}???
#left{border:1px?solid?#F00;?position:absolute;}???
#right{margin-left:400px;?border:1px?solid?#FF0;?}???
4、左中右（横向）
在左中右里面，我试一点儿更符合要求的，三个div加起来全屏显示，中间的div占百分之五十，左右各占百分之二十五
<html>???
<head>???
<meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"?/>???
<style?type="text/css">??
#left,#middle,#right{?width:25%;?height:100px}???
#middle{?width:50%;}???
#left{?background:??#F00;float:?left;}???
#middle{?background:??#FF0;float:?left;}???
#right{?background:??#00F;float:?left;}???
</style>??
</head>???
<body>???
????<div?id="left"></div>??
????<div?id="middle"></div>??
????<div?id="right"></div>??
</body>???
</html>???
?
5、上中（中分左右）下结构
这个实在没必要谢了，直接看6吧
6、上中（中分左中右三列）下结构
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
<html?xmlns="http://www.w3.org/1999/xhtml">??
??
?
<head>??
????<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>??
????<title>?</title>??
????<style?type="text/css">??
????????#head{height:?40px;background-color:?#0033CC;margin:?0;}??
????????#content{background:?#CCCCCC;height:?200px;margin:?0;}??
????????#left{width:?20%;height:?200px;background:?#CCCC66;float:?left;margin:?0;}??
????????#c{width:?60%;height:?200px;background:?red;margin:?0;float:?left;}??
????????#right{width:?20%;height:?200px;background:?#339966;float:?right;margin:?0;}??
????????#foot{background:?#0099CC;height:?40px;margin:?0;}??
????</style>??
</head>??
??
?
<body>??
????<div?id="head">head</div>??
????<div?id="content">??
????????<div?id="left">left</div>??
????????<div?id="c">content</div>??
????????<div?id="right">rigth</div>??
????</div>??
????<div?id="foot">foot</div>??
</body>??
??
?
</html>??
?
?
?
总结：
整个过程中我以前不熟的就只有俩东西，第一个是float:left;第二个是position:absolute;
下面两篇分别总结一些css的这俩属性
CSS学习笔记01各种布局
原文：https://www.cnblogs.com/mihe/p/9857664.html
