50道CSS根基面试题，附答案-百分百源码网

50道CSS根基面试题，附答案

发布时间：09/01 来源：未知浏览：关键词：

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不一样的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

专题引荐：2020年CSS面试题汇总（最新）

2 box-sizing属性？

用来操纵元素的盒子模型的解析模式，默许为content-box
context-box：W3C的标准盒子模型，设定元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设定元素的height/width属性指的是border + padding + content部分的高/宽

3 CSS选中器是什么？哪些属性可以继承？

CSS选中符：id选中器(#myid)、类选中器(.myclassname)、标签选中器(p, h1, p)、相邻选中器(h1 + p)、子选中器（ul > li）、后代选中器（li a）、通配符选中器（*）、属性选中器（a[rel="external"]）、伪类选中器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不成继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

4 CSS优先级算法怎样运算？

元素选中符： 1
class选中符： 10
id选中符：100
元素标签：1000

!important声明的样式优先级最高，假如冲突再停止运算。
假如优先级雷同，则选中最后显现的样式。
继承得到的样式的优先级最低。

5 CSS3新增伪类有那些?

p:first-of-type 选中属于其父元素的首个元素
p:last-of-type 选中属于其父元素的最后元素
p:only-of-type 选中属于其父元素独一的元素
p:only-child 选中属于其父元素的独一子元素
p:nth-child(2) 选中属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

6 怎样居中p？怎样居中一个浮动元素？怎样让绝对定位的p居中？

p：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

浮动元素的上下摆布居中：

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

绝对定位的摆布居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

还有愈加文雅的居中方式就是用flexbox，我今后会做整理。

7 display是什么值？说明他们的作用?

inline（默许）--内联
none--潜藏
block--块显示
table--表格显示
list-item--项目列表
inline-block

8 position的值？

static（默许）：依照正常文档流停止摆列；
relative（相对定位）：不离开文档流，参照本身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参照距其比来一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(牢固定位)：所牢固的参照对像是可视窗口。

9 CSS3是什么新特性？

RGBA和透亮度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不成分割单词换行）word-wrap：break-word
文字暗影：text-shadow： 5px 5px 5px #FF0000;（水平暗影，垂直暗影，含糊间隔，暗影色彩）
font-face属性：定义本人的字体
圆角（边框半径）：border-radius 属性用于创立圆角
边框图片：border-image: url(border.png) 30 30 round
盒暗影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当阅读器的尺寸转变时会采纳不一样的属性

10 请说明一下CSS3的flexbox（弹性盒规划模型）,乃至适用处景？

该规划模型的目的是供给一种愈加高效的方式来对容器中的条目停止规划、对齐和分配空间。在传统的规划方式中，block 规划是把块在垂直标的目的从上到下顺次摆列的；而 inline 规划则是在水平标的目的来摆列。弹性盒规划并没有这样内在的标的目的限制，可以由开发人员自在操纵。
试用处景：弹性规划适合于移动前端开发，在Android和ios上也完善支撑。

11 用纯CSS创立一个三角形的道理是啥？

第一，需要把元素的宽度、高度设为0。然后设定边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12 一个满屏品字规划怎样设计?

第一种真正的品字：

三块高宽是肯定的；
上面那块用margin: 0 auto;居中；
下面两块用float或者inline-block不换行；
用margin调整位置使他们居中。

第二种全屏的品字规划:
上面的p设定成100%，下面的p离别宽50%，然后使用float或者inline使其不换行。

13 常见的兼容性问题？

不一样阅读器的标签默许的margin和padding不一样。
*{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin状况下，在IE6显示margin比设定的大。hack：display:inline;将其转化为行内属性。
渐进识别的方式，从总体中逐步排除部分。第一，奇妙的使用“9”这一标志，将IE阅读器从所有状况中别离出来。接着，再次使用“+”将IE8和IE7、IE6别离开来，这样IE8已经独立识别。
```
{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
```
设定较小高度标签（一样小于10px），在IE6，IE7中高度超出本人设定高度。hack：给超出高度的标签设定overflow:hidden;或者设定行高line-height 小于你设定的高度。
IE下，可以使用猎取常规属性的办法来猎取自定义属性,也可以使用getAttribute()猎取自定义属性；Firefox下，只能使用getAttribute()猎取自定义属性。解决办法:统一通过getAttribute()猎取自定义属性。
Chrome 中文界面下默许会将小于 12px 的文本强迫依照 12px 显示,可通过参加 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接拜访过后hover样式就不显现了，被点击拜访过的超链接样式不再具有hover和active了。解决办法是改动CSS属性的摆列次序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 为什么要初始化CSS样式

由于阅读器的兼容问题，不一样阅读器对有些标签的默许值是不一样的，假如没对CSS初始化往往会显现阅读器之间的页面显示差别。

15 absolute的containing block运算方式跟正常流有什么不一样？

不管属于哪种，都要先寻到其祖先元素中比来的 position 值不为 static 的元素，然后再推断：

若此元素为 inline 元素，则 containing block 为能够包括这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
不然,则由这个祖先元素的 padding box 构成。

假如都寻不到，则为 initial containing block。

补充：

static(默许的)/relative：简便说就是它的父元素的内容框（即去除padding的部分）
absolute: 向上寻比来的定位为absolute/relative的元素
fixed: 它的containing block一概为根元素(html/body)

16 CSS里的visibility属性有个collapse属性值？在不一样阅读器下今后什么不同？

当一个元素的visibility属性被设定成collapse值后，关于一样的元素，它的展现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有不同。
firefox，opera和IE，使用collapse值和使用display：none没有什么不同。

17 display:none与visibility：hidden的不同？

display：none 不显示对应的元素，在文档规划中不再分配空间（回流+重绘）
visibility：hidden 潜藏对应元素，在文档规划中仍保存本来的空间（重绘）

18 position跟display、overflow、float这些特性彼此叠加后会如何样？

display属性规定元素应当生成的框的类型；position属性规定元素的定位类型；float属性是一种规划方式，定义元素在哪个标的目的浮动。
相似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

19 对BFC标准(块级格局化上下文：block formatting context)的懂得？

BFC规定了内部的Block Box怎样规划。
定位方案：

内部的Box会在垂直标的目的上一个接一个放置。
Box垂直标的目的的间隔由margin决议，属于统一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包括块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
运算BFC的高度时，浮动元素也会参与运算。

知足以下前提之一就可触发BFC

根元素，即html
float的值不为none（默许）
overflow的值不为visible（默许）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

20 为什么会显现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包括它的边框或者浮动元素的边框逗留。由于浮动元素不在文档流中，所以文档流的块框展现得就像浮动框不存在一样。浮动元素会漂泊在文档流的块框上。
浮动带来的问题：

父元素的高度没法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟从其后
若非第一个元素浮动，则该元素此前的元素也需要浮动，不然会影响页面显示的构造。

清除浮动的方式：

父级p定义height
最后一个浮动元素后加空p标签并增加样式clear:both。
包括浮动元素的父标签增加样式overflow为hidden或auto。
父级p定义zoom

21 上下margin重合的问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC。
例子：

<p class="aside"></p>
<p class="text">
    <p class="main"></p>
</p>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个p，通过改动此p的属性使两个盒子分属于两个不一样的BFC，以此来阻挠margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

22设定元素浮动后，该元素的display值是多少？

主动变成display:block

23 移动端的规划用过媒体查询吗？

通过媒体查询可认为不一样大小和尺寸的媒体定义不一样的css，顺应响应的设备的显示。

<head>里边
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
CSS : @media only screen and (max-device-width:480px) {/css样式/}

24 使用 CSS 预处置器吗？
Less sass

25 CSS优化、提高机能的办法是什么？

幸免过度束缚
幸免后代选中符
幸免链式选中符
使用紧凑的语法
幸免不必要的命名空间
幸免不必要的反复
最好使用表示语义的名字。一个好的类名应当是描写他是啥而不是像什么
幸免！important，可以选中其他选中器
尽大概的精简规则，你可以合并不一样类里的反复规则

26 阅读器是怎样解析CSS选中器的？

CSS选中器的解析是从右向左解析的。若从左向右的匹配，发明不相符规则，需要停止回溯，会亏损许多机能。若从右向左匹配，先寻到所有的最右节点，关于每一个节点，向上寻觅其父节点直到寻到根元素或知足前提的匹配规则，则完毕这个分支的遍历。两种匹配规则的机能差异很大，是由于从右向左的匹配在第一步就挑选掉了大量的不相符前提的最右节点（叶子节点），而从左向右的匹配规则的机能都白费在了失败的查寻上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起停止剖析创立一棵 Render Tree，终究用来停止画图。在创立 Render Tree 时（WebKit 中的「Attachment」历程），阅读器就要为每个 DOM Tree 中的元素按照 CSS 的解析结果（Style Rules）来肯定生成怎样的 Render Tree。

27 在网页中的应当使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开端只供给 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀少。

28 margin和padding离别适合什么场景使用？

何时使用margin：

需要在border外侧增加空白
空白处不需要背风光
上下相连的两个盒子之间的空白，需要彼此抵消时。

何时使用padding：

需要在border内侧增加空白
空白处需要背景色彩
上下相连的两个盒子的空白，但愿为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin大概会变成两倍的宽度。通过改动padding或者指定盒子的display：inline解决。

29 元素竖向的百分比设定是相关于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相关于父容器的宽度运算的，但是，关于一些表示竖向间隔的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，根据的也是父容器的宽度，而不是高度。

30 全屏滚动的道理是啥？用到了CSS的哪些属性？

道理：有点相似于轮播，团体的元素不断摆列下去，假设有5个需要展现的全屏页面，那么高度是500%，只是展现100%，剩下的可以通过transform停止y轴定位，也可以通过margin-top实现
overflow：hidden；transition：all 1000ms ease；

31 什么是响应式设计？响应式设计的根本道理是啥？怎样兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
根本道理是通过媒体查询检测不一样的设备屏幕尺寸做处置。
页面头部必需有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

32 视差滚动结果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，操纵背景的移动速度比前景的移动速度慢来创立出令人惊讶的3D结果。

CSS3实现
长处：开发时间短、机能和开发效力比力好，缺陷是不克不及兼容到低版本的阅读器
jQuery实现
通过操纵不一样层滚动速度，运算每一层的时间，操纵滚动结果。
长处：能兼容到各个版本的，结果可控性好
缺陷：开发起来对制作者要求高
插件实现方式
例如：parallax-scrolling，兼容性十分好

33 ::before 和 :after中双冒号和单冒号有什么不同？说明一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容此前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新显现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的标准里，伪元素的语法被修改成使用双冒号，成为::before ::after

34 你对line-height是怎样懂得的？

行高是指一行文字的高度，详细说是两行文字间基线的间隔。CSS中起高度作用的是height和line-height，没有定义height属性，终究其展现作用必然是line-height。
单行文本垂直居中：把line-height值设定为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设定display属性为inline-block。

35 如何让Chrome支撑小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

36 让页面里的字体变清楚，变细用CSS如何做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最好的，灰度平滑。

37 position:fixed;在android下无效如何处置？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

38 假如需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默许频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

39 li与li之间有看不见的空白间隔是啥缘由引发的？有什么解决方法？

行框的摆列会受到中心空白（回车空格）等的影响，由于空格也属于字符,这些空白也会被利用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决办法：

可以将<li>代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支撑）；可以使用letter-space：-3px

40 display:inline-block 什么时候会显示间隙？

有空格时候会有间隙解决：移除空格
margin正值的时候解决：margin使用负值
使用font-size时候解决：font-size:0、letter-spacing、word-spacing

41 有一个高度自顺应的p，里面有两个p，一个高度100px，但愿另一个填满剩下的高度

外层p使用position：relative；高度要求自顺应的p使用position: absolute; top: 100px; bottom: 0; left: 0

42 png、jpg、gif 这些图片格局说明一下，离别什么时候用。有没有理解过webp？

png是便携式网络图片（Portable Network Graphics）是一种无损数据紧缩位图文件格局.长处是：紧缩比高，色彩好。大多数地方都可以用。
jpg是一种针对相片使用的一种失真紧缩办法，是一种毁坏性的紧缩，在色彩及色彩平滑转变做的不错。在www上，被用来贮存和传输相片的格局。
gif是一种位图文件格局，以8位色重现真色彩的图像。可以实现动画结果.
webp格局是谷歌在2010年推出的图片格局，紧缩率只要jpg的2/3，大小比png小了45%。缺陷是紧缩的时间更久了，兼容性不好，当前谷歌和opera支撑。

43 style标签写在body后与body前有什么不同？

页面加载自上而下当然是先加载样式。
写在body标签后由于阅读器以逐行方式对HTML文档停止解析，当解析到写在尾部的样式表（外联或写在style标签）会致使阅读器休止此前的渲染，等候加载且解析样式表完成之后从新渲染，在windows的IE下大概会显现FOUC现象（即样式失效致使的页面闪耀问题）

44 CSS属性overflow属性定义溢出元素内容区的内容会怎样处置?

参数是scroll时候，必会显现滚动条。
参数是auto时候，子元素内容大于父元素时显现滚动条。
参数是visible时候，溢出的内容显现在父元素之外。
参数是hidden时候，溢出潜藏。

45 论述一下CSS Sprites

将一个页面触及到的所有图片都包括到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合停止背景定位。利用CSS Sprites能很好地减少网页的http恳求，从而大大的提高页面的机能；CSS Sprites能减少图片的字节。

连续更新中...