Question

布局

盒子模型的宽度如何计算

答案：offsetWidth = 122px = 内容宽度 + 内边距 + 边框

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

答案：box-sizing: border-box

margin 纵向重叠的问题

• 相邻元素的 margin-top 和 margin-bottom 会发生重叠
• 空白内容的 也会重叠

答案：15px

margin 负值的问题

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

BFC 理解和应用

块级格式化上下文，一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

形成 BFC 的常见条件：

• float 不是 none
• position 是 absolute 或 fixed
• overflow 不是 visible
• display 是 flex、inline-block 等

BFC 的常见应用

• 清除浮动

float 布局的问题，以及手写 clearfix

圣杯布局和双飞翼布局：

• 三栏布局，中间一栏最先加载和渲染
• 两侧内容固定，中间内容随宽度自适应

技术实现：

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

flex 画色子

定位

absolute 和 relative 分别依据什么定位

• relative 依据自身定位
• absolute 依据最近一层的定位元素（absolute、relative、fixed、body）定位

居中对齐有哪些实现方式

水平居中：

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

垂直居中：

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

图文样式

line-height 的继承问题

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

响应式

rem 是什么？

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

如何实现响应式

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