CSS3面试题

1.'+' 与 '~' 选择器有什么不同

~是匹配元素之后的选择器

+是匹配相邻元素选择器

2.说明text-align居中的条件

设置⾏内(inline-level)元素(没有填满⽗元素)在快级⽗元素的对⻬⽅式

3.line-height为什么可以让⽂字垂直居中？

line-height :两⾏⽂字基线( baseline )之间的间距。基线( baseline):与⼩写字⺟x最底部对⻬的线

⾏⾼ - ⽂本⾼度 = ⾏距

假设div中只有⼀⾏⽂字，如何让这⾏⽂字在div内部垂直居中 让line-height 等同于height

4.说说盒⼦模型包含哪些内容？

外边距、内边距、边框、内容

5.说说你对margin的传递和折叠的理解

margin的传递⼀般是⽗⼦块元素之间,有margin-top传递,margin-bottom传递.

它有两个兄弟块级元素之间的上下margin的折叠,也有⽗⼦块元素之间的margin折叠

6.CSS 隐藏⻚⾯中某个元素的⼏种⽅法

display: none

visibility: hidden

opacity: 0

content-visibility

绝对定位于当前⻚⾯的不可⻅位置

7.box-sizing有什么作用？content-box和border-box的区别

box-sizing⽤来设置盒⼦模型中宽⾼的计算⽅式

8.为什么会发⽣样式抖动

因为没有指定元素具体⾼度和宽度,⽐如数据还没有加载进来时元素⾼度是 100px(假设这⾥是 100px) 数据加载进来后,因为有了数据,然后元素被撑⼤,所有出现了抖动

9.说说浮动常⻅的规则？

• 元素⼀旦浮动后, 脱离标准流

  • 朝着向左或向右⽅向移动，直到⾃⼰的边界紧贴着包含块（⼀般是⽗元素）或者其他浮动元素的边界为⽌

  • 定位元素会层叠在浮动元素上⾯

• 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

• 浮动元素之间不能层叠

• 浮动元素不能与⾏内级内容层叠，⾏内级内容将会被浮动元素推出

10.为什么需要清除浮动？清除浮动有⼏种⽅法？

为什么需要清除浮动： 由于浮动元素脱离了标准流，变成了浮动元素，不再向⽗元素汇报⾼度。所以⽗元素在计算⾼度时并没有将浮动元素的⾼度计算进来，因此就造成了⾼度塌陷的问题 。解决⾼度塌陷的问题就叫做清除浮动（3分） 清除浮动的⽬的：是为了让⽗元素在计算⾼度的时候把浮动⼦元素的⾼度计算进去 清除浮动有⼏种⽅法：

• 给⽗元素设置固定⾼度，扩展性不好，不推荐
• 在⽗元素的最后增加⼀个空的块级⼦元素，并设置让他clear:both , 但是增加了⽆意义的空标签，违反了结构与样式分离的原则
• 给⽗元素添加⼀个伪元素(推荐)
• overflow:auto触发BFC来清除浮动（前提⾼度为auto）

11.伪类与伪元素有什么区别?

• 伪类使⽤单冒号，⽽伪元素使⽤双冒号。如 :hover 是伪类， ::before 是伪元素
• 伪元素会在⽂档流⽣成⼀个新的元素，并且可以使⽤ content 属性设置内容

12.结构伪类nth-child(n)和nth-of-type(n)的区别？

:nth-child是结构伪类选择器，选中⽗元素的第⼏个⼦元素 , 计数时与元素的类型⽆关。 :nth-of-type是结构伪类选择器和nth-child类似，但是计数时只计算同种类型的元素。

13.元素或⽂本⽔平居中实现⽅案有哪⼏种？

行内元素：text-align:center

块级元素：

margin: 0 auto

使用定位+translate

使用flex布局居中

14.元素或⽂本垂直居中实现⽅案有哪⼏种？

元素内文本的垂直居中: line-height

定位+translate

flex布局

15.rem、em、vw、vh 单位是什么意思?

• rem : 单位是根据根元素(即 html )的 font-size ⼤⼩来计算
• em : 单位是根据⾃身元素的 font-size ⼤⼩来计算
• vw : viewport width，即视⼝的宽
• vh : viewport height，即视⼝的⾼

16.什么是视⼝(viewport)？

offsetWidth、clientWidth、scrollWidth的区别

offsetWidth = border + padding + content_width

clientWidth = padding + content_width

scrollWidth = padding + 实际内容大小