CSS 常见面试基础题

2018-10-03 本文已影响5人空无一码

CSS 常见面试基础题

1 style标签写在body后与body前有什么区别？

页面加载自上而下，当然是先加载样式，写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

2 为什么要初始化或重置浏览器的css默认属性？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

3 如何做好一个元素的居中？

方法一

div .box {
  width:300px;
  height:600px;
  position:absolute; // 把元素变成定位元素
  // 设置元素的定位位置，距离上、左都为50%
  left:50%; 
  top:50%;
  // 设置元素的左外边距、上外边距为宽高的负1/2
  margin-left:-150px;
  margin-top:-300px;
}
* 兼容性好; 但必须知道元素的宽高

方法二

div .box {
  position:absolute; // 把元素变成定位元素
  // 设置元素的定位位置，距离上、下、左、右都为0
  left:0;
  right:0;
  top:0;
  bottom:0;
  // 设置元素的margin样式值为 auto
  margin:auto;
}
* 兼容性较好，但不支持IE7以下的浏览器

方法三

div .box {
  position:absolute; // 把元素变成定位元素
  // 设置元素的定位位置，距离上、左都为50%
  left:50%; 
  top:50%;
  // 设置元素的相对于自身的偏移度为负50%
  transform:translate(-50%,-50%);
}
* transform是css3里的样式;兼容性不好，只支持IE9+的浏览器

方法四

div .box {
  display: flex;
  justify-content: center;
  align-items: center;
}
* flex布局是css3里才有的;兼容性不好，只支持IE9+的浏览器

4 px、em、rem的区别？

px像素：绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
em：相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem：CSS3新增的一个相对单位,使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

5 为什么要使用css sprites？

css sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用css的"background-image","background-position"的组合进行背景定位，这样可以很好地减少网页的http请求，从而大大的提高页面的性能。

6 何为浮动及其影响？如何清除浮动？哪种较好

何为浮动:浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除方式：
- 父级div定义height
- 结尾处加空div标签clear：both
- 父级div定义伪类：after和zoom
- 父级div定义overflow：hidden
- 父级div定义overflow：auto
- 父级div也浮动，需要定义宽度
- 父级div定义display：table
- 结尾处加br标签clear:both

较好的是第3种，好多网站都这样用

7 浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

8 解释一下png、jpg、gif 这些图片格式，分别什么时候用？

png是便携式网络图片，是一种无损数据压缩位图文件格式；优点是：压缩比高，色彩好，大多数地方都可以用。- - jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错；在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果；

9 CSS如何计算选择器优先？

相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式
含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式
选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]
在同一组属性设置中，!important 优先级最高，高于行内样式
继承得到的样式的优先级最低。

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

盒子模型构成：内容(content)、内填充(padding)、边框(border)、外边距(margin)
IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会-包含内填充和边框，称为怪异盒模型(IE盒模型)
标准(W3C)盒模型：元素宽度 = width + padding + border + margin
怪异(IE)盒模型：元素宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

11 介绍使用过的 CSS 预处理器？

CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等），开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用
使用 CSS 预处理器，可以使 CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性
最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS， stylus

12 CSS优化、提高性能的方法有哪些？

多个css合并，尽量减少HTTP请求
将css文件放在页面最上面
移除空的css规则
避免使用CSS表达式
选择器优化嵌套，尽量避免层级过深
充分利用css继承属性，减少代码量
抽象提取公共样式，减少代码量
属性值为0时，不加单位
属性值为小于1的小数时，省略小数点前面的0
css雪碧图

13 在网页中的应该使用奇数还是偶数的字体？

在网页中的应该使用“偶数”字体：
偶数字号相对更容易和 web 设计的其他部分构成比例关系
使用奇数号字体时文本段落无法对齐
宋体的中文网页排布中使用最多的就是 12 和 14

14 margin和padding分别适合什么场景使用？

需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin
需要在border内测添加空白，且空白处需要背景（色）时，使用 padding

15 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

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

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

17 box-sizing 常用的属性有哪些？分别有什么作用？

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素
box-sizing 属性的值

18 什么是外边距折叠(collapsing margins)及其规则？

毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠，规则如下：

两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
元素自身的margin-bottom和margin-top相邻时也会折

19 css 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

20 请列举几种隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
div 中 hidden="hidden" HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

21 rgba() 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

22 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

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

23 伪元素和伪类的区别和作用？

伪元素 -- 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
伪类 -- 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

24 设置元素浮动后，该元素的 display 值会如何变化？

设置元素浮动后，该元素的 display 值自动变成 block

CSS 常见面试基础题