css面试基础知识,CSS知识点与面试题解析

前言

CSS 和 HTML 是网页开发中布局相关的组成部分，涉及的内容比较多和杂乱，本小节重点介绍下常考的知识点。

选择器的权重和优先级

CSS 选择器有很多，不同的选择器的权重和优先级不一样，对于一个元素，如果存在多个选择器，那么就需要根据权重来计算其优先级。

权重分为四级，分别是：

代表内联样式，如style=“xxx”，权值为 1000；

代表 ID 选择器，如#content，权值为 100；

代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10；

代表元素选择器和伪元素选择器，如div、p，权值为 1。

需要注意的是：通用选择器(*)、子选择器(>)和相邻同胞选择器(+)并不在这四个等级中，所以他们的权值都为 0。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。

盒模型

什么是“盒子”

初学 CSS 的朋友，一开始学 CSS 基础知识的时候一定学过padding border和margin，即内边距、边框和外边距。它们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一部小小的手机，收到的却是那么大一个盒子。因为手机白色的包装盒和手机机器之间有间隔层(内边距)，手机白色盒子有厚度，虽然很薄(边框)，盒子和快递箱子之间还有一层泡沫板(外边距)。这就是一个典型的盒子。

如上图，真正的内容就是这些文字，文字外围有 10px 的内边距，5px 的边框，10px 的外边距。看到盒子了吧？

题目：盒子模型的宽度如何计算

之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》，

文章言简意赅的介绍的浏览器的工作过程，web前端

如上图，得到网页效果之后，我们可以用截图工具来量一下文字内容的宽度。发现，文字内容的宽度刚好是 300px，也就是我们设置的宽度。

因此，在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：(内容宽度 + border宽度 + padding宽度 + margin宽度)之和。

浮动float

float 用于网页布局比较多，使用起来也比较简单，这里总结了一些比较重要、需要注意的知识点，供大家参考。

浮动的特点，可以用八个字总结：脱标、贴边、字围和收缩。

浮动的缺点：

破坏性

float 破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。

包裹性

普通的 div 如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模型那一节也讲到过。而如果给 div 增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容中的三个字包裹了——这就是包裹性。

如何清理浮动？

清除浮动不是不用浮动，清除浮动产生的父容器高度塌陷。

套路1：给浮动元素的父元素添加高度(扩展性不好)

如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开(比如img图片)，实际当中此方法用的比较多。

套路2：clear:both;

在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。

#wrap{

border: 1px solid;

}

#inner{

float: left;

width: 200px;

height: 200px;

background: pink;

}

套路3：clearfix

清除浮动的影响，一般使用的样式如下，统称clearfix代码。所有 float 元素的父容器，一般情况下都应该加clearfix这个 class。

.clearfix:after {

content: '';

display: table;

clear: both;

}

.clearfix {

*zoom: 1; /* 兼容 IE 低版本 */

}

给浮动元素的父容器添加一个clearfix的class，然后给这个class添加一个:after伪元素，实现元素末尾添加一个看不见的块元素来清理浮动。这是通用的清理浮动方案，推荐使用

套路4：给父元素使用overflow:hidden;

这种方案让父容器形成了BFC(块级格式上下文)，而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：

float 为 left | right

overflow 为 hidden | auto | scorll

display 为 table-cell | table-caption | inline-block

position 为 absolute | fixed

这里可以给父元素设置overflow:auto，但是为了兼容IE最好使用overflow:hidden。

但这种办法有个缺陷：如果有内容出了盒子，用这种方法就会把多的部分裁切掉，所以这时候不能使用。

BFC的主要特征:

BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。

BFC不会重叠浮动元素

BFC可以包含浮动,这可以清除浮动。

参考文章