在写这篇文章之前笔者思考了很久，不知如何起手？后来想了想不就CSS布局这点事嘛，今天我们就来说说CSS一些常见的布局。
CSS用什么布局
- normal flow正常文档流
- float + 清除浮动
- position绝对定位
- flex布局
接下来我们就来演示几个列子：
左右布局
1. 使用float实现
HTML代码：
<div class="box clearfix">
<div class="LeftBox"></div>
<div class="RightBox"></div>
</div>
CSS代码：
.box{
width: 300px;
height: 200px;
border: 2px solid black;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
float: left;
}
.RightBox{
width: 200px;
height: 100%;
background: green;
float: left;
}
效果：
float左右布局
2. 使用position实现
HTML代码：
<div class="box">
<div class="LeftBox"></div>
<div class="RightBox"></div>
</div>
CSS代码：
.box{
width: 300px;
height: 200px;
border: 2px solid black;
position: relative;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
position: absolute;
top: 0px;
left: 10px;
}
.RightBox{
width: 180px;
height: 100%;
background: green;
position: absolute;
top: 0px;
left: 110px;
}
效果：
position左右布局
3. 使用flex实现
HTML代码：
<div class="box">
<div class="LeftBox"></div>
<div class="RightBox"></div>
</div>
CSS代码一：
.box{
width: 300px;
height: 200px;
border: 2px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
}
.RightBox{
width: 180px;
height: 100%;
background: green;
}
效果：
flex左右布局效果一
CSS代码二：
此种布局中左边盒子宽度固定，右边盒子宽度随大盒子的宽度变化而变化
.box{
max-width: 300px;
height: 200px;
border: 2px solid black;
display: flex;
align-items: center;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
flex-shrink: 0;
}
.RightBox{
width: 100%;
height: 100%;
background: green;
}
效果：
flex左右布局效果二
左中右布局
1. 使用float实现
HTML代码：
<div class="box clearfix">
<div class="LeftBox"></div>
<dia class="MiddleBox"></div>
<div class="RightBox"></div>
</div>
CSS代码：
.box{
width: 600px;
height: 200px;
border: 2px solid black;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
float: left;
}
.MiddleBox{
width: 200px;
height: 100%;
background: green;
float: left;
}
.RightBox{
width: 200px;
height: 100%;
background: yellow;
float: left;
}
效果：
float左中右布局
2. 使用position实现
HTML代码：
<div class="box">
<div class="LeftBox"></div>
<dia class="MiddleBox"></div>
<div class="RightBox"></div>
</div>
CSS代码：
.box{
width: 600px;
height: 200px;
border: 2px solid black;
position: relative;
}
.LeftBox{
width: 180px;
height: 100%;
background: red;
position: absolute;
top: 0px;
left: 10px;
}
.MiddleBox{
width: 200px;
height: 100%;
background: green;
position: absolute;
top: 0px;
left: 200px;
}
.RightBox{
width: 180px;
height: 100%;
background: yellow;
position: absolute;
top: 0px;
right: 0px;
}
效果：
position左中右布局
3. 使用flex实现
HTML代码：
<div class="box">
<div class="LeftBox"></div>
<div class="MiddleBox"></div>
<div class="RightBox"></div>
</div>
CSS代码一：
.box{
width: 600px;
height: 200px;
border: 2px solid black;
display: flex;
justify-content: space-around;
align-items: center;
}
.LeftBox{
width: 180px;
height: 100%;
background: red;
}
.MiddleBox{
width: 180px;
height: 100%;
background: green;
}
.RightBox{
width: 180px;
height: 100%;
background: yellow;
}
效果：
flex左中右布局效果一
CSS代码二：
此种布局中左右两边盒子宽度固定，中间盒子宽度随大盒子的宽度变化而变化
.box{
max-width: 600px;
height: 200px;
border: 2px solid black;
display: flex;
align-items: center;
}
.LeftBox{
width: 200px;
height: 100%;
background: red;
flex-shrink: 0;
}
.MiddleBox{
width: 100%;
height: 100%;
background: green;
flex-shrink: 1;
}
.RightBox{
width: 200px;
height: 100%;
background: green;
flex-shrink: 0;
}
效果：
flex左中右布局效果二
CSS居中技巧
说完布局，接下来我们来讲讲CSS中关于居中的问题，CSS中居中的方法有很多，而且难度不高，只要稍做钻研就能灵活运用！
1. text-align
在父容器里水平居中 inline 文字，或 inline 元素
2. margin
只要 margin: auto;在，块级元素将垂直居中，top, left, bottom, right 可以设置偏移。常见用法：margin: 0 auto;此时块级元素水平居中
3. padding
原理同上
4. line-height
与 height 联手，垂直居中文字
5. flex
使容器内部元素居中
.Flexbox {
display: flex;
align-items: center;
justify-content: center;
}
6. vertical-align
垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。
7. position + translate
translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。
8. 绝对定位居中
父容器元素：position: relative
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
9. 视口居中
内容元素：position: fixed，z-index: 999，父容器元素 position: relative
.Viewport-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}
网友评论