一、左右布局
1.float属性实现左右布局
float属性是css中关于布局的一个关键属性，其意为将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置。float区域块不会被父级区域块包裹，造成前端常见的高度塌陷问题，解决办法是清除浮动。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>two</title>
<style>
* {
margin: 0;
padding: 0;
}
.right {
float: right;
height: 500px;
width: 200px;
background-color: yellow;
}
.left {
height: 500px;
background-color: red;
margin-right: 230px;
}
</style>
</head>
<body class="clearfix">
<div class="right">我是固定宽高</div>
<div class="left">我是自适应</div>
</body>
</html>
左右布局.png
红色区域会随着浏览器的宽度而自适应，黄色则会保持固定宽高。
而为了清除浮动，需要在加了float属性的元素的父级元素上加清除浮动，比如：
.clearfix::after{
content: '';
display: block;
clear: both;
}
二、左中右布局
1.float属性实现左中右布局
float属性同样也可以实现左中右布局。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
background: blue;
height: 500px;
width: 200px;
}
.right {
float: right;
background-color:yellow;
height: 500px;
width: 200px;
}
.center {
height: 500px;
background-color: red;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="left">我是固定宽高</div>
<div class="right">我是固定宽高2</div>
<div class="center">我是自适应</div>
</body>
</html>
左中右布局
三、水平居中
1.给固定宽度的元素设置水平居中
如果是一个固定宽度的元素，只要设置好宽度，margin的左右值为auto就行了。
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}
2.利用inline-block实现水平居中方法
仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中</title>
</head>
<body>
<div class="center">
我居中了
</div>
</body>
</html>
css代码：
.center{
display: inline-block;
border:1px solid red;
}
body{
text-align:center;
background: yellow;
}
居中.png
3.利用绝对定位实现水平居中
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中</title>
</head>
<body>
<div class="center">
<div class="inner">我居中了没有</div>
</div>
</body>
</html>
CSS代码:
body{
position: relative;
background: yellow;
}
.center{
position: absolute;
left:50%;
}
.inner{
border:1px solid blue;
position: relative;
float: left;
right: 50%;
}
利用绝对定位实现居中
四、垂直居中
1.利用line-height将内容垂直居中
这种方法前提在于字体大小不能大于line-height
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>居中</div>
</body>
</html>
CSS代码：
div{
border: 1px solid red;
font-size: 16px;
line-height: 40px;
}
也可以通过padding撑开上下：
div{
border: 1px solid red;
font-size: 16px;
line-height: 30px;
padding: 5px 0px;
}
垂直居中.png
未完待续。。。
