1. 盒子模型
标准盒子模型:宽度 = 内容宽度(content) + border +padding + margin
低版本IE盒子模型:宽度 = 内容宽度(content + border + padding) + margin
2. box-sizing属性
用来控制盒子模型的解析模式,默认为content-box
content-box:W3C的标准盒子模型,设置元素的height/width属性是content部分的宽/高
border-box:IE传统盒子模型,设置元素的height/width属性是content+border+padding部分的宽/高
3. display有哪些值
inline 内联
none 隐藏
block 块显示
table 表格显示
list-item 项目列表
inline-block
4. CSS3有哪些新特性
RGBA和透明度
background-image background-origin(content-box/padding-box/border-box)
word-warp(对长的不可分割单词换行) word-warp: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,当浏览器尺寸变化是会才有不同的属性
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的元素,然后再判断
若次元素为inline元素,则containing block为能够包含这个元素生成的第一个和最后一个inline box的padding box(除margin,border外的区域)最小矩形
否则,则由这个祖先元素的padding box
如果都找不到,则为initial containing block
补充:
static/relative:简单说就是它的父元素的内容框
absolute:向上找到的最近定位为absolute/relative
fixed:他的containing block一律为根元素
包含块(Containing Block)
包含块简单理解就是一个定位参考块,就是”大盒子里套小盒子”中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。
7. CSS里的visibility属性有个collapse属性值,在不同浏览器下有什么区别
当一个元素的visibility属性被设置为collapse值后。对于一般的元素,它的表现跟hidden是一样的
chrome中,使用collapse值和使用hidden没有什么区别
Firefox,opera和IE,使用collapse值和使用display:none没有什么区别
8. display:none和visibility:hidden的区别
display:none:不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
visibility:hidden隐藏对应的元素,在文档布局中仍然保留原来的空间(重绘)
明确页面在文档加载完成之后到完全显示中间的过程是
- 根据文档生成DOM树(包括display:none的节点)
- 在DOM树基础上根据节点的几何属性(margin/padding/width/height等)生成render树(不包括display:none、head节点但会包含visibility:hidden节点)
- 在render树基础上进行进一步渲染包括color,outline等样式
reflow
:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流
repaint
:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘
减少回流的几点建议:
减少不必要的DOM深度
精简CSS,去掉没用的css
避免不必要的复杂css选择符,尤其是使用子选择权,或消耗更多的cpu去做选择器匹配
直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器)
.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存
让元素脱离动画流,减少回流的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如何布局