HTML
    一、如何理解HTML语义化
    myself:
    语义化提供了一些语义化标签，开发者可以根据页面内容和位置来选择不同标签：
    1、可以使文档结构清晰，利于阅读和维护
    2、更利于浏览器识别
    3、更符合搜索引擎习惯，对seo优化有利。
    答题思路：（1）给开发者提供了什么手段。（2）带来的好处（页面结构清晰，所以给开发者阅读维护代码提供便利、利于搜索引擎识别，有助于seo优化）
    参考：
    思路：直接上一段代码，一边全是div，另一边是结构清晰的语义化标签，直观地进行对比。
    1、如果一段html代码里全是div标签，人看不懂。换成语义化标签后，能清晰地看清页面结构。
    2、搜索引擎读不懂页面内容，但可以认识语义化标签，比如H1主题标签里就是页面重要内容，HTML语义化能让搜索引擎分清楚页面内的主次，这样就利于SEO优化。
    二、哪些元素是块级元素、内联元素
    元素类型
    参考：
    根据元素特点来分类：是否独占一行
    块级元素：display:block 独占一行; h1,p,div,ul,li
    内联元素：display:inline/inline-block 不会换行，挨着排列,直到行尾被迫换 span,button,img,input
    内联块元素可以有自己的宽度和高度，上下margin，也是挨着排。
    CSS
    三、布局
    1、盒模型宽度如何计算
    div的offsetWidth是多少 100 + 102 + 102 + 1*2
    offsetWidth不包括外边距，所以为100 + 102 + 12 = 122px

    1. #div{
    2.     width:100px;
    3.   padding:10px;
    4.   border: 1px solid #ccc;
    5.   margin:10px;
    6. }

    思路：
    考点是什么？
    不同盒模型的特点，width指的内容不一样，标准盒模型的width算的是content width，元素的总宽度要加上content width，margin和padding还有border。怪异盒模型算的是border width，content区的实际大小要出去border，margin还有padding。
    参考： offsetWidth包括了盒子的content width，padding，border，不包括margin外边距
    如果让盒子offsetWidth为100px的话，就把box-sizing设置为border-box
    2、margin纵向重叠

    1. <p>AAA<p>
    2. <p><p>
    3. <p><p>
    4. <p><p>
    5. <p>BBB<p>

    考点：
    （1）相邻元素的margin-top和margin-bottom会发生重叠，取大的那个。
    （2）空标签的外边距会被重叠忽略
    外边距重叠的意义：为了让相邻元素不产生双倍边距。
    解决方案：触发后一个盒子BFC（块级格式上下文）属性，或者在后一个盒子使用clear-fix方法清除浮动
    3、margin负值的问题
    margin负值的影响：
    （1）影响自己：margin-top和margin-left，影响自己，自身产生位移。
    （2）影响别个：margin-bottom和margin-right，影响别人，相邻元素进行位移。影响排列方向后边的元素。
    4、BFC理解应用
    什么是BFC？ 块级格式上下文： 可以让盒子成为一个独立的渲染区域，内部元素的渲染不会影响边界意外的元素。
    触发BFC条件：
    （1）float不是none，hidden用的很多
    （2）position: absolute或者fixed
    （3）overflow不适visible
    5、float布局（圣杯布局，双飞翼布局以及clearfix）
    圣杯布局和双飞翼布局总结：都优先显示中间内容；两侧宽度固定中间宽度随窗口大小变化；圣杯布局父容器使用padding，双飞翼布局使用margin
    （1）圣杯布局（有老外发明）
    特点：中间部分是重点，优先渲染（所以放在两侧栏部分前面）；使用float把左右盒子排列到一行；两侧栏宽度固定，中间部分内容随窗口宽度而变化。
    核心：float，操作父容器padding，中间部分width为100%，左侧利用相对定位移动，右侧使用margin-right负值（改变自身大小，从而能）

    1. <div class='container'>
    2.   // 中间视图优先渲染，放在另外两栏前
    3.   <div class='center colume'></div>
    4.   <div class='left colume'></div>
    5.   <div class='right colume'></div>
    6. <div>
    8. <style>
    9.   .container{
    10.       min-width: 600px;
    11.   }
    12.   .colume{
    13.       float: left
    14.   }
    15.   .center{
    16.     // 宽度变化
    17.       width: 100%
    18.   }
    19.   .left{
    20.     width: 200px;
    21.     //margin-left负值可以将左侧栏往左移动，直到父容器最左侧
    22.       margin-left: -100%;
    23.     //利用相对定位（根据自身定位），可以将左侧栏移到最左侧
    24.     position: relative;
    25.     // 相对定位，相对自己的边框定位
    26.     right: 200px; // 和left: -200px一个效果
    27.   }
    28.   .right{
    29.       width:100px;
    30.     //margin-right和margin-bottom为负值时，都有一种压缩自身空间的效果，
    31.     //当压缩到自身宽度时，等于不占空间，自然就往上面排列
    32.     //不能使用margin-left负值，这样右侧栏会挤占中间内容空间（单纯的往左侧唯一，和margin-right不一样）
    33.     margin-right: -100px;
    34.   }
    35. <style>

    双飞翼布局（由淘宝团队提出，是对圣杯布局的优化版）
    操作中间容器盒子margin，双飞翼布局更简洁一些
    易错点： 中间容器宽度设为100%，不设置margin，如果设置了左右外边距，会把body撑开

    1. <div class='main col'>
    2.     <div class='inner'>inner box</div>
    3. </div>
    4. <div class='left col'></div>
    5. <div class='right col'></div>
    7. <style>
    8.   .col{
    9.       float:left
    10.   }
    11.   .main{
    12.       width:100%;
    13.     margin: 0 200px;
    14.   }
    15.   .left{
    16.       width:200px;
    17.     margin-left: -100%;
    18.   }
    19.   .right{
    20.       width:200px;
    21.     margin-left:-200px;
    22.   }
    23. </style>

    易错点：left盒子为啥要margin-left为-100%？因为前面有一个宽度为100%的center盒子。
    cleatfix:
    给容器尾部添加一个伪元素来清楚其他元素浮动带来的影响

    1. .clearfix:after{
    2.     content:'';
    3.     display:block;
    4.     clear: both;
    5. }

    6、flex画色子
    flex布局，又叫弹性布局，能快速、响应式地实现各种页面布局。
    常用父容器属性有：
    flex-direction、flex-wrap、justify-content、align-items、flex-flow（flex-direction和flex-wrap的合并写法：row-reverse,wrap）。
    justify-content: space-around（均匀排列盒子，两端盒子外侧间隔是盒子间距一半）、space-evently(均匀排列盒子，盒子间距都相等),space-between（两端对齐，盒子间隔都相等）
    常用子元素属性：
    自身交叉轴排列方式align-self :（优先级大于align-items）
    自身伸缩属性flex-shrink和flex-grow
    flex:1;占满父容器剩余主轴空间。
    四、定位
    1、absolute和relative根据什么定位
    relative：根据自身定位，圣杯布局中左侧栏移动方法。
    position：根据最近一层定位元素定位（relative，absolute，fixed）。
    2、垂直水平居中对齐常用实现方式
    思路：水平居中：margin:0 auto;子元素宽度是否已知
    未知子元素宽高
    （1）flex布局（最方便）
    （2）定位+transform（利用百分比进行位移, top和left设为50%, 再通过transform属性，再手动将子元素调至居中位置）
    （3）定位+margin: auto（外边距浏览器自动计算，top,bottom,left,right都设为零，让子元素实际占满父元素，再让浏览器自动计算外边距，自动水平垂直居中）;
    （4）grid布局
    已知子元素宽高
    （1）定位+margin负值（margin-top和margin-left为子元素宽高一半负值，手动调整子元素位置）

    文字水平垂直居中： 设置line-height和text-align；
    内联元素也可以设置line-height得到垂直居中效果： a、span标签
    五、图文样式
    1、line-height继承问题
    如果父级元素line-height是数字，直接继承；如果是比例，子元素line-height为该比例乘以font-size；
    如果是百分比，则是继承父元素font-size乘以百分比的结果。

    1. <script>
    2.   body{
    3.       font-size: 20px;
    4.     line-height: 200%;
    5.   }
    6.   p{
    7.       font-size: 18px;
    8.   }
    9. </script>
    10. <body>
    11.     <p></p> 
    12.   // p标签最终的line-height为 20 * 200% => 40px
    13. </body>

    六、响应式
    1、rem、em、px对比
    px: 绝对长度；
    em: 相对父级元素的长度单位，在响应式中不常用
    rem: 相对于根元素的长度单位；1rem 等于 html的font-size值
    2、如何实现响应式
    （1）通过media-query来查询屏幕宽度来设置根元素font-size；rem的响应式有阶段性的特点，在某个范围内的屏幕，根元素大小不变。

    1. @media only screen and (max-width: 374px){
    2.     屏幕小于375px，iphone5 (320px)
    3.     html{
    4.         font-size : 86px
    5.     }
    6. }
    8. @media only screen and (min-width: 375px) and (max-width: 413px){
    9.     屏幕于375px - 413px之间，iphone6/7/8 和iphoneX
    10.     html{
    11.         font-size : 100px
    12.     }
    13. }
    15. @media only screen and (min-width: 414px){
    16.     屏幕在414px及之上，iphone6Plus (414px)
    17.     html{
    18.         font-size : 110px
    19.     }
    20. }

    （2）vh和vw可以随时根据视口大小而变化
    七、css3（flex、动画，一般不是重点）
    1、css3动画