前端面试题（二）--CSS

CSS

知识点：

1、CSS单位总结

在CSS中，单位分为两大类，绝对长度单位和相对长度单位。

绝对长度单位px，和现实中的相似，如果是5cm,不管在哪里5cm的长度都是一样的

相对长度单位em/rem，相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，我们可以使文本或其他元素的大小与页面上的其他内容相对应；

相对长度单位：em:在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如width；ex:字符x的高度；ch数字0的宽度；rem:根元素的字体大小；lh：元素的line-hight;vw:视窗宽度的1%；vh：视窗高度的1%；vmin视窗较小尺寸的1%；vmax视图大尺寸的1%

常用的相对长度单位有：vw和vh指的是相对于视口的宽度和高度；em和rem：他们比px灵活，更适用于响应式布局。em相对于父元素，rem相对于根元素（即html元素）：所以当用rem做响应式时，直接在媒体中改变html的font-size，此时用rem作为单位的元素的大小都会响应改变，很方便。

2、居中方式总结

居中分为两种，一个是水平居中，另一个是垂直居中

水平方向居中，有两种方式：

1）设置盒子margin:0,auto;这种居中方式的原理在于设置margin-left为auto时，margin-left就会被设置为能有多大就设置多大，所以盒子会跑到最右边，而设置margin-right为auto时，同理盒子会跑到最左边。所以，当我们设置左右的margin都是auto的时候，盒子就跑到了中间，从而行成了水平居中。

2）第二种常见的方式就是通过display：flex设置盒子的外层盒子是一个弹性盒子，然后通过justify-content:center使得内部的盒子居中。

垂直居中：

1）verticle-align:middle+兄弟元素  实现垂直居中

通过verticle-align:middle实现垂直居中是最常使用的方法，但是有一点要格外注意，vertical生效的前提是元素的display：inline-block。并且在使用vertical-align:middle的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。vertical-align对齐的方法是寻找兄弟元素中最高的元素作为参考。

2）使用vertical-align:middle+伪元素::before实现垂直居中

平白无故添加一个无意义的参考元素不怎么好，我们可以去除作为参考元素的兄弟元素，转为给父元素添加一个伪元素作为参考系。

3）绝对定位：

父元素
position:relative

子元素：

position:absolute；
left:50%；
top:50%;
margin-left:-自身宽度的一半；
margin-top:-自身高度的一半；

4）通过绝对定位+transform实现垂直居中

父元素
position:relative

子元素：

position:absolute；
left:50%；
top:50%;
transfrom:translate(-50%,-50%)

5)推荐：使用弹性盒子居中（弹性盒子一般都是设置在父元素上的）：

通过设置父元素为弹性盒子，然后使用justify-content:center和align-items：center来设置内部盒子水平垂直居中

3、隐藏元素方式总结

完全隐藏：元素从渲染树中消失，不占据空间;

1)display属性：display:none，元素隐藏

2）hidden属性：这是HTML5新增属性，相当于display:none,直接写在元素上面：

<div hidden></div>

视觉上的隐藏：屏幕中不可见，占据空间；

1)opacity:0将透明度设置为0

2）visibility:hidden

3)绝对定位，设置position为absolute或fixed，通过设置top、left等值，将其移出可视区域，例如：position:absolute;left:-999px;top:-999px;

4)设置margin,通过设置margin值，将其移出可视区域，例如：margin-left:-99999px

5)设置宽高为0，比较常见，简单说就是将元素的margin\border\padding\height\width等影响元素盒模型的属性设置为0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素；例如：width:0px;height:0px;overflow:hidden

6)裁剪元素：隐藏元素的另一种方法是通过裁剪它们实现，具体是通过clip-path属性，这个属性比较新，浏览器兼容性也会比较差，但是了解一下还是很有必要的，例如：clip-path:polygon(0px 0px,0px 0px ,0px 0px,0px 0px)

语义上的隐藏：读屏软件不可读，但正常占据空间

1)aria-hidden属性：通过设置aria-hidden属性为true使读屏软件不可读，但是元素仍然占据空间并且可见

<div aria-hidden="true"></div>

4、浮动

