HTML面试题
如何理解HTML语义化？
让人更容易读懂（增加代码的可读性），搜索引擎更容易读懂（SEO）
块状元素和内联元素？
块元素独占一行（display:block(可以设置宽高)/table,div\h1\h2\table\ul\ol\p等），内联元素可以换行，（display：inline（行内元素，可以换行，不可设置宽高）/inline-block（行内块元素，可以设置宽高也可以换行）,span\img\input\button）。
CSS面试题
盒模型的宽度如何计算？
标准模型 width+padding+border+margin,IE怪异模型width（包含padding+border）+margin
offsetWidth=（内容宽度+内边距+边框），无外边框，box-sizing：border-box（内容宽度将包含内边距和边框）
margin纵向重叠的问题？
p { margin-top: 10px; margin-bottom:15px;}
<p class="p1">test1</p>
<p></p>
<p class="p3">test2</p>
相邻元素的margin-top和margin-bottom会发生重叠；空白内容的<p></p>也会重叠。
p1到p3的距离是15px.
margin负值的问题？
margin-top和margin-left负值，元素向上，向左移动。
margin-right和margin-bottom负值，右侧元素左移、下方元素上移，自身不受影响。
BFC理解与应用？
Block format context,块级格式化上下文。
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。
形成BFC的常见条件
float不是none,position是absolute或fixed，overflow不是visible，display是flex、inline-block等
float布局问题，以及clearfix：
如何实现圣杯布局和双飞翼布局？
两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。
主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容，在给这个中间的div设置margin-left和margin-right
————————————————
版权声明：本文为CSDN博主「webchang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43974265/article/details/115427185
手写clearfix
.clearfix: after {
content:'';
display: table;
clear: both;
}
.clearfix {
zoom:1;
}flex画色子：
flex实现一个三点的色子？
absolute和relative分别依据什么定位？
relative依据自身定位，absolute根据最近一层的定位元素定位。常用于菜单下拉等地方。fixed固定定位，常用于弹窗等。
居中对齐有哪些实现方式？
inline元素：line-height的值等于height
absolute元素：top: 50%+margin-top负值
absolute: transform(-50%,-50%)
absolute元素： top,left,bottom,right=0+margin:auto
line-height的继承问题？
具体数值，如：30px就继承该值
比例，如2/1.5，继承该比例(元素自己的行高乘以比例)
百分比，如200%，继承计算出来的值，直接乘以200%(先计算被继承者的font-size*百分比，再继承)
rem是什么？
px,绝对长度单位，最常用
em,相对长度单位，相对于父元素，不常用
rem，相对长度单位相对于根元素（HTML元素），常用于响应式布局
如何实现响应式？
media-query，根据不同的屏幕宽度设置根元素的font-size
rem基于根元素的相对单位
rem的弊端：“阶梯”性
网页视口尺寸：
window.screen.height //屏幕高度
window.innerHeight // 网页视口高度
document.body.clientHeight // body高度
vh网页视口高度的1/100
vw网页视口宽度的1/100
vmax取两者（vh和vw）最大值；vmin取两者最值
关于css3动画？