HTML部分
1、 如何理解HTML语义化
让人更易懂（增加可读性）
让搜索引擎更容易读懂（SEO）
2、 块状元素&&内联元素
Display：bliock/table;有div h1 h2 table ul ol p 等
Display：inline/inline-block; 有span img input button 等
CSS部分
CSS布局
1、盒模型宽度计算
OffsetWidth = (内容宽度+ 内边距+ 边框)，无外边距
Box-sizing情况下:可以让宽度为整体宽度。
2、 margin纵向值的计算
相邻元素的margin-top 和 margin-bottom会发生重叠（值为最大值）。
空内容的元素会回发生重叠（被忽略即为0）
3、 margin 负值问题
margin-top和margin-left 负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响
4、什么是BFC？如何应用？
BFC: Block format context (块级格式化上下文)
一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件：
- float 不是 none
- position 是absolute 或 fixed
- overflow 不是 visible
- display 是 flex inline-block 等
BFC的常见应用
- 清除浮动
5、如何实现圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的目的
- 三栏布局，中间一栏最先加载和渲染(内容最重要)
- 内侧内容固定，中间内容随宽度自适应
- 一般用于 PC 网页
圣杯布局和双飞翼布局的技术总结
- 使用float布局
- 两侧使用margin的负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding(圣杯) 一个用margin(双飞翼)
6、手写clearfix
.clearfix:after {
content: '';
display: table;
clear: both;
}
/*兼容IE低版本*/
.clearfix {
*zoom: 1;
}
7、flex布局实现一个三点的色子
.box {
display: flex;/* flex布局 */
justify-content: space-between;/*两端对齐*/
}
.item{
/* 背景色、大小、边框等*/
}
.item:nth-chlid(2) {
aligin-self: cneter;/* 第二项居中对齐 */
}
.item:nth-child(3) {
aligin-self: flex-end /* 第三项尾对齐 */
}
CSS定位
1、absolute 和 relative 分别依据什么定位？
- relative依据自身定位
- 依据最近一层的定位元素定位
2、居中对齐有哪些实现方式？
- 水平居中
inline 元素：text-align: center
block 元素：margin：auto
absolute 元素：left:50% +margin-left 负值(宽度的一半)
- 垂直居中
lnline 元素 ：line-height 的值等于 height值
absolute 元素：top50% +margin-top 负值
absolute 元素：transform: translate(50%,50%);
absolute 元素：top,left,bottom,right = 0 +margin: auto
CSS图文样式
line-height 如何继承
- 写具体数值，如30px,则继承该值
- 写比例，如2，则继承该比例
- *写百分比，如200%，则继承计算出来的值
CSS响应式
1、rem是什么？
rem是一个长度单位
- px,觉对长度单位，最长用
- em,相对长度单位，相对于父元素，不常用
- rem,相对常用单位，相对于根元素，常用与响应式布局
2、响应式布局的常见方案？
- media-query(@media only screen and (min-width: xxxpx)),根据不同的屏幕宽度设置根源素font-size
- rem,基于根源素的相对定位
3、vw-vh
- vh 网页视口高度的1/100
- vw 网易视口高度的1/100
- vmax 取两者最大值；v-min 取两者最小值
- window.screen.height //屏幕高度
- window.innerHeight // 网页视口高度
- document.body.clientHeight // body高度
