页面布局
总结：
布局1：
（0）内联元素对设置宽（width）和高（height）不敏感
（1）如果子元素是一个块级元素（block）或者被设置为块级元素，我们可以对子元素使用margin：0 auto居中。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.container{
background:blue;
width: 600px;
height: 400px;
border: 1px solid yellow;
}
.sub1{
background: yellow;
margin: 0 auto;
width: 100px;
height: 100px;
/*display:inline-block;*/
}
</style>
</head>
<body>
<div class="container">
<div class="sub1"></div>
<!--这里如果使用span标签，那必须再给span转换一下（display：inline-block）,见.sub1内注释-->
</div>
</body>
（2）如果子元素是一个内联元素或者被设置为内联、内联块元素，这时候要居中的话。可以对父元素设置一个text-align：center实现居中。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.container{
background:blue;
width: 600px;
height: 400px;
border: 1px solid yellow;
text-align: center;
}
.sub1{
background: yellow;
margin: 0 auto;
width: 100px;
height: 100px;
display:inline-block;//转换内联为块
}
</style>
</head>
<body>
<div class="container">
<span class="sub1">华点</span>
</div>
</body>
布局2：
特点：子元素贴着父元素两边，联想到浮动的左浮动和右浮动。同时子元素的宽度可以使用自适应。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.container{
background:blue;
width: 600px;
height: 400px;
border: 1px solid yellow;
}
.sub1,.sub2{
background: yellow;
height: 100px;
}
.sub1{
float: left;
/*使用了浮动后*/
}
.sub2{
float: right;
}
</style>
</head>
<body>
<div class="container">
<span class="sub1">logo</span>
<span class="sub2">华点导航</span>
<!--span对高度宽度不敏感，span中不添加内容的话，无法撑起高度-->
</div>
（1）如果子元素使用了浮动，那么子元素自动变成内联块元素。对设置的宽度和高度敏感。(自动撑起）
8122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
