怎么理解html语义化？
- 让人更容易读懂
- 让搜索引擎更容易读懂（机器不知道哪个是标题哪个是段落， 只能通过标签不同去判断）
哪些是块级元素、哪些是内联元素？
block 元素： div h1 h2... table ul ol p 等 inline 元素： span input button img 等
布局
offsetWidth、clientWidth、scrollWidth
- offsetwidth (内容宽度+内边距+边框)
- clientWidth (内容宽度+内边距)
- scrollWidth (内容宽度+内边距+scrollLeft)
margin纵向的重叠
pA到pB的距离是多少？
p{
margin-top: 10px;
margin-bottom: 20;
}
<p>aaaa</p>
<p></p>
<p></p>
<p></p>
<p>bbbb</p>
答案：20px
解读： margin重叠很多人都知道， 可能有人会算出， 80px; 关键在于空标签margin合并， 几个空标签只占据20px的margin， 又有margin重叠的原因所有就只有20px;
margin负值的问题
BFC的理解和应用
block format contact 块级格式化上下文
一块独立渲染的区域， 内部渲染不会影响边界外的元素
常见形成BFC的条件
- float不是none
- position 是absolute 或 fixed
- overflow不是visible
- disabled： flex 或 inline-block
常见的应用
- 清除浮动
手写clearfix
.clearfix::after{
context: '';
disabled: table;
clear: both;
}
定位
absolute和relative分别依据什么来定位？
- absolute 是根据最近一层有定位的父级来定位
- relative 是根据自身定位
居中对齐有哪些方式？
水平
- inline 元素 text-align: center
- block 元素 margin：0 auto
- absolute 元素 left 50% transform: translateX(-50%)
- absolute 元素 left 0; right 0; margin: auto
垂直居中
- inline 元素 line-height
- absolute 元素 top 50% translateY(-50%)
- absolute 元素 top 0; bottom 0; margin auto
line-height 继承问题
有个坑：
- 20px 继承 20px
- 2 继承 2
- 200% 继承 200%*font-size （这是个坑）
html: {
font-size: 16px;
line-height: 200%;
}
div: {
font-size: 12px;
// 继承的line-height = 200% * 16px
}
响应式
rem是什么？
rem是一个长度单位。
（相关补充）
px 是一个固定单位
em 是一个相对单位， 相对父级font-size
rem 是一个相对单位， 相对html font-size
vh = window.innerHeight
vw = window.innerWidth
vmax = Math.max(vh,vw)
vmin = Math.min(vh,vw)
media-query