浮动属性产生之处是为了实现“文字环绕”的效果，让文字环绕图片，从而使网页实现类似word中“图文混排”的效果；

浮动的特性：1）脱离标准流 2）浮动的元素互相贴靠，如果宽度不够，会重启一行 3）宽度收缩：在没有设置宽度的情况下，块级元素在标准流时很多时独占一行，宽度也会占满整个容器，但是一旦被设置为浮动后，宽度就会收缩；本来div是占满整行的，但是当我们设置了浮动后，由于div又没有设置宽度，所以宽度就收缩了

清除浮动带来的副作用：

1）给父元素设置高度：给父元素设置高度时，这个高度值一定要大于浮动子元素的高度，这样才能关住浮动；因此，如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。

2）clear属性：在实际开发中，由于盒子的高度能够被内容撑开，所以很多时候我们不会设置高度；在CSS中有一个叫做clear的属性，该属性定义了元素的哪边上不允许出现浮动元素；

clear:both两边都不允许出现浮动元素；

clear:none默认值，允许浮动元素出现在两侧

clear:inherit规定应该从父元素集成clear属性的值

但是这个方法会导致margin属性失效

3）设置一堵墙（空的“div”）,在它的样式上写上clear:both进行清楚浮动

4）内墙法：将空的div写在其中一个浮动元素中

5）overflow属性：overflow属性本来是用作处理溢出内容的显示方式的；当给父元素添加overflow:hidden之后，父元素就会形成一个BFC，一块独立的显示区域，不受外界影响，所以通过这种方式也能够去除浮动的副作用。

6）伪类清除法（推荐）

该方法的核心思想就是为父元素设置一个伪元素，其实就是无形的添加了一堵墙，然后在伪元素中设置一系列的属性

div::after{
    content:"";
    clear:both;
    display:block;
}

5、定位总结

布局是针对整个页面来说的，不管采用的是什么布局，比如两栏布局，三栏布局，目标是整个页面；而定位是针对某一个元素来讲的，把这个元素定位到什么位置

目前在CSS中，有5中定位方案，分别是：

1）static静态定位：就是我们的标准流；在标准流里面，块级元素独占一行，内嵌元素共享一行。静态定位是HTML元素的默认值，静态定位的元素不会受到top、bottom、left、right的影响

2）relative相对定位：相对自己原来的位置进行定位。相对定位的最大特点就是不脱离标准流，相对于自己原来的位置上进行一定的偏移；使用相对定位的作用主要有两个：1）微调元素 ；2）做绝对定位的参考，子绝父相。

3）absolute绝对定位：绝对定位就是相对于离自己最近的，并且定了位的元素进行偏移，使用了绝对定位后的盒子，会脱离标准流，设置的margin也会失效。

绝对定位的特性：1）脱离标准流；2）设置绝对定位之后，元素的display属性变为了block属性，可以设置宽高；3）绝对定位的参考点：默认情况下，绝对定位的参考点，如果用top来进行描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角；如果使用bottom来进行描述，那么就是浏览器首屏窗口尺寸对应的页面左下角，都不是以浏览器来进行定位，top是以页面的左上角进行定位，bottom是以浏览器首屏窗口尺寸对应的页面左下角来定位。4）子绝父相时，子元素会以父元素的border内侧作为自己定位的参考点；如果父级元素出现有定位时，绝对定位的参考点永远都是离自己最近的，并且定了位的祖先元素的左上角。

4）fixed固定定位：固定定位是一种特殊的绝对定位，因此也会脱离标准流，固定定位的特点是相对于浏览器窗口进行定位的；换句话说，对一个盒子进行固定定位之后，无论页面如何滚动，这个盒子的显示位置都是不会变化的。固定定位在PC端中经常用于显示在页面中位置固定不变的页面header，以及移动端中位置固定不变的header和footer.

5）sticky粘性定位:在CSS3中，新增了一种定位方式：position：sticky，即粘性定位;

