前端基础html和css常考面试题知识

如何理解HTML语义化

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

盒模型宽度计算

• offsetWidth =（内容宽度+内边距+边框），无外边距
• box-sizing： border-box

margin纵向重叠问题

• 相邻元素的margin-top和margin-bottom会发生重叠
• 空白的<p></p>也会重叠

margin的负值问题

1. margin-top和margin-left为负值，元素向上、向左移动
2. margin-right为负值，右元素左移，自身不受影响
3. margin-bottom为负值，下方元素上移，自身不受影响

可以理解为margin为正值时向外凸，为负值时向内凹，自动补齐

BFC的理解与应用

1. 是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
2. 形成BFC的常见条件：
   • float不是none
   • position是absolute或fixed
   • overflow不是visible
   • display是flex inline-block等
3. BFC常见的应用： 清除浮动

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

• 使用 float 布局
• 两侧使用 margin 负值，一遍和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用 padding（圣杯），一个用 margin（双飞翼）

手写 clearfix

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

flex布局常用语法

（https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

面试题

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元素： top： 50% + margin-top为负值
  3. absolute元素： transform：teanslate(-50%, -50%)
  4. absolute元素： top，left，bottom，right = 0 + margin： auto

line-height如何继承

p标签的line-height是多少

• 写具体数值，如 30px ,则继承该值
• 写比例， 如2/1.5，则继承该比例
• 写百分比，如200%，则继承计算出来的值（考点）
  所以上面的题line-height为40px

响应式布局的常用方案

方案一

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

方案二

• window.screen.height （屏幕高度）
• window.innerHeight （网页视口高度）
• document.body.clientHeight （body高度）
• vh： 网页视口高度的1/100
• vm： 网页视口宽度的1/100
• vmax：取两者最大值，vmin： 取两者最小值