左右布局
首先一个网页实现左右布局的方式有很多，个人主要通过浮动(float)来实现左右布局。
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。
首先我们写出三个盒子，其中father盒子中包含2个盒子left和right。代码如下。
然后我们就可以通过float属性来实现页面的左右布局。代码如下。
效果图如下：
最后因为我们加了浮动元素，所以要清除浮动(不清除浮动会影响后面的页面布局)这里我用clearfix类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.father {
width: 500px;
height: 500px;
background-color: #ccc;
}
.left {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: purple;
float: left;
margin-left: 100px;
}
.son {
background-color: red;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="son">
</div>
</body>
</html>
完整代码 方便看效果。
左中右布局
看完左右布局，那么发现也可以用float来实现左中右布局。先通过float实现块级元素的一排布局然后在通过margin 属性调整样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.father {
width: 500px;
height: 500px;
background-color: #ccc;
}
.left {
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
.middle {
width: 100px;
height: 200px;
background-color: red;
float: left;
margin-left: 100px;
}
.right {
width: 100px;
height: 200px;
background-color: purple;
float: left;
margin-left: 100px;
}
.son {
background-color: red;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="son">
</div>
</body>
</html>
CSS一些常见的居中基本功
水平居中 ：详见：https://jingyan.baidu.com/article/86112f1381081127379787bb.html
1.通过margin: 0 auto; text-align: center实现CSS水平居中（最为常见的居中方式）
2.通过position:absolute实现CSS水平居中。
3.通过display:inline-block和text-align:center实现CSS水平居中。
垂直居中 :详见：https://jingyan.baidu.com/article/3a2f7c2e26041a26aed61150.html
1.通过line-height实现CSS垂直居中。(设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况)
2.通过verticle-align:middle实现CSS垂直居中。(通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外 注 意，vertical生效的前提是元素的display：inline-block。)