注意：1）父元素的overflow必须是visible，不能是hidden或者auto，因为父节点定位设置为overflow:hidden则父容器无法滚动；2）父元素的高度不能低于sticky元素的高度；3）如果父元素没有设置定位（positiion:relative/absolute/fixed），则相对于viewport进行定位，否则以定位的足下元素未参考点；4）设置阈值：需要指定top\right\bottom或left四个阈值其中一个，才可使粘性定位生效。否则其行为与相对定位相同。并且top和bottom同时设置，top生效的优先级高；left和right同时设置时，left的优先级高。

6、BFC

BFC，英语全程Block formatting contexts，翻译成中文就是“块级格式化上下文”。

简单来说就是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。在简短一点，那就是：BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。

BFC的布局规则：

1）内部的Box会垂直方向一个接着一个地放置

2）Box垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的Box的margin会发生重叠

3）每个盒子的左外边框紧挨着包含块的左边框，及时浮动元素也是如此

4）BFC的区域不会与浮动Box重叠

5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

6）计算BFC的高度时，浮动子元素也参与计算

实际上在一个标准流中body元素就是一个天然的BFC.

常见触发BFC的方式：

1）根元素body

2）float:left/right

3）position:absolute/fixed

4）overflow:auto/scroll/hidden

5）display:inline-block/table-cell

BFC的作用：

1）解决浮动元素令父元素高度坍塌的问题

2）非浮动元素被浮动元素覆盖

3）外边距垂直方向重合的问题（解决margin折叠/margin塌线的问题）

其余格式化上下文：

1）IFC(inline formatting context) : 翻译成中文就是“行内格式化上下文”，也就是一块区域以行内元素的形式来格式化

2）GFC(GrideLayout formatting contexts)：翻译成中文就是“网格布局格式化上下文”，将一块区域以grid网格的形式来格式化

3）FFC(Flex formatting contexts) :翻译成中文就是“弹性格式化上下文”，将一块区域以弹性盒的形式来格式化

7、CSS属性值的计算过程

属性的计算方法有下面4种，也就是属性值的计算顺序：

1）确定声明值：当作者样式和浏览器默认样式中的声明值有冲突时，会优先把作者样式中的声明值当作CSS的属性值

2）层叠冲突：当发生层叠冲突时，就要根据选择器的权重值来计算究竟运用哪一条作者样式

3）使用继承

4）使用默认值

8、CSS层叠继承规则总结

层叠规则：

CSS是Cascading Style Sheets的缩写，这暗示层叠（cascade）的概念是很重要的；

什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的，前面的一种会否决后一种）：

1）重要性（Importance）：即！important，虽然它很有用，但是建议尽量不要使用它。不得不用的情况是：当您在修改某个组件样式时，你不能编辑该组件核心的CSS模块，又或者你确实想要重写一种不能以其他方式覆盖的样式；但是，你能够避免的话，不要使用它。

2）专用性(Specificity):专用性基本上是衡量选择器的具体程度的一种方法，主要是指它能匹配多少元素；内联样式为千位，ID选择器为百位，类选择器、属性选择器、伪类选择器为十位，元素选择器和伪元素选择器为个位

3）源代码次序(Source order)：先来后到

继承规则：

继承就是应用于某个元素的一些属性值将由该元素的子元素继承，有些则不会；

CSS为处理继承提供了四种特殊的通用属性值：

1）inherit:该值将应用到选定元素的属性值设置为其父元素一样；

2）initial:该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为inherit；

3）unset：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现的像inherit，否则就是表现得像initial

4）如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值，换句话说，属性值被设置成自定义样式所定义的属性（如果被设置），否则属性值被设置成用户代理的默认样式。

注：initial和unset不被IE支持。

继承的就近原则：由于属性值是由继承而来，所以属性值就会继承离自己近的那个元素的属性。

面试真题：

1、px和em的区别

px即像素，是相对于屏幕分辨率而言的，是一个绝对单位，但是具有一定的相对性。因为在同一设备上每个设备像素所代表的物理长度是固定不变的（绝对性），但在不同设备间每个设备像素所代表的物理长度是可以变化的（相对性）。

em是相对长度单位，如果作为font-size的单位具体的大小要相对于父元素来计算，例如父元素的字体大小为40px,那么子元素1em就代表字体大小和父元素一样为40px,0.5em就代表字体大小为父元素的一半即20px；如果作为width或height的单位具体的大小要相对于自身的字体大小来计算，例如自身字体大小为20px,那么width为0.2em就是10px.

