##CSS1 布局基础
一、一栏布局
实现方式： 定宽 + 水平居中
关键代码:
<style>
/给 body 设置min-width 去掉滚动背景色 bug/
body{
min-width: 960px;
}
.layout{
/width: 960px;/
max-width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<body>
<div class="layout">
<div id="header">头部</div>
<div id="content">内容</div>
<div id="footer">尾部</div>
</div>
</body>
如图:
image.png
二、双列布局
一列固定宽度，另一列自适应宽度
实现方式：浮动元素 + 普通元素margin+父元素清除浮动
注：布局时，考虑到渲染顺序，浮动元素代码优先写在其他元素前面，优先渲染
关键代码:
<style>
#content:after{ /第3步：给父元素添加一个伪元素清除浮动/
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: left; /第1步：浮动元素/
}
.main{
margin-left: 210px; /第2步：margin-left（right）/
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
<body>
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
</body>
如图:
image.png
三、三列布局
两侧两列固定宽度，中间列自适应宽度
实现方式：浮动元素+margin+伪类元素清除浮动
关键代码：
<style>
#content:after{ /第3步：伪类元素/
content: '';
display: block;
clear: both;
}
.menu{
width: 100px;
height: 500px;
background: pink;
float: left; /第1步：浮动/
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right; /第1步：浮动/
}
.main{
margin-left: 110px; /为什么要加margin-left/ /第2步：margin/
margin-right: 210px; /第2步：margin/
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
<body>
<div id="content">
<!为什么不是main在前面： 渲染顺序>
<div class="menu">menu左</div>
<div class="aside">aside右</div>
<div class="main">content中</div>
</div>
<div id="footer">footer</div>
</body>
如图：
image.png
四、水平等距布局
实现方式：处理父元素（居中、防溢出）+浮动+ -margin
关键代码：
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none; /取消列表的实心小黑点/
}
.ct{overflow:hidden; /溢出隐藏/
width: 640px;
border:dashed 1px orange;
margin: 0 auto; /相对于页面的居中/
}
.ct .item{
float:left; /第1步：浮动/
margin-left: 20px; /第0步：提前设置/
margin-top: 20px; /第0步：提前设置/
width:200px;
height:200px;
background: red;
}
.ct>ul{
margin-left: -20px; /第2步：补充不够的20px/
}
</style>
<div class="ct">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
</ul>
</div>
如图：
image.png
