HTML面试题

  1. 如何理解HTML语义化
    1. 让人更加容易读懂（增强代码可读性），让搜索引擎更容易读懂（SEO即搜索引擎优化）
    2. 对开发者的好处：使⽤了语义化标签的程序，可读性明显增强，开发者可以比容易和清晰地看出⽹⻚的结构；这也更利于整个开发团队的协作开发和后续维护工作
    3. 对机器/程序的好处：带有语义的网页代码在⽂字类应用上的表现⼒丰富，利于搜索引擎爬⾍程序来爬取和提取出有效的信息；语义化标签还⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录等，方便特殊人群无障碍的使用这些网页程序。
  2. 默认情况下，哪些HTML标签是块级元素，哪些是内联元素？
    1. 块级元素，独占一行：display:block/table；有div h1 h2 table ul ol p等
    2. 内联元素，一行之内往后挤：display:inline/inline-block；有span img input button等

CSS面试题

布局

  1. 盒子模型的宽度如何计算？image.png
    1. offsetWidth = （内容宽度width +内边距padding +边框border），无外边距margin
    2. 答案：100 + 102 + 12 =122px
    3. 如果让offsetWidth等于100px，要使用box-sizing:border-box
  2. margin纵向重叠的问题image.png
    1. 相邻元素的margin-top和margin-bottom会发生重叠
    2. 空白内容的

      也会重叠
    3. 答案：15px 即AAA的margin-bottom
  3. 对margin的top left right bottom设置负值，有何效果？
    1. top和left为负值时，元素向上、向左移动
    2. right负值，右侧元素左移，自身不受影响
    3. bottom负值，下方元素上移，自身不受影响
  4. 什么是BFC？如何应用？
    1. Block format context 块级格式化上下文
    2. 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
    3. 触发方式/哪些元素会生成BFC
      1. 根元素，即HTML标签
      2. 浮动元素：float值为left或right，不是none
      3. 定位元素：position为fixed或absolute的元素
      4. overflow值不为visible，为auto、scroll、hidden的元素
      5. display值为inline-block、table-cell、table-caption、flex、inline-flex的元素
    4. BFC常见应用
      1. 阻止元素被浮动元素覆盖
      2. 可以包含浮动元素
      3. 阻止因浏览器四舍五入造成的多列布局换行的情况
      4. 阻止相邻元素margin合并
  5. 如何实现圣杯布局和双飞翼布局
    1. 目的：
      1. 三栏布局，中间一栏最先加载和渲染（内容最重要）
      2. 两栏内容固定，中间内容随着宽度自适应。
      3. 一般用于PC网页
    2. 技术总结：
      1. 使用float布局
      2. 两侧使用margin负值，以便和中间内容横向重叠
      3. 防止中间内容被两侧覆盖，圣杯布局用padding，双飞翼布局用margin
  6. 手写clearfix
    1. image.png

  7. flex实现一个三点的骰子

    1. 常用语法：
      1. flex-direction 主轴方向
      2. justify-content 主轴对齐方式
      3. align-items 交叉轴（主轴垂直方向）对齐方式
      4. flex-wrap 换行
      5. align-self 子元素在交叉轴对齐方式

        定位

  8. absolute和relative分别依据什么定位？

    1. relative根据自身定位
    2. absolute根据最近一层的定位元素定位，一直向外找，找不到的话就依据body定位
    3. 定位元素：absolute relative fixed body

  9. 局中对齐有哪些方式？

    1. 水平居中
      1. inline元素：text-align: center
      2. block元素：margin: auto
      3. absolute元素：left : 50% 并且 margin-left为负值
    2. 垂直居中
      1. inline元素：line-height的值等于height的值
      2. absolute元素：top : 50% 并且 margin-top为负值
      3. absolute元素：left: 50%; top: 50%;transform: translate(-50%,-50%); 这个有浏览器兼容性问题
      4. absolute元素：top,left,bottom,right = 0 并且 margin: auto

        图文样式

  10. line-height的继承问题image.png

    1. 答案：40px
    2. 如果是具体数值，比如30px，则继承该值
    3. 如果写比例，比如1.5，则继承该比例，用自身乘这个比例
    4. 如果写百分比，比如200%，则继承body计算出来的值

      响应式

  11. rem是什么？

    1. px是绝对长度单位，最常用
    2. em是相对长度单位，相对于父元素，不常用
    3. rem是相对长度单位，相对于根元素，常用于响应式布局
  12. 如何实现响应式？
    1. 媒体查询（media-query），根据不同的屏幕宽度设置根元素的font-size
    2. 利用rem，基于根元素的相对单位、
  13. vw/vh相关
    1. rem的弊端：媒体查询写起来的“阶梯型”image.png
    2. 网页视口尺寸
      1. 屏幕高度：window.screen.height。与机器尺寸有关
      2. 网页视口高度：window.innerHeight。在真机中，要砍掉浏览器的上下条。
      3. body高度：document.body.clientHeight。与内容多少有关
    3. vh：网页视口高度的百分之一

vw：网页视口宽度的百分之一
vmax：取两者最大值
vmin：取两者最小值

CSS3动画

  1. 不是面试重点，除非面试的是一个专门做动画的职位
  2. 看文档即可