前端面试：CSS常问

目录

一、容器无宽高，如何实现水平垂直居中

二、CSS 中的单位

三、CSS 权重和优先级

四、flex 实现两边固定，中间自适应

五、谷歌浏览器，8px字体显示

六、CSS 实现 0.5px 边框

七、CSS 绘制三角形

八、BFC 的理解及作用

---

一、容器无宽高，如何实现水平垂直居中

<div class="wrap">
	<div class="box">
		水平垂直居中
	</div>
</div>

方式一：flex/grid 布局

.box{
	display: flex;  /* display: grid; */
	align-items: center;
	justify-content: center;
}

方式二：flex/grid + margin

.wrap{
	display: flex; /* display: grid; */
}
.box{
	margin: 0 auto;
}

方式三：父容器 table-cell

.wrap{
	background: yellow;
	width: 500px;
	height: 500px;
	display: table-cell;
	vertical-align: middle ;
	text-align: center;
}

方式四：定位 + translate

.wrap{
	background: yellow;
	width: 500px;
	height: 500px;
	position: relative;
}
.box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

二、CSS 中的单位

• px：像素，网页常用，基本单位
• rpx：微信小程序适配常用
• %：相对于父级元素的百分比单位
• em：默认字体大小的倍数，根据父级元素字体大小确定
• rem：相对于根元素的字体大小，移动端适配常用
• vw：浏览器视口宽度1%，如浏览器宽度1200，1vw=12px
• vh：浏览器视口高度1%，用法同vw

三、CSS 权重和优先级

!important > style > #id > .class > 元素选择器(div,::after) > @import

四、flex 实现两边固定，中间自适应

<div class="box">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>

.box{
	display: flex;
}
.left,.right{
	width: 200px;
}
.center{
	flex: 1;
}

五、谷歌浏览器，8px字体显示

/* 只缩小文字，不缩小容器 */
-webkit-transform:scale(0.8); 

/* CSS 属性 */
-webkit-text-size-adjust:none;
font-size: 8px

/* 浏览器设置 */

六、CSS 实现 0.5px 边框

定位 + 伪元素 + transfrom缩放（scale）
容器伪元素宽高是 200% ，边框为 1px ，然后缩小元素为50%，视觉上实现 0.5px 

.border{
	width: 100px;
	height: 100px;
	position: relative;
}
.border::after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 200%;
	height: 200%;
	border: 1px solid #000;
	transform-origin: 0 0;
	transform: scale(0.5);
}

七、CSS 绘制三角形

• 向下三角形，上边框有颜色，其他无颜色
• 向上三角形，下边框有颜色，其他无颜色
• 向左三角形，右边框有颜色，其他无颜色
• 向右三角形，左边框有颜色，其他无颜色

/* 宽高为0 */
width: 0;
height: 0;
/* 向下三角形 上边框设置颜色 */
border-top: 20px solid red;
border-bottom: 10px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

八、BFC 的理解及作用

创建一个BFC几种方式：

• 浮动元素（元素的float不是 none，为left或者right）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• display 的值不为 inline-block 、flex、inline-flex
• overflow 的值不为 visible

BFC特点：

• 内部容器垂直排列
• 属于同一个 BFC 的两个相邻容器的 margin 会发生重叠
• BFC的区域不会与浮动的元素区域重叠
• BFC 在页面上是一个独立的容器，外面的元素和子元素互不影响
• 计算BFC的高度时，浮动元素也参与计算

BFC作用：

• 取消盒子的 margin 塌陷
• 清除内部浮动，不会影响外面元素，可以阻止元素被浮动元素覆盖

BFC