CSS + HTML相关面试总结

HTML标签语义化

1. 代码可读性。
2. 浏览器更易读懂（SEO）。

块状元素 & 内联元素

1. display: block/table(p/div/h1/ul等);
2. display: inline/inline-block(span/img/b/i等)。

盒模型宽度计算

• offsetWidth = (内容宽度 + 边框 + 内边距) ,无外边距;
• box-sizing: border-box;

margin纵向重叠问题

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

margin负值问题

• margin-top和margin-left负值，元素会向上、向左移动。
• margin-right负值，右侧元素向左移动，自身不受影响。
• margin-bottom负值，下方元素向上移动，自身不受影响。

BFC(Block Format Context)

• 块级格式化上下文
• 一块独立渲染区域，内部的元素渲染不影响边界以外的元素
• BFC形成条件

  float不是none
  position:absolute/fixed
  overflow不是visible
  display:inline-block/flex等

• BFC常见应用，清楚浮动

float布局

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

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

2. 手写clearfix

  .clearfix::after {
    contetn: '';
    display: table;
    clear: both;
  }
  .clearfix {
    *zoom: 1; /* 兼容IE 低版本 */
  }

flex布局

实现三点骰子

 .box {
 display: flex;
 justify-content: space-between;
}
.item:nth-type-of(2) {
  item-self: center;
}
.item:nth-type-of(3){
  item-self: flex-end;
}
<div class="box">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>

居中对齐的实现方式

1. 水平居中

• inline元素：text-aligin: center;
• block元素：margin:out;
• absolute元素：left: 50%; margin-left负值;

2. 垂直居中

• inline元素：line-height = height；
• absolute元素：top: 50%; margin-top负值；
• absolute元素：transform(-50%, -50%);
• absolute元素：left\right\top\bottom = 0;margin:auto;

line-height如何继承

• 具体数值-继承该值
• 比例-继承该比例
• 百分比-继承计算出来的值

rem是什么

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

响应式布局常用方案

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

关于css3动画

animation 和 @keyframes