Web前端工程师应该懂的的知识点——HTML/CSS

优雅升级 vs 渐进增强

优雅升级：先满足所有功能，再想尽办法去兼容所有浏览器。
渐进增强：先满足基本功能，保证网页的可访问性，注重标签的语言化；然后再为高级浏览器和高带宽用户提供高级功能与效果。

doctype是神马

<!doctype>不是HTML标签，是用来告诉浏览器用怎样的规范去解析当前文档。
HTML4.01的<!doctype>中指向一个DTD（Document Type Definition），而HTM5中不需要，是因为HTMTL5不是基于SGML(Standard Generalized Markup Language) 标准通用标记语言。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

img标签的title和alt有什么区别

title：是globale attributes之一，当鼠标划上去时显示的内容；
alt：是img的特有属性，是图片的等价内容描述，有三重意思：
1.当图片无法加载时就显示alt的内容;
2.屏幕阅读器“阅读”图片时,读的就是这个alt值;
3.对搜索引擎友好。

display: none VS visibility: hidden

1.display:none; 不占空间；visibility:hidden;占空间；
2.visibility:hidden;是继承的，所以如何子孙节点修改visibility:visible
;可以显示；但display:none;不可以。
3.修改display属性会导致整个文档重排，但修改visibility属性只会导致元素重绘。
4.读屏器不会读display:none的元素，但会读visibility:hidden的元素。

display: block; VS display: inline;

block：
1.在常规流中，如果没有设置width，会填充满父容器；
2.margin，padding有效；
3.忽略vertical-align;
inline:
1.在水平方向，根据direction依次布局；
2.margin和padding在垂直方向无效，水平方向有效；
3.浮动或绝对定位时会转换成block；
4.vertical-align属性生效；

什么是FOUC?如何避免

FOUC：Flash Of Unstyled Content。意识是先显示了无样式的文档内容，后又加载了样式文件，导致重新渲染，出现闪烁的现象。
解决方法：1.样式文件放在文档的head标签中；2.尽可能避免用@import来引入css文件，因为这样会没法同步加载样式文件，可能导致FOUC现象。

解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框才停留。
清除方法：
1.使用空标签清除浮动：在所有浮动标签后面加一个空标签，定义样式clear:both;弊端就是增加了无意义的标签。
2.使用after伪对象清除浮动，注意要设置height:0;否则该元素会比实际多出若干像素。
3.使用oveflow：给包含浮动元素的父元素增加样式：overfow:auto;zoom:1;（兼容IE6）。

CSS3中的transition是什么意思

transition:过渡。
意思是允许CSS的属性在一定时间内平滑地过渡。
语法：transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>,~~]
transition-property: none|all|color|width|...
transition-duration: 持续时间
transition-timing-function: linear(匀速)|ease(逐渐慢)|ease-in(加速)|ease-out(减速)|ease-in-out(先加速后减速)|cubic-bezier(x1,y1,x2,y2)这里的两对坐标其实是贝塞尔曲线的那两个杠杆点。
transition-delay: 动画的延迟执行事件

CSS3中的transform是什么意思

transform：改变。
意思是：让元素执行什么变化，如旋转/缩放/移动/倾斜等

none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

比较有意思的是matrix这个属性，基本上其他属性的效果都能通过这个matrix实现。

CSS中的伪类与伪元素

伪类：

伪元素：