CSS面试题

1. 盒子模型

标准盒子模型:宽度 = 内容宽度(content) + border +padding + margin

低版本IE盒子模型:宽度 = 内容宽度(content + border + padding) + margin

2. box-sizing属性

用来控制盒子模型的解析模式,默认为content-box

  1. content-box:W3C的标准盒子模型,设置元素的height/width属性是content部分的宽/高

  2. border-box:IE传统盒子模型,设置元素的height/width属性是content+border+padding部分的宽/高

3. display有哪些值

  1. inline 内联

  2. none 隐藏

  3. block 块显示

  4. table 表格显示

  5. list-item 项目列表

  6. inline-block

4. CSS3有哪些新特性

  1. RGBA和透明度

  2. background-image background-origin(content-box/padding-box/border-box)

  3. word-warp(对长的不可分割单词换行) word-warp:break-word

  4. 文字阴影:text-shadow:5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)

  5. font-face属性:定义自己的字体

  6. 圆角:border-radius

  7. 边框图片:border-image:url(border.png) 30 30 round

  8. 盒阴影:box-shadow:10px 10px 5px #888888

  9. 媒体查询:定义两套CSS,当浏览器尺寸变化是会才有不同的属性

5. CSS创建三角形的原理

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

6. absolute的containing block计算方式跟正常文档流有什么不同

无论属于哪种,都要先找到其祖先元素最近的position值不为static的元素,然后再判断

  1. 若次元素为inline元素,则containing block为能够包含这个元素生成的第一个和最后一个inline box的padding box(除margin,border外的区域)最小矩形

  2. 否则,则由这个祖先元素的padding box

如果都找不到,则为initial containing block

补充:

  1. static/relative:简单说就是它的父元素的内容框

  2. absolute:向上找到的最近定位为absolute/relative

  3. fixed:他的containing block一律为根元素

包含块(Containing Block)

包含块简单理解就是一个定位参考块,就是”大盒子里套小盒子”中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。

7. CSS里的visibility属性有个collapse属性值,在不同浏览器下有什么区别

当一个元素的visibility属性被设置为collapse值后。对于一般的元素,它的表现跟hidden是一样的

  1. chrome中,使用collapse值和使用hidden没有什么区别

  2. Firefox,opera和IE,使用collapse值和使用display:none没有什么区别

8. display:none和visibility:hidden的区别

display:none:不显示对应的元素,在文档布局中不再分配空间(回流+重绘)

visibility:hidden隐藏对应的元素,在文档布局中仍然保留原来的空间(重绘)

明确页面在文档加载完成之后到完全显示中间的过程是

  1. 根据文档生成DOM树(包括display:none的节点)
  2. 在DOM树基础上根据节点的几何属性(margin/padding/width/height等)生成render树(不包括display:none、head节点但会包含visibility:hidden节点)
  3. 在render树基础上进行进一步渲染包括color,outline等样式

reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流

repaint:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘

减少回流的几点建议:

  1. 减少不必要的DOM深度

  2. 精简CSS,去掉没用的css

  3. 避免不必要的复杂css选择符,尤其是使用子选择权,或消耗更多的cpu去做选择器匹配

  4. 直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器)

  5. .不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存

  6. 让元素脱离动画流,减少回流的Render Tree的规模

9. position跟display、overflow、float这些特性相互叠加后会怎么样?

display属性规定元素一个生成的框的类型

position属性规定元素的定位

float属性是一种布局方式,定义元素在哪个方向浮动

类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。

10. 对BFC规范(会计格式化上下文:blbok formatting content)的理解

BFC规定了内部的block box如何布局


  Reprint please specify: 云深不知处 CSS面试题

 Previous
高新兴科技面试 高新兴科技面试
web前端实习生(2020届毕业生) 1、掌握HTML、Javascript、CSS、ajax等前端开发技术,熟悉jQuery/vue等主流前端开发框架,熟悉css2/css3,掌握各种布局原理,能灵活应用 2、了解设计模式,掌握MVC等设
2019-04-09
Next 
浏览器兼容 浏览器兼容
不同浏览器的标签默认的margin和padding不同 * { margin:0; padding:0; } ` 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大,hack:display:inli
2019-04-04
  TOC