HTML

1.如何理解HTML语义化

  • 让人更容易读懂（增加代码可读性）
  • 让搜索引擎更容易读懂（SEO）

2.块元素&内联元素

  • display：block/table；有div h1 table ul ol p
  • display：inline/inline-block；有span img input button等

CSS布局

1.盒模型宽度计算问题

如下代码，请问div1的offsetWidth是多大？

  1. <style type="text/css">
  2.     #div1{
  3.         width: 100px;
  4.         padding:10px;
  5.         border:1px solid #ccc;
  6.     Ï    margin:10px;
  7.     }
  8. </style>
  9. <div id="div1"></div>

解题技巧：

offsetWidth=(内容宽度+内边距+边框)，无外边距

答案：122px

补充：如果让offsetWidth等于100px该如何做？

做法：box-sizing:border-box;

2.margin纵向重叠问题

如下代码，AAA和BBB之间的距离是多少？

  1. <style>
  2.   p{
  3.     font-size:16px;
  4.     line-height:1;
  5.     margin-top:10px;
  6.     margin-bottom:15px;
  7.   }
  8. </style>
  9. <p>AAA</p>
  10. <p></p>
  11. <p></p>
  12. <p></p>
  13. <p>BBB</p>

解题技巧：

相邻元素的margin-top和margin-bottom会发生重叠

空白内容的<p></p>也会重叠

答案：15px

3.margin负值问题

对margin的top left right bottom设置负值有什么效果？

解题：

  • 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.float布局

如何实现圣杯布局和双飞翼布局

解题技巧

圣杯布局和双飞翼布局的目的

  • 三栏布局，中间一栏最先加载和渲染（内容最重要）
  • 两侧内容固定，中间内容随着宽度自适应
  • 一般用于PC网页

圣杯布局和双飞翼布局的技术总结

  • 使用float布局
  • 两侧使用margin负值，以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖，一个用padding一个用margin

6.flex布局

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-self

定位

1.absolute和relative定位

  • relative依据自身定位
  • absolute依据最近一层的定位元素定位

  • 定位元素

    • absolute relative fixed
    • body

2.居中对齐的实现方式

  • 水平居中

    • inline元素：text-align:center
    • block元素：margin:auto
    • absolute元素：left:50% + margin-left负值

  • 垂直居中

    • inline元素：line-height的值等于height的值
    • absolute元素：top:50% + margin-top负值
    • absolute元素：transform(-50%,-50%)
    • absolute元素：top,left,bottom,right = 0 + margin:auto

图文样式

1.line-height如何继承

  • 写具体数值，如30px，则继承该值
  • 写比例，如2/1.5，则继承该比例
  • 写百分比，如200%，则继承计算出来的值

响应式

1.rem是什么？

rem是一个长度单位

  • px，绝对长度单位，最常用
  • em，相对长度单位，相对于父元素，不常用
  • rem，相对长度单位，相对于根元素，常用于响应式布局

2.响应式布局的常见方案是什么？

  • media-query，根据不同的屏幕宽度设置根元素的font-size
  • rem，基于根元素的相对单位

3.vw/vh

网页视口尺寸

  • window.screen.height //屏幕高度
  • window.innerHeight //网页视口高度
  • document.body.clientHeight //body高度

vh网页视口宽度的1/100

vw网页视口宽度的1/100