Float 布局
- 给子元素加上
float:left - 给父元素加上
clearfix
.clearfix::after{
content: ‘‘;
display: block;
clear:both;
}Flex 布局
- 给父元素加上 display:flex;
- 给父元素加上 justify-content:space-between;
发现两个Flex 小游戏（感觉好脑残）不过挺适合新人学习的：
http://flexboxfroggy.com/#zh-cn
http://www.flexboxdefense.com/
简单的布局：做定位的的元素上面不要加任何属性，需要加属性，在它里面做，bug最少。
<head>
<style>
.parent{
background: #A9A9A9;
min-width: 600px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.zuzong{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.child:nth-child(1){
background: #00FFFF;
float: left;
}
.child:nth-child(2){
float: right;
}
.logo{
text-align: center; /*文字水平居中*/
width: 60px;
height:30px;
line-height: 30px; /*单行文本居中，行高和高相等*/
margin:5px;
}
.clearfix::after{
content: ‘‘;
display: block;
clear:both;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
ul{
list-style: none;
}
ul > li{
float:left;
margin:0 0 0 10px ;
line-height: 24px;
padding-top: 8px;
padding-bottom:8px;
}
.banner{
background: #DCDCDC;
height: 300px;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.pictures{ /*定位用的，居中*/
width: 800px;
margin-left: auto;
margin-right: auto;
}
.pictures > .xxx {
margin: 0 -4px; /*负margin 加在父元素身上，margin为负表示向外拉伸。其外面有一个定位用的子元素*/
display: flex;
flex-wrap: wrap;
background: red;
}
.picture{
width:calc(25% - 8px);/*calc在父元素的宽度上乘上25%，在减去8px，得到最终的宽度*/
height: 194px;
background: #DEB887;
margin: 4px;
}
</style>
</head>
<body>
<div class="zuzong">
<div class="parent clearfix">
<div class="child">
<div class="logo">LOGO</div>
</div>
<div class="child">
<ul class="clearfix">
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
</ul>
</div>
</div>
<div class="banner"></div>
<div class="pictures">
<div class="xxx">
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
</div>
</div>
</div>
</body>1、单栏布局
<style>
.wrap{
background:gray;
}
.lyout{
max-width:800px;
margin:0 auto;
}
.header{
height:50px;
}
.middle{
height:300px;
background:green;
}
.footer{
height:50px;
}
</style>
<div class="wrap">
<div class="lyout header">eee</div>
</div>
<div class="lyout middle">eee</div>
<div class="wrap">
<div class="lyout footer">eee</div>
</div>2、 两栏布局
<style>
.content{
height:300px;
}
.left{
background:red;
height:inherit;
width:100px;
float:left;
}
.main{
background:green;
height:inherit;
margin-left:120px;
}
.footer{
height:50px;
background:gray;
margin-left:120px;
}
</style>
<div class="content">
<div class="left">aside</div>
<div class="main">main</div>
</div>
<div class="footer">footer</div>3、 三栏布局
<style>
.content{
height:300px;
}
.left{
background:red;
height:inherit;
width:100px;
float:left;
}
.right{
background:blue;
height:inherit;
width:100px;
float:right;
}
.main{
background:green;
height:inherit;
margin:0 120px
}
.footer{
height:50px;
background:gray;
margin:0 120px
}
</style>
<div class="content">
<div class="left">aside</div>
<div class="right">aside</div>
<div class="main">main</div>
</div>
<div class="footer">footer</div>