2、怎么让一个div水平垂直居中？

水平居中：

1）使用margin:0 auto

2）使用弹性盒子display:flex;justify-content:center

垂直居中：

1）通过vertical-align:middle实现垂直居中,前提是元素diaplay:inline-block;和有一个兄弟元素作为参考坐标；

2）通过父元素设置伪元素:before为参考坐标系,然后设置子元素vertical-align:middle实现垂直居中

3）通过绝对定位实现垂直居中

4）通过绝对定位加transform实现垂直居中

5）使用弹性盒子居中

3、隐藏页面中的某个元素的方法有哪些？

隐藏元素可以分为3大类：

1）完全隐藏：元素从渲染树中消失，不占据空间；常用的方式有：设置display:none、为元素设置hidden属性

2）视觉上的隐藏：屏幕不可见，占据空间；常用的方式有：设置opacity属性为0、绝对定位的left和top值设置为-999px、设置margin-left值为-999px、设置宽高为0、裁剪元素。

3）语义上的隐藏方式为将aria-hidden属性设置为true使读屏软件不可读。

4、以下选项不能够清楚浮动的是(2)

1）空div

2)hover伪选择器

3）clear属性

4）overflow属性

5、清除浮动的方法：

1）clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写csss样式{clear:both;height:0;overflow:hidden;}

2)给浮动元素父级设置高度

3）父级同时浮动

4）父级设置成inline-block，其margin:0 auto居中方式失效

5）给父级添加overflow:hidden清除浮动方法

6）万能清除法after伪类清浮动（现在主流方法，推荐使用）

6、position有哪些值，各自的用法如何？

目前在CSS中，有5种定位方案，分别是：

1）static:该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置

2）relative:相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移

3）absolute:相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流，在布置文档流中有其他元素时，绝对定位元素不占据空间，绝对定位元素相对于最近的非static祖先元素定位

4）fixed：固定定位与绝对定位相似，但元素的包含块为viewport视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素

5）sticky：粘性定位可以被认为是相对定位和固定定位的混合，元素在跨越特定阈值前为相对定位，之后为固定定位。

7、浏览器窗口高600px，页面已经卷动了200px。现在有一个div标签，有属性如下，请在图中画出盒子的位置，并标出必要的尺寸。

width:100px;
height:100px;
border:1px solid black;
position:absolute;
bottom:200px;
left:200px;

 

 8、介绍下BFC及其应用

BFC指的是一个独立的布局环境，BFC内部的元素布局与外部互不影响；

触发BFC的方式有很多，常见的有：

1）设置浮动；

2）overflow设置为auto、scroll、hidden

3）position设置为absolute、fixed

常见的BFC应用有：

1）解决浮动元素令父元素高度坍塌的问题

2）解决非浮动元素被浮动元素覆盖问题

3）解决外边距垂直方向重合问题（即margin塌线问题）

 9、介绍下BFC、IFC、GFC和FFC

BFC:块级格式上下文，指的是一个独立的布局环境，BFC内部的元素布局与外部互补影响

IFC：行内格式化上下文，将一块区域以行内元素的形式来格式化

GFC：网格布局格式化上下文，将一块区域以grid网格的形式来格式化

FFC：弹性格式化上下文，将一块区域以弹性盒的形式来格式化

10、请简述CSS中属性的计算过程是怎样的？

1）确定声明值：参考样式表中没有冲突的声明，作为CSS属性值

2）层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值

3）使用继承：对仍然没有值的属性，若可以继承则继承父元素的值

4）使用默认值：对仍然没有值的属性，全部使用默认值

11、请简述一下CSS中的层叠规则

CSS中当属性值发生冲突时，通过层叠规则来计算出最终的属性值，层叠规则可以分为3块：

1）重要性：！important设置该条属性值最重要，但是一般不推荐使用。

2）专用性：专用性主要是指它能匹配多少元素，匹配得越少专用性越高

3）源代码次序：在重要性和专用性都一致的情况下，属性值取决于源代码的先后顺序