1.浮动布局

要点子元素float，父元素clearfix
1.1左右布局
子元素float：left float；right；
父元素.clearfix::after{
content:'';
display:biock;
clear:both;
}

定位来进行布局

.container {
width: 1000px;
height: 700px;
margin: 0 auto;
position: relative;
}
.leftbox {
width: 300px; /左侧固定宽度值/
height: 100%;
position: absolute;
}
.rightbox {
height: 100%;
margin-left: 300px; /边距值=左侧固定宽度值/
position: relative;
}
使右侧的margin-left等于左侧宽度

2左中右布局

<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background-color: green;
}
</style>

水平居中布局

不定宽居中、
1父元素text-align：center；子元素display：inline-block；
2.父元素display: flex;
justify-content: center;
align-items: center;
3.父元素：relative
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
定宽块元素：
方法1：margin:0 auto;
方法2：position：absolute left：50% margin-left：width/2
注意页面改变后：

20160708231323660.jpg

造成这的原因是auto不为负

内联元素（inline）内联块（inline-table），inline-flex元素水平居中都有效：text-align:center;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
多块级元素水平居中
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}