HTML和CSS作为前端工程师必备的技能，熟练掌握和使用对于工作和面试都有一定的意义。
1、HTML语义化的意义
- 能够便于开发者阅读和写出更优雅的代码；
- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容；
- 更好地搜索引擎优化。
2、盒子模型
W3C的标盒模型
content-box和IE的怪异盒模型border-box;
content-box：padding和border不被包含在定义的width和height之内。 盒子的实际宽度=设置的width+padding+border;border-box：padding和border被包含在定义的width和height之内。 盒子的实际宽度=设置的width（padding和border不会影响实际宽度）
3、display的常见属性值及作用
display:none隐藏该元素;
display:block显示为块级元素;
display:inline显示为行内元素;
display:inline-block显示为行内块级元素;
display:flexflex容器。
4、src 和 href的区别
src：是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在 位置；在请求 src资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片 等元素。是资源的引入；href：是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点） 或当前文档（链接）之间的链接，是文本的关联。
5、px、em、rem、vw、vh、vmin、vmax
px: 像素，相对长度单位，网页设计常用的基本单位。像素 px是相对于显示器屏幕分辨率而言的;
em: 相对长度单位。相对于当前对象内文本的字体尺寸;
rem: CSS3新增的一个相对单位，相对于HTML根元素的字体大小来计算的长度单位;
vw: vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100;
vh: vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100;
vmin,vmax: vmin 为 vw 与 vh 中的较小值，vmax 为 vw 与 vh 中的较大值。
6、什么是BFC
bfc是一个封闭的容器，里面元素的布局不会对外面的元素产生影响;
触发bfc的方法：
body根元素;- 浮动元素：
float除none以外的值;- 绝对固定定位元素：
position (absolute、fixed);- display 为
inline-block、table-cells、flex;overflow除了visible以外的值(hidden、auto、scroll);
7、实现两行排列，多余的字符以省略号出现
.text {
width: 200px;
border: 1px solid red;
/* 将内容限制为指定的行数 */
-webkit-line-clamp: 3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
8、CSS选择器 & 选择器权重
!important最大- 内敛样式权重是 1 0 0 0
- ID选择器权重是 0 1 0 0
- 类、伪类、属性选择器 0 0 1 0
- 标签选择器和伪元素 0 0 0 1
- 通配符* 子选择器> 相邻选择器+ 空格 权重为 0 0 0 0
9、隐藏元素的方法
visibility: hidden: 隐藏元素，但会占用空间, 子级元素可设置单独设置显示display: none：隐藏元素，不占用空间opacity: 0: 使元素透明，会占用空间，子级无法单独设置transfrom：scale(0)：隐藏元素，会占用空间，子级无法单独设置
10、css 中 link 与 @import 的区别
- 兼容性差别，link属于XHTML标签（支持所有浏览器），而@import完全是CSS2.1提供的一种方式（低版本浏览器不支持）。
- 加载顺序的差别，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
- @import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。
