前端面试之HTML+CSS（八股文）
1. 盒子模型，普通盒子模型和怪异盒子模型有什么区别？
答：普通盒子模型又称标准W3C盒子模型，标准盒子模型的Width等于content的宽度，标准盒子模型的Height等于Content的高度
标准盒子大小计算公式：width（content）+padding +border + margin
怪异盒子模型又称IE盒子模型，怪异盒子模型的Width等于Content➕padding➕border的宽度，怪异盒子模型的Height等于content➕padding➕border的高度
怪异盒子大小的计算公式：width（content + padding + border）+ margin
2. 块元素和行内元素的区别是什么？常见块元素和行内元素有哪些？
答： 块级元素一般从新行开始，可以容纳行内元素和其他块级元素；常见的必入div / p，form这个块级元素比较特殊，他只能容纳其它块级元素。
行内元素又称内联元素，一般都是语义级别元素，他只能容纳文本或者其他内联（行内）元素。（span / label / a / h / b / i）
块级元素与行内元素的三个区别：1.行内元素会在一条直线上排列，都是同一行的，水平方向；块级元素各占一行，垂直方向排列，块级元素从新行开始结束接着断行。2. 块级元素可以包含行内元素和块级元素；行内元素不包含块级元素。3. 行内元素与块级元素属性上不同，主要体现在盒子模型属性上：行内元素设置width无效，height无效（可设置line-height），margin上下无效，padding上下无效
行内元素转为块级元素：display:block （字面意思表现形式设为块级）
3. HTML语义化标签有哪些？
答：语义化标签可以理解为用于进行网页页面构建的标签，他们不会影响页面内容，只是对页面结构规范化。
为什适用语义化标签：1）已修改，维护 2）更易理解页面结构。 3）有利于SEO搜索引擎检索
语义化标签的使用：1. 头部标签<header>: 1) 标注内容的标题 2）标注网页的页眉 ；2. 导航栏标签<nav>：用于一组文章链接，一个页面可以包含多个<nav>标签，但通常仅仅在页面主要导航部分使用它；3. 附注标签<aside>：元素不仅仅是侧栏，它表示与它周围文本没有密切关系的内容； 4. 页脚标签<footer>：可以包含版权，来源信息，法律限制等等之类文本或链接信息，可以包含其他行内或块级元素； 5. 主要内容标签<main> ； 6. 文章标签<article>：是一个完整的自成一体的内容块
4.伪类和伪元素的区别是什么？
答：相同点：都属于选择器中的一种，能实现对于页面元素的修饰
不同点：
1. 概念不同：伪类：用于已有元素出于某种状态时为其添加相对应地样式，这个状态是根据用户的行为而动态变化的，例如：鼠标悬停（:hover）；伪元素：用于创建一些不在DOM树中的元素，并未其添加样式，例如：先向前后插入元素内容等
2. 使用方法不同：css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，比如：::before，::after等伪元素使用双冒号，:hover,:active伪类使用单冒号
5.CSS如何实现垂直居中？
答：1. 通过vertical-align:middle实现CSS垂直居中； 2. 通过display:flex实现CSS垂直居中； 3. 通过伪元素:before实现CSS垂直居中；4. 通过display:table-cell实现CSS垂直居中；5. 通风过隐藏节点实现垂直居中；6. 已知父层元素高度通过transform来实现；7. 到垂直居中的位置；8. 通过line-height来实现；
6. CSS选择器有哪些？
答：1.元素选择器；2.id选择器； 3.类选择器； 4. 分组选择器（并集选择器）；5.符合选择器（交集选择器）；6. 通配选择器； 7. 后代选择器；8.子元素选择器；9.伪类选择器；10.属性选择器；11.兄弟元素选择器。
7.CSS的优先级如何计算？
答：CSS的优先级是根据样式生命的特殊性值来判断的
选择器的特殊性值分为4个等级，如下：
1） 标签内选择符想x，0，0，0
2） ID选择符0，x，0，0
3） class选择符/属性选择符/伪类选择符0，0，x，0
4）元素和伪元素选择符0，0，0，x
计算方法：
1）每个等级初始值为0
2）每个等级的叠加为选择器出现的次数相加
3）不可进位，比如：0，999，999，99
4）以此表示为：0，0，0，0
5）每个等级计数之间没有关联
6）等级判断从左到右，如果某一位值相同，则判断下一位数值
7）如果两个优先级相同，则后出现的优先级高，！important 也适用
8）通配符选择器的特殊性值为：0，0，0，0
9） 继承样式优先级最低，通配符样式高于继承样式
10）!important（权重），他没有特殊性值，但他的优先级最高，为了方便记忆可以认为他的特殊性值为1，0，0，0，0
8. 长度单位px，em，和 rem 的区别是什么？
答：1) px是固定像素，一旦设置了就无法因为适应页面大小而改变
2）em和rem相对于px更具灵活性，他们是相对长度单位，更适用于响应式布局。
3）em是相对父元素来设置大小，一般以<body>的“font-size”为准。这样会存在一个问题，进行任何元素设置都有可能需要知道他的父元素的大小。但是rem是相对于根元素<html>，就是说我们只需要在跟元素确定一个参考值
4) 像素（px）：用于元素的边框或定位
5）em/rem：用于做响应式页面，最好使用rem，因为em不同元素的参照物不一样（都是该元素的父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素）
9.讲一下Flex弹性盒布局？
答：原理：通过给父盒子添加 display：flex 属性，来控制盒子的位置和排 列方式
特点：1）flex布局相对于传统布局（浮动，定位）更简便，但兼容性更差
2）父元素设为flex布局后，子元素的float，clear，vertical-align属性失效
3）应用于任何元素：块元素，行元素，行内块元素
4）display：声明flex属性值 flex ，对应块元素，即容器转化为块元素 inline-flex， 对应行行内元素，即容器转化为行内元素
5）子项目中行元素可直接设置宽高，块级元素宽度不继承，行内块元素没有间隔
6）没有外边距合并问题
7）能让页面宽度自适应，高度与字体大小自适应需要配合rem+媒体查询
10.浮动坍塌问题的解决方案是什么？
答：浮动元素的特点：1）浮动元素会脱离标准文件流，已经不区分块行了; 2）浮动的元素会胡想贴靠；3）浮动的元素有“字围”的效果；4）收缩
坍塌解决方案：1）给浮动的元素的上级添加高度；2）clear：both；3）隔墙法：中间加空盒子；4）隔墙法进化版-内墙法：空也盒子加在浮动元素内；5）overflow：hidden；6）伪元素
11.position的属性值有哪些，各个值是什么含义？
答：1）static：默认位置，（static 元素会忽略任何top，bottom，left或right声明）一般不常用；2）relative：位置被设置为relative的元素，偏移的top，right，bottom，left的值都以他原来的位置为基准偏移，注意relative移动后的元素在原来的位置仍占据空间；3）absolute：位置设置absolute的元素，可定位于相对包含的它的元素的置顶坐标；4）fixed：位置被设置fixed的元素，可定位相对于窗口的指定坐标
12.BFC，IFC是什么？
答：BFC（block formatting contexts）块级格式化上下文
a）纵向一个挨着一个排列
b）两个盒子的纵向间距由margin来决定，两个相邻的盒子在垂直方向上的margin会有种“重叠合并”的效果，此时纵向间距距离取较大的margin值
IFC（inline formatting contexts）行内格式上下文
