前端面试题 · CSS笔记

注：本文内容源于 哔哩哔哩 up主: 说人话的前端

什么是BFC

BFC是Block Formatting Context（块级格式化上下文）的缩写
BFC是一个独立的空间，里面子元素的渲染不影响外面的布局

BFC作用

1. 解决边距塌陷
2. 清除浮动

如何触发BFC

• overflow:hidden
• display:inline-block/tabel-cell/flex
• position:absolute/flexd

什么是盒子模型

盒子模型就是元素在网页中实际占据的大小

盒子模型的计算方式

盒子模型=width/height+padding+boder
注意：没有margin

box-sizing

当box-sizing的值为border-box时，会改变盒子模型的计算方式
盒子模型=width/height=内容宽度+padding+boder

offsetWidth/offsetHeight

JavaScript中获取盒子模型的方式是obj.offsetWidth/offsetHeight

margin设置为负值会怎样？有何应用？

margin负值有什么效果？

margin-left 负值     元素自身向左移动
margin-top 负值     元素自身向上移动
margin-right 负值     右边的元素向左移动
margin-bottom 负值   下边的元素向上移动

margin负值的应用

增加宽度
如横向列表宽度不够时，可使用margin-right负值增加宽度

圣杯布局 左右固定宽度，中间自适应宽度

• 父级元素通过设置padding预留左右宽度
• 左边元素margin-left:-100%，则会跑到父级元素内容区域（不含padding）的最左
• 再设right为自身宽度，则会跑到页面最左
• 右边元素margin-right:-150px，右边元素的宽度150px，其他元素会认为该元素的宽度减少了150px

双飞翼布局 左右宽度固定，中间宽度自适应

• 双飞翼 中间盒子单独嵌套一层
• 中间盒子宽度100% 设置左右margin 预留空间
• 左右盒子margin-left：-自身宽度

如何清除浮动？手写clearfix

清除浮动的方法

父级加overflow:hidden
父级设置clearfix
父级也浮动

.clearfix:after{
	content:"";
	display:block;
	/*display:table*/;
	clear:both;
}

div垂直水平居中

子元素有固定宽高

方案一
子绝父相
left top 50%
margin-top margin-left 负的子元素宽高的一半
方案二
子绝父相
left top right bottom为0
margin为auto

子元素有固定宽度 高度可有可无

父元素display为tabel-cell，verticalalign为middle
子元素margin为auto

不需要固定宽高 较为常用

方案一
子绝父相
left top 50%
transform:translate(-50%,-50%) xy轴 相对自身宽度
方案二
父元素display为flex
justify-content为center
align-items为center

px、em、rem、vw、vh有什么区别?

基本概念

px：就是像素pixel的缩写
em：是相对单位，1em等于当前元素的 1font-size 的大小
rem：是CSS3新增的相对单位，1rem等于html的 1font-size 大小
vw和vh：是相对单位，1vw是视口宽度1%，1vh是视口高度的1%

什么是视口?

视口≠屏幕大小，视口去掉浏览器头尾

扩展知识点

vmax和vmin
vmax vh和w中较大的值
vmin vh和vw中较小的值
如果某个元素在手机横屏和竖屏时大小保持一致，可以考虑使用vmax或vmin

谈谈你对CSS选择器优先级的理解

常用的CSS选择器

id、class、标签、伪类、通配

选择器优先级的计算方式

1. important! > 行间样式 > id > class > 标签 > 通配*
2. 注意:继承的优先级永远没有直接给的优先级高
3. 组合计算ABCD 伪类=class

行间 id class 标签
 A   B    C    D   	
 0   1    1    0	#div1 .span1
 0   0    3    0   	.div1 .p1 .span1
 0   0    3    0	.div1 .span1:hover
 0   0    4    0	.div1 .p1 .span1:hover

CSS的哪些样式可以继承

CSS中可继承的样式

line-height 注意事项

line-height: 200px   直接继承
line-height: 1.5     加粗样式根据自己的字体大小计算
line-height: 200%   根据父级的字体大小计算