牛客前端八股文

1.说说HTML语义化？

得分点：语义化标签、利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读

1，标签语义化是指在开发时尽可能使用有语义的标签，比如header，footer，h，p，少使用无语义如div。

2，标签语义化的好处有三点，首先对开发者来说，能够提高代码可读性，利于前期开发以及后期维护；对于用户来说，在样式表没有加载出来时，整个页面结构依旧清晰，给用户一个不错的体验感；对搜索引擎来说，利于爬虫读取有用的信息，提升网页排名。

3，目前语义化并没有得到广泛应用，如京东，淘宝官网依旧采用大量无语义标签。原因是语义化带来的好处不足以其耗费人力物力去重写网站。

2.说说盒模型？

得分点 标准盒模型、怪异盒模型、`box-sizing:border-box`、盒模型大小

1，CSS盒模型本质是一个盒子，包含 padding、border、margin、content。盒模型分为两类，W3C标准盒模型和IE怪异盒模型，一般我们的盒子默认是标准盒模型。

2，两者区别是标准盒模型的实际宽高会把padding和border计算在内，而怪异盒模型不会。

3，形成怪异盒模型的条件是box-sizing:border-box；形成标准盒模型的条件box-sizing:content-box。

3.说一下浮动？

得分点 脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、`overflow:hidden` 、标签插入法

1. 浮动的作用：设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

2. 浮动特点： 脱离文档流，盒子塌陷，影响其他元素排版

3. 解决塌陷：
（1）额外标签法（隔墙法）：在最后一个浮动标签后添加一个标签，给其设置clear:both，如果清除了浮动父元素自动检测盒子最高的高度，然后与其同高。

（2）父元素添加overflow属性，overflow: hidden。

（3）父级添加after伪元素（推荐做法）。

（4）父级添加before和after双伪元素。 

4. 清除浮动的特点：

4. 样式优先级的规则是什么？

得分点 `!important`、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式

1.!important、 2.行内样式>（嵌入样式、外链样式）、 3.id选择器（#id{}） >（类选择器（.class{}）、伪类选择器（ :hover{}）、属性选择器（a[href="segmentfault.com"]{}））>（后代选择器（.father .child{}）、伪元素选择器（ ::before{}））>（子选择器（.father > .child{}）、相邻选择器（ .bro1 + .bro2{}））>通配符选择器（*{}）、 4.继承样式、 5.浏览器默认样式 

5. 说一说CSS尺寸设置的单位？

得分点 px、rem、em、vw、vh

（1）css一共有五个长度单位，分别是px，em，rem，vw，vh

（2）除了px是绝对单位，其他都是相对单位。

（3）em相对于自身大小（但在font-size中相对于父元素字体大小）

（4）rem相对于根元素的字体大小

（5）vw相对于可视化窗口的宽（1vw就是1%可视化窗口宽度）

（6）vh相对于可视化窗口的高（1vh就是1%可视化窗口高度）

（7）一般采用rem+媒体查询或者rem+vw来实现响应式布局。原理是当窗口大小发生变化时，通过媒体查询或者vw改变根元素的字体大小，从而改变以rem为单位的元素大小