前言
css布局是前端开发必须掌握的基本内容，前端学习之css基本布局整理。
基本布局
左右布局
div结构：
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
float浮动
左右布局一般为********子元素********添加********浮动********float，在********父元素********添加clearfix；
//html
<div class="parent clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
//css
.son1 ,
.son2 {
float: left;
}
position定位
使用position定位，********父元素********添加relative相对定位，********子元素********添加absolute绝对定位；
//css
.parent{
position:relative;
}
.son1{
position:absolute;
left:0;
top:0;
}
.son2{
position:absolute;
left:200px;
top:0;
}
左中右布局
这个有很多种方式，最简单的float + absolute就可以实现；
div结构：
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
css布局：
.son1{
width: 200px;
height:100%;
float: left;
}
.son2{
position: absolute;
top:0;
bottom:0;
left:200px;
right: 300px;
}
.son3{
height:100%;
width: 300px;
float: right;
}
水平居中
宽度固定的水平居中
这个直接margin:0 auto;
.parent{
height: 200px;
width: 400px;
margin: 0 auto;
}
宽度不固定的水平居中
- ********子元素********添加
display:inline-block，********父元素********添加center
.parent{
text-align: center;
}
.son{
display: inline-block;
vertical-align: top;
}
因为son添加了inline-block后，会与父元素div下边框有间隙，所以添加vertical-align: top；
-
position相对定位。父元素相对页面绝对布局，子元素相对父元素布局
//相对定位要添加float浮动
.parent{
position: absolute;
left: 50%;
}
.son{
position: relative;
left: -50%;
}
- 使用
width:fit-content和margin配合
.son{
width: fit-content;
margin: 0 auto;
}
垂直居中
高度固定的垂直居中
高度和行高一样就居中了啊
.son{
height: 999px;
line-height: 999px;
}
高度不固定的垂直居中
-
position绝对定位。
parent{
position: relative;
}
son{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
margin
.parent{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
.son{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:50%;
height:50%;
margin:auto;
}
- flex布局
parent{
display:flex;
align-items:center;
}
其他小技巧
-
合理使用伪元素（如::after、::before）
-
color: inherit颜色继承父元素 -
:nth-child(n)选择器匹配属于其父元素的第n个子元素，不论元素的类型
网友评论