CSS基本布局整理

前言

css布局是前端开发必须掌握的基本内容，前端学习之css基本布局整理。

基本布局

左右布局

div结构：

float浮动

左右布局一般为********子元素********添加********浮动********float，在********父元素********添加clearfix；

//html



 


 

//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结构：

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;

}

宽度不固定的水平居中

1. ********子元素********添加display:inline-block，********父元素********添加center

.parent{

 text-align: center;

 }

.son{

 display: inline-block;

 vertical-align: top;

 }

因为son添加了inline-block后，会与父元素div下边框有间隙，所以添加vertical-align: top；

2. position相对定位。父元素相对页面绝对布局，子元素相对父元素布局

//相对定位要添加float浮动

.parent{

 position: absolute;

 left: 50%;

}

.son{

 position: relative;

 left: -50%;

}

3. 使用width:fit-content和margin配合

.son{

 width: fit-content;

 margin: 0 auto;

}

垂直居中

高度固定的垂直居中

高度和行高一样就居中了啊

.son{

 height: 999px;

 line-height: 999px;

}

高度不固定的垂直居中

1. position绝对定位。

parent{

 position: relative;

}

son{

 position: absolute;

 top: 50%;

 transform: translateY(-50%);

}

2. 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;

 }

3. flex布局

parent{

 display:flex;

 align-items:center;

}

其他小技巧

• 合理使用伪元素（如::after、::before）

• color: inherit颜色继承父元素

• :nth-child(n)选择器匹配属于其父元素的第n个子元素，不论元素的类型