HTML5+CSS3重点知识点总结

1.如何理解语义化

标签的命名有一定直观上的含义，能直接看出可能的作用

优点：

1. 当页面加载失败时也能过呈现出清晰的结构

2. 有利于SEO（让搜索结果排名靠前）优化，有利于被搜索引擎收录

3. 在项目的开发和维护时有利于降低开发难度和节省成本

2.页面呈递流程、回流和重绘

1. 页面的呈递流程

（1）首先浏览器会将获取到的HTML代码解析为一个dom树，HTML中的每一个标签都是dom树中的节点

（2）浏览器会将所有样式解析为样式结构体

（3）dom树和样式结构体结合后构建呈现树（render tree）,其中的每个节点成为box(Box dimensions)

（4）当render tree构建完毕后，浏览器会根据它绘制对应的页面

2. 回流

当render tree中的内容因为元素的尺寸,布局，显示等该改变需要重新构建时会产生回流（页面元素的改变影响了布局）。每个页面至少存在一次回流，页面第一次加载的时候。

3. 重绘

当render tree中的一些元素需要重新更新属性，而这些属性只是影响元素的外观，风格（例如color）不会影响到布局称为重绘。 回流必有重绘，重绘不一点有回流。

3.link和import的区别

1. 本质区别：link属于xhtml标签，@import属于css提供的一种方式

2. 引用类型区别：link可以引入css/js等外部文件，import只能引入CSS文件

3. 加载顺序区别：link引入的css会和页面一起加载，@import引入的css等到页面加载完毕才会加载

4. 兼容性区别：link是xhtml标签几乎没有兼容性问题，@import属于css2.1提出的，IE5一下不能识别

4.px和em的区别

相同点：都是长度单位

不同点：px是像素单位，是绝对单位，不会因为其他元素的尺寸改变而变化。em是相对于其父元素的字体大小决定的，是相对单位。

5.清除浮动的方法

1. 给父级元素定义高度或者添加样式：overflow：hidden

2. 在末尾添加一个空元素，并添加样式：clear：both

3. 给父级元素定义伪类

.clearfloat:after{display:block;
                    clear:both;
                    content:"";
                    visibility:hidden;
                    height:0}
.clearfloat{zoom:1}//zoom属性是IE浏览器的专有属性，可以设置或检索对象的缩放比例

6.什么是优雅降级和渐进增强

1. 渐进增强 progressive enhancement

针对低版本浏览器构建也页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追求功能达到更好的用户体验。

2. 优雅降级graceful degrafation

一开始构建完整的功能，再针对低版本浏览器进行兼容

区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给（往后看）。渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断拓充，以适应未来环境的需要（往前看）。

7.display：none和visibility:hidden区别

1. display:none:销毁了对应的dom元素，因此脱离了文档流，浏览器不会解析该元素。visibility：hidden是视觉上的消失，可以理解为透明度为零，在文档流中占位，浏览器会解析。

2. 使用visibility：hidden比display：none性能上更好。display：none切换时也页面回产生回流。而visibility：hidden不会。

8.relative、absolute、fixed和sticky的区别

1. relative：相对定位，相对于自身的定位，没有脱离标准流，一般是配合absolute使用（子绝父相）

2. absolute：绝对定位，相对于离自己最近的带有定位的父元素的定位，脱离了标准流

3. fixed：固定定位，相对于浏览器视口的定位，不会随着页面的滚动而滚动。

4.sticky：粘性定位，跟前面几个属性值都不一样，它会产生动态效果，很像 relative 和 fixed 的结合：一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口比如型表格滚动的时候，表头始终固定。sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛

9.块级元素和行内元素举例

1. display：block/table：div、p、h1-h6、ul、ol、dl、li、header、footer、aside、section、article、form、table等

2. display：inline：a 、b 、br、em、i、span、strong、small、code、q、sub、sup

3. display：inline-block：button、img、input、select、textarea

10.css盒模型

1. 标准盒模型：width = content

2. IE盒模型：（box-sizing：border-box ）width = border + padding + content

11.HTML5新特性

1. 语义化标签

• 定义了文档的头部区域

• <footer></footer>定义了文档的尾部区域

• <nav></nav>定义文档的导航

• <section></section>定义文档中的节（section、区段）

• <article></article>定义页面独立的内容区域

• <aside></aside>定义页面的侧边栏内容

• <detailes></detailes>用于描述文档或文档某个部分的细节

• <summary></summary>标签包含 details 元素的标题

• <dialog></dialog>定义对话框，比如提示框

2. 增强型表单

新增input的输入类型

•  color:主要用于选取颜色

• date:从一个日期选择器选择一个日期

• datetime:选择一个日期（UTC 时间）

• datetime-local:选择一个日期和时间 (无时区)

• datetime-local:选择一个日期和时间 (无时区)

• email:包含 e-mail 地址的输入域

• month:选择一个月份

• number:数值的输入域

• range:一定范围内数字值的输入域

• search:用于搜索域

• tel：定义输入电话号码字段

• time:选择一个时间

• url:URL 地址的输入域

• week:选择周和年

3. 新增表单属性

• placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
• required 属性，是一个 boolean 属性。要求填写的输入域不能为空
• pattern 属性，描述了一个正则表达式用于验证 元素的值。
• min 和 max 属性，设置元素最小值与最大值。
• step 属性，为输入域规定合法的数字间隔。
• height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
• autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
• multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。

4. 新增视频和音频标签

5. canvas、SVG绘图

6.地理定位

7.拖放API

8.web worker （HTML5提供的一种多线程方案）

9.webStorage

10.webSocket（HTML5提供的一种在单个TCP连接上进行的全双工通讯的协议）

12.CSS3新特性

1. 动画属性

@keyframes/animation

2. 边框属性

border-image/border-radius/border-shadow

3. 颜色属性

opacity

4.弹性盒子模型

flex/align-content/align-item/align-self/justify-content/order……

5. 过渡和动画

（1）2D/3D转化

transform/translate/scale/rotate/translate3d/skew

（2）过渡

transition

13.BFC理解和应用

1. 概念

Block format content ，块级格式化上下文，是一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素。

2. 应用

（1）伪元素清除浮动

（2） 解决父元素高度塌陷，外边距重叠

3. 如何产生

（1）跟元素

（2）float属性（不为none）

（3）display属性（为inline-block，table-cell，fiex，inline-flex）

（4）position属性（不为static，relative）

（5）overflow属性（不为visible）

14.居中对齐的方式有哪些

水平居中

（1）Inline元素：text-align：center

（2）block元素：margin：0 auto

（3）absolute：（left：50%+margin-left：-50%）

（4）translateX

（5）flex：（display：flex；justify-content:center）

垂直居中

（1）inline元素：height：line-height

（2）absolute：（top:50%+margin-top:-50%）

（3）translateY

（4）flex：（display：flex；flex-direction：column；justify-content：center）

15.css选择器

优先级：!important > 内联 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器

伪类选择器（伪类 表示元素的一种特殊状态）

• :active 向被激活的元素添加样式
• :focus 向拥有键盘输入焦点的元素添加样式
• :hover 当鼠标悬浮在元素上方时，向元素添加样式
• :link 向未被访问的链接添加样式
• :visited 向已被访问的链接添加样式。（隐私问题只能设置颜色）
• :first-child 向元素的第一个子元素添加样式
• :lang 向带有指定 lang 属性的元素添加样式
• ::selection 匹配被用户选中或处于高亮状态的部分

伪元素选择器（表示元素中一些特殊的位置，不会出现在dom中）

• :first-letter 向文本的第一个字母添加特殊样式。
• :first-line 向文本的首行添加特殊样式。
• :before 在元素之前添加内容。
• :after 在元素之后添加内容

16.style写在body前后的区别

1. 写在body前

有利于浏览器逐步渲染

2. 写在body后

由于浏览器以逐行的方式对HTML文档进行解析，当解析到尾部的样式时会导致浏览器停止之前的渲染，等待加载且解析样式表完成后再重新渲染

17.DIV+CSS布局和table布局区别

table布局

缺点：

1. 显示样式和数据绑定在一起

2.布局不够灵活

3. 一个页面可能会有大量的table元素，代码冗余度高

4. 不利于被搜索引擎收录

优点：

1. 理解比较简单

2. 不同的浏览器看到的效果一般相同

DIV+CSS布局

优点：

1. 符合w3c标准

2. 搜索引擎更加友好

3. 样式调整方便，内容和样式分离

4. css样式代码简洁，对于一个大型网站来说可以节省大量带宽

18.如何画一条0.5px的线

1. 采用meta viewport 的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

**只针对移动端

2. 采用transform：scale（）的方式

transform: scale(0.5,0.5);