0. 常用CSS
// flex快速布局
display: flex;
// 方向为横向
flex-direction: row;
// 方向为竖向
flex-direction: column;
// 使内部组件均匀分布
justify-content: space-between;
// 设置组件层级,以面向我方向为正方向
z-index: 2;
// 设置图片模糊
filter: blur(2px);
// 设置圆角,50%为圆形
border-radius: 8PX;
// 字体加粗
font-weight: bold;
// 设置一行的高度(一般跟随height)
line-height: 40PX;
// 向上平移,正值为向下平移
transform: translateY(-50%);
注意
- 内联元素不能设置宽高(display: line)
- 设置浮动和绝对定位后会使该元素脱离文档流
1. 居中布局
1.1 水平居中
提供三种解决方案,推荐使用 margin + block
<div class="parent">
<div class="child">Hello Pibigstar</div>
</div>
1.1.1 line-block + text-align
<style>
.parent { display: line-block; }
.child { text-align: center; }
</style>
1.1.2 block + margin
<style>
.parent { position: relative; }
/* 使用 table 和 block 都可以 */
.child { display: table; margin: 0 auto; }
</style>
margin: 外边距
- 一个值: 上右下左
- 二个值: 第一个表示上下, 第二个表示左右
- 三个值: 第一个表示上,第二个表示左右,第三个表示下
- 四个值: 第一个表示上,第二个表示右,第三个下,第四个左
1.1.3 absolute + transform
<style>
.child { position: absolute; left: 50%; transform: translateX(-50%); }
</style>
1.2 垂直居中
提供两种解决方案
<div class="parent">
<div class="child">Hello Pibigstar</div>
</div>
<style>
.parent {
width: 200px;
height: 100%;
background: #ccc;
}
.child{
width: 200px;
height: 100px;
background: #c9394a;
display: block;
}
</style>
1.2.1 table-cell + vertical-align
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
1.2.2 absolute + transform
<style>
.parent { position: relative; }
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
1.3 居中布局
1.3.1 table + margin
<style>
.parent { display: table-cell; vertical-align: middle; }
.child { display: table; margin: 0 auto; }
</style>
1.3.2 absolute + transform
<style>
.parent { position: relative; }
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
2. 多列布局
2.1 两列布局
左边定宽,右边自适应,推荐 flex + flex-direction 和 float + overflow
<div class="parent">
<div class="left">左: 定宽</div>
<div class="right">右: 自适应</div>
</div>
<style>
.left{
width: 100px;
height: 300px;
background: #c9394a;
}
.right {
height: 300px;
background: #ccc;
}
</style>
2.1.1 flex + flex-direction
<style>
.parent {
display: flex;
flex-direction: row;
}
.left{
width: 100px;
background: #c9394a;
}
.right {
width: 100%;
background: #ccc;
}
</style>
2.1.2 float + overflow
<style>
.left{
float: left;
}
.right {
overflow: hidden;
}
</style>
2.1.3 float + margin
<style>
.left{
float: left;
}
.right {
margin-left 100px;
}
</style>
2.1.4 fixed + table
<style>
.parent {
width: 100%;
display: table;
table-layout: fixed;
}
.left{
width: 100px;
display: table-cell;
}
.right {
display: table-cell;
}
</style>
2.2 圣杯布局
<div class="parent">
<div class="top"></div>
<div class="center">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
<style>
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.top {
height: 100px;
background-color: red;
}
.center {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 450px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 10px;
}
.left {
background-color: green;
width: 300px;
height: 450px;
}
.middle {
background-color: green;
width: 800px;
height: 450px;
}
.right {
background-color: green;
width: 300px;
height: 450px;
}
.bottom {
height: 100px;
background: #ccc;
}
</style>
2.3 等分布局
<div class="parent">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
2.3.1 float + width百分比
.col1,.col2,.col3,.col4 {
float: left;
width: 25%;
height: 100px;
}
2.3.2 table + table-cell
.parent {
width: 100%;
display: table;
}
.col1,.col2,.col3,.col4 {
display: table-cell;
height: 100px;
}