1. 什么是盒子模型？
在网页中，一个元素占有空间的大小由元内容（content），内边距（padding），边框（border），外边距（margin）四个部分。有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
共有两种盒子模型:
W3C标准盒模型: 属性width,height包含content,不包含border和padding
IE盒模型: 属性width,height包含content,border,padding
2. 什么是css Hack?
就是针对不同的浏览器写不同css样式。css hack一般来说是为了兼容IE浏览器的。
IE浏览器Hack一般又分为三种: 条件Hack、属性Hack、选择器Hack。
.说一说BFC
块格式化上下文（Block Formatting Context，BFC）
用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文。是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
触发条件,满足其一即可
- body元素
- float的值不为none；
- overflow的值不为visible；
- position的值为fixed / absolute；
- display的值为table-cell / table-caption / inline-block / flex / inline-flex。
BFC作用
- 可以包含浮动元素——清除内部浮动
当给元素设置overflow: hidden时，实际上创建了一个超级属性BFC，此超级属性反过来决定了height:auto是如何计算的。在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，达成了清除浮动的目标，所以父元素就包裹住了子元素。 - 分属于不同的BFC时可以阻止margin重叠
兄弟、父子元素等之间之所以会发生margin合并，是因为它们属于同一个BFC。
所以只要让它们不属于同一个BFC就可以了，即加上overflow: hidden。
BFC布局规则
- 内部的块级元素会在垂直方向，一个接一个地放置；
- 块级元素垂直方向的距离由margin决定。
属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并； - 每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；
- BFC的区域不会与float box重叠；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
- 计算BFC的高度时，浮动元素也参与计算。
.说说回流和重绘
回流: 当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程
如何引发回流? 页面首次渲染，浏览器窗口改变大小，元素尺寸或位置发生改变，元素内容变化（文字数量或图片大小等等），元素字体大小变化，DOM操作，激活CSS伪类（例如：:hover）
查询某些属性或调用某些方法
scrollTo()，getComputedStyle()，scrollIntoView()、scrollIntoViewIfNeeded()，getBoundingClientRect()
重绘: 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它的过程。
浏览器使用流式布局模型。浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。回流必将引起重绘，重绘不一定会引起回流
如何避免
1.避免使用table布局。
2.尽可能在DOM树的最末端改变class
3.避免设置多层内联样式
4.将动画效果应用到position属性为absolute或fixed的元素上。
5.避免使用CSS表达式（例如：calc()）
6.避免频繁操作样式，最好一次性重写style属性，或将样式列表定义为class并一次性更改class属性
7.避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中
8.先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
9.避免频繁读取会引发回流/重绘的属性，如确实需要多次使用，就用一个变量缓存起来
10.对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流
.link 和 @import的区别
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
.CSS单位都有哪些
-
%：
1.margin,padding是相对父元素的宽度计算的
2.top,left,bottom,right是相对于父元素的高度计算的
3.translate是相对自身元素来算的 -
px：像素
1.em：1em等于当前元素的font-size(浏览器默认16px，可继承，em可以省略)
2.rem：1rem等于html元素的font-size
3.vw,vh：视口宽度被均分成100vw,视口高度被均分成100vh。视口宽高是页面的可视区域，如键盘弹起安卓的视口宽高发生变化，但iPhone不会。（安卓4.4，iOS6以上支持） -
vmax, vmin：
1.vmax = max(vw,vh)（vmax安卓4.4，iOS8以上支持）
2.vmin = min(vw,vh)（vmin安卓4.4，iOS6以上支持） -
ex和ch：
1.ex以字符"x"的高度为基准；例如1ex表示和字符"x"一样长。
2.ch以数字"0"的宽度为基准；例如2ch表示和2个数字"0"一样长
.如何选择图片格式，例如 png, webp
图片格式 压缩方式 透明度 动画 浏览器兼容 适应场景
JPEG 有损压缩 不支持 不支持 所有 复杂颜色及形状、 尤其是照片
GIF 无损压缩 支持 支持 所有 简单颜色， 动画
PNG 无损压缩 支持 不支持 所有 需要透明时
APNG 无损压缩 支持 支持 FirefoxSafariiOS Safari 需要半透明效果的动画
WebP 有损压缩 支持 支持 ChromeOperaAndroid ChromeAndroid Browser 复杂颜色及形状浏览器平台可预知
SVG 无损压缩 支持 支持 所有（IE8以上） 简单图形，需要良好的放缩体验需要动态控制图片特效
网友评论