建议大家看到以下的题目时，遇到不会的不要立马去查答案，先思考一下，这个问题是下考察你哪个知识点，你没想出知识点或者答案可能是你这个知识点没掌握好
html
- 如何理解HTML语义化
p ul li h1 和 div 都可以实现一样的图文样式，
但是用p ui h1 这样的标签我们能一下子就看懂代码哪行代表的什么东西，还有文章的结构，比较易懂，
对浏览器搜索引擎来说的话，在它拿到这段代码的时候，都是div的话它是搞不清楚这些代码讲得什么的，
但是拿到具有语义化的代码的话，搜索引擎就能搞明白这些代码的主次关系，能把这些结果反馈给搜索页展示出来
语义化优点：让人更容易读懂（增加代码可读性），让搜索引擎更容易读懂（SEO），
- 默认情况下，哪些HTML标签是块级元素，哪些是内联元素？
块级元素：display：block/table；有div，h1，h2，table，ul，ol，p等；独占一行
内联元素：display：inline/inline-block（行内块）；有span，img，input，button等等，不会独占一行，会挨着排直到浏览器的边缘换行为止
css
1. 布局
2. 定位
3. 图文样式
4. 响应式
5. css3
布局：
- 盒子模型的宽度如何计算？
如下代码，请问div1的offsetWidth是多大？
<style>
#div1{
width:100px;
paddig:10px;
border:1px solid #ccc;
margin:10px
}
</style>
<div id="div1"></div>
---->
首先我们要知道offetWidth是什么东西，offetWidth = （内容宽度 + 内边距+ 边框），无外边距；document.getElementById('div1').offsetWidth
100+10*2+1*2 = 122px
补充问题:如果让offetWidth等于100，我们该如何做？
在内部加一个box-sizing：border-box；代表我们的100px包括宽，border，padding，同时内容会缩小，但整体是100px宽度
- margin纵向重叠的问题？
// 如下代码，AAA和BBB之间的距离是多少？
<style>
p{
font-size:16px;
line-height:1;
margin-top:10px;
margin-bottom:15px;
}
</style>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
---->
1 相邻元素的margin会发生重叠
2 空内容的标签<p></p>也会重叠
答案：15px
- margin负值的问题？magin-top,margin-bottom,margin-left,margin-right设置负值的话会怎么样呢？
左上会往相反的方向移动，右下自身不受影响，旁边的元素朝自己移动
margi-top为负值，就会向上移动
margin-left为负值就会向左移动
margin-right为负值，自身不受影响，右侧元素左移，而自身元素在外界看来变小了甚至可以和右侧元素重叠
margin-bottom为负值，自身不受影响，下方的元素向上移
- BFC理解和应用？
（一）定义优势：
1.BFC块级格式上下文
2.一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
（二）形成BFC的常见条件
1.float不是none
2.position不是absolute或者fixed
3.overflow不是visible
4.display是flex，inline-block等
（三）BFC常见应用
清除浮动（overflow：hidden 可以触发元素BFC）
例子：
<div class="container bfc">
<img src="....." class="left"></img>
<p class='bfc'>wenzizzzzzzzzzz</p>
</div>
<style>
.container{
background-color:#dfdfssf;
}
.left{
float:left;
}
.bfc{
}
<style>
以上代码图片会脱离标准流，不在container内，
这个时候我们给.bfc加一个overflow：hidden的样式，这样就触发了BFC；
这里面因为图片浮动脱离了标准流，
导致div的结构被破坏，这时候我们给父级盒子div以及内部的文字加上
触发BFC的代码就可实现我们要的布局
- float布局的问题圣杯布局和双飞翼布局？以及手写clearfix？
（一）圣杯布局和双飞翼布局的目的：
1.三栏布局，中间一栏最先加载和渲染（内容最重要）
2.两侧内容固定，中间内容随着宽度自适应
3.一般在pc端
（二）圣杯布局和双飞翼布局的技术总结：
1.使用float布局
2.两侧使用margin负值，以便和中间内容横向重叠
3.防止中间内容被两侧覆盖，圣杯布局用padding，双飞翼布局用margin
圣杯布局：
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
<style type="text/css">
body {
min-width: 550px;
}
// 头部
#header {
text-align: center;
background-color: #f1f1f1;
}
// 底部
#footer {
clear：both 因为container中的column浮动了，所以要清浮动，不过也可以给父级盒子写一个clearfix代替
text-align: center;
background-color: #f1f1f1;
}
// 然后我们再看看中间是怎么写的
#container {
padding-left: 200px;（先把左侧的宽度padding出去）
padding-right: 150px;（先把右侧的宽度padding出去）
}
#container .column {
float: left; //先浮动
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
background-color: yellow;
width: 200px;
margin-left: -100%; //向左移动container的宽度值，这里是浮动的，而且有padding值压缩了，所以只能被挤到和center一行
position: relative;// 再相对自身移动自己的宽度
right: 200px;// 恰好把父元素的padding宽度占满
}
#right {
background-color: red;
width: 150px;
margin-right: -150px;// margin-right负值自身不受影响，能把后面的元素挤上来，在外界看来center变小了，所以这里不用相对于自身定位
}
</style>
手写clearfix:
/* 手写 clearfix 放在浮动的父级盒子上*/
.clearfix:after {
content: '';
display: table;
clear: both;
}
兼容IE低版本：
clearfix{
*zoom：1
}
-
flex画三点色子 常用语法回顾：
1.flex-direction（主轴方向：横向还是纵向） 2.justify-content(主轴对齐方式) 3.align-items（其他轴的对齐方式） 3.flex-wrap（换不换行） 4.align-self（子元素在其他轴的对齐方式）
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex; // 首先要flex
justify-content: space-between;// 设置横轴对齐方式
}
.item {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2) {
align-self: center;// 设置第二个元素在纵轴居中
}
.item:nth-child(3) {
align-self: flex-end;// 设置第三个元素在纵轴末端
}
</style>
定位：
- absolute和relative分别依据什么定位？
relative依据自身定位，对外界没有影响
absolute依据最近一层的定位元素定位，往父元素找定位元素：absolute，relative，fixed，body
- 居中对齐有哪些方式？
水平居中：
1.inline元素：text-align：center
2.block元素：margin:auto
3.absolute元素：left：50% + margin-left:负自身宽度值 （向右移动父元素宽度的一半，再向左移动自身的一半宽度）
垂直居中：
1.inline元素：line-height的值等于height的值
2.absolute元素：top50% + margin-top负自身高度值
3.absolute元素：left: 50%;top: 50%;transform（-50%，-50%）（先相对于父元素定位，然后再相对于自身移动半个高度和宽度，兼容性不是很强，老项目hold不住，不需要知道子元素宽高）
4.absolute元素：top，left，bottom，right=0；margin：auto（兼容性比较好；不需要知道子元素宽高）
图文样式：
- line-height如何继承（3种情况）？
// 如下代码，p标签的行高将会是多少？
<style>
body{
font-size：20px；
// line-height：24px；情况1：块级元素p会直接继承这里的line-height，所以是24
// line-height：1.5；情况2：块级元素会以自身高度*1.5得到自己的line-height为16*1.5=24px
line-height：200%；//情况3：这里body是20 200%的话就是20*2，所以p的行高是40
}
p{
font-size:16px
}
</style>
<body>
<p>AAA</p>
</body>
// 块级元素p标签本身没有行高，会继承自己的父元素
响应式：
- rem是什么
rem是一个长度单位
px：绝对长度单位，最常用
em：相对长度单位，相对于父元素，不常用
rem：相对长度单位，相对于根元素，常用于响应式布局
html{
font-size：100px；
}
div{
font-size:0.16rem;//这里通过计算得知100*0.16 = 16px
width：2rem；// 2*100 = 200px 宽度200
}
- 如何实现响应式/响应式布局的常见方案是什么？
响应式布局的常用方案
media-query：媒体查询,根据不同的屏幕宽度设置根元素font-size
rem:基于根元素的相对单位
一般也就在全局设置一下
<style type="text/css">
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;// 在全局上设置文字都是0.16rem*iphone x的100 = 16px
}
#div1 {
width: 1rem;
background-color: #ccc;
}
</style>
- 响应式vw/vh的用法 1.rem的弊端
具有阶梯性，如果需要细分很多屏幕的话，media-query要写的太多了，很麻烦。
2.网页视口尺寸
window.screen.height // 屏幕高度（打开手机，亮的部分都是）
window.innerHeight //网页视口高度（把我们浏览器的头部工具栏和底部删掉，中间部分就是，浏览器里可以显示网页的高度）
document.body.clientHeight //body高度（页面内容的高度）
3.vw/vh
vh：网页视口高度的1/100
vw：网页视口宽度的1/100
vmax取两者（vh/vw）最大值；vmin取两者最小值 （在不知道宽度和高度谁大谁小的时候，可以拿这个来做一个判断取最小值还是最大值）
window.innerHeight === 100vh
window.innnerWidth === 100vw
css3
- 关于css3动画
