CSS常见问题总汇

2020-04-08

字数：2381 阅读时间：12min

阅读量：5710

一、如何清除浮动

在使用div布局的时候，经常会使用到float来使元素浮动到需要的位置。使用浮动之后div就会脱离普通文档流，这个时候你如果没有设置div的高度的话就会产生高度塌陷的问题，而且有可能会导致兄弟元素出现排版混乱等问题。为了解决这些问题我们通常需要清除浮动:

1.使用clear属性清除浮动

(1).利用伪类清除浮动（常用）

//为浮动的父级标签添加
.clearfloat::after{
content: " ";
display: block;
clear: both;
}

//为浮动的父级标签添加

.clearfloat::after{

content: " ";

display: block;

clear: both;

}

(2).利用空标签清除浮动（会产生大量无用空标签不推荐）

//在浮动标签的末尾添加<div class='clearfloat'></div>
.clearfloat{
clear:both;
}

//在浮动标签的末尾添加<div class='clearfloat'></div>

.clearfloat{

clear:both;

}

2.触发BFC

什么是BFC：
Block Formatting Context(块级格式化上下文），指页面中一个独立的渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。可以把它看作是一个独立的空间，这个空间内的元素怎样布局，与空间外的元素毫不相干
如何触发BFC：
float：的值不能为none(可以是 left，right，inherit)
overflow：的值不能为visible(可以是hidden，scroll，auto)
position：的值不为relative和static(可以是 fixed，absolute，inherit) display：table-cell, table-caption, inline-block中的任何一个

举个栗子：为浮动元素父级添加 overflow:hidden 就可清除浮动；只要能触发BF都可以清除浮动具体使用什么方式触发看项目需求咯

二、如何让元素水平垂直居中

1.行内元素居中

(1).让行内文字居中:text-align:center(水平居中)，line-height:height(垂直居中)

(2).让行内盒子居中：（这种方法垂直居中，需要有一个元素的高与父级元素高相同才行）

.featherbox{//水平居中
display: table-cell;
text-align:center;
}
.sonbox{//垂直居中
display: inline-block;
vertical-align: middle;
}

.featherbox{//水平居中

display: table-cell;

text-align:center;

}

.sonbox{//垂直居中

display: inline-block;

vertical-align: middle;

}

2.块级元素居中

(1).定位

//定位加偏移水平垂直居中(常用)
.featherbox{
position:relative;
}
.currentbox{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
//定位加margin:auto水平垂直居中;margin:0 auto(常用块级水平居中)
.featherbox{
position:relative;
}
.currentbox{//注意子元素盒子是一定要设置宽高的,要不然会撑满整个父级的盒子
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

//定位加偏移水平垂直居中(常用)

.featherbox{

position:relative;

}

.currentbox{

position:absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

}

//定位加margin:auto水平垂直居中;margin:0 auto(常用块级水平居中)

.featherbox{

position:relative;

}

.currentbox{//注意子元素盒子是一定要设置宽高的,要不然会撑满整个父级的盒子

position:absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}

3.flex居中

这里先看flex是如何实现水平垂直居中的

#featherbox{
width: 300px;
height: 300px;
background: lightblue;
display: flex;/*flex布局*/
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}

#featherbox{

width: 300px;

height: 300px;

background: lightblue;

display: flex;/*flex布局*/

justify-content: center;/*水平居中*/

align-items: center;/*垂直居中*/

}

补充一下flex布局知识
　　Flex是lexible Box 的缩写，就是"弹性布局" 。由于兼容行的问题(ie10+)，现阶段flex广泛用于移动端的布局
　　给块级flex布局:display:flex;给行内元素flex布局:display:inline-flex;flex有两个轴方向,一个是主轴,一个是交叉轴(我们可以自定义主轴方向);flex布局分为父级的"容器"和子级的"项目"组成;"容器"和"项目"上分别由六个属性可以设置:

容器属性
1. flex-direction (设置主轴方向)
  - row 默认值主轴方向是水平从左到右
  - row-reverse 主轴方向是水平从右到右左
  - column 主轴方向是垂直从上到下
  - column-reverse 主轴方向是垂直从下到上
2. flex-wrap (设置子项目是否换行显示)
  - nowrap 不换行
  - wrap 换行,第一行在上边
  - wrap-reverse 换行,第一行在下边
3. flex-flow (是 flex-direction 和 flex-wrap 的缩写)
4. justify-content (整个子项在主轴(水平)方向的对齐和分布方式)
  - flex-start 默认值主轴起点(左对齐)
  - flex-end 主轴末尾(右对齐)
  - center 主轴中间(居中)
  - space-between 两端对齐,项目之间的间隔都相等
  - space-around 每个项目两侧的间隔相等;所以,项目之间的间隔比项目与边框的间隔大一倍
  - space-evenly 每一项间隔都相等,包括项目与边框之间的距离
5. align-content (整个子项在交叉轴(垂直)方向上的对齐和布局方式,只有一条交叉轴时无效)
  - flex-start 与交叉轴的起点对齐 (上对齐)
  - flex-end 与交叉轴的终点对齐 (下对齐)
  - center 与交叉轴的中点对齐 (垂直对齐)
  - space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
  - space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  - stretch 默认值轴线占满整个交叉轴
6. align-items (每个子项在交叉轴(垂直)方向的对齐和分布方式)
  - flex-start 交叉轴的起点对齐(上对齐)
  - flex-end 交叉轴的终点对齐(下对齐)
  - center 交叉轴的中点对齐(垂直对齐)
  - baseline 项目的第一行文字的基线对齐
  - stretch 默认值如果项目未设置高度或设为auto，将占满整个容器的高度

项目属性
1. order (改变某个子项的排列位置;0默认位置, 数值越小,排列越靠前 )
2. flex-grow (某个子项目的放大的比例,放大占用的是所有子项目的剩余空间;默认值是0,如果属性都为1,它们将等分剩余空间 )
3. flex-shrink (某个子项目的收缩比例占用的也是剩余空间;默认值是1,设置0是不收缩,所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小)
4. flex-basis ( 分配剩余空间之前元素的默认大小,默认是auto,可以设置width;一般不用,设置了width就不够弹性布局了)
5. flex ( flex-grow, flex-shrink, flex-basis的缩写)
6. align-self (某个子项目的垂直对齐方式,可覆盖父级的align-item;默认是auto,继承父级的对齐方式)

在Flex布局中，子项设置float,clear以及vertical-align属性都是没有用的 . flex布局时沿着轴线进行布局的,可以说是'一维布局' ,如果你需要'二维布局'方案的话可以试试阮一峰Grid,以及Grid和Flex的区别

野生小园猿

励志做一只遨游在知识海洋里的小白鲨

查看“野生小园猿”的所有文章 →