// offsetWidth:(内容宽度+内边距+边框)，无外边距
// box-sizing:border-box 盒模型总宽度 设置是多少就是多少，包括内容宽度+内边距+边框
// 相邻元素的margin-top和margin-bottom会发生重叠
// 空白内容的<p></p>也会重叠
// margin-top和margin-left负值,元素向上、向左移动
// margin-right负值,右侧元素左移,自身不受影响
// margin-bottom负值，下方元素上移,自身不受影响
// BFC理解与应用：Block format context ,块级格式化上下文
// 一块独立渲染区域 ，内部元素的渲染不会影响边界以外的元素
// 形成BFC的常见条件：
// ◆float 不是none
// ◆position 是absolute或fixed
// ◆overflow 不是visible
// ◆display是flex inline-block等
// BFC的常见应用
// ◆清除浮动
// 圣杯布局和双飞翼布局的技术总结
// ◆使用float布局
// ◆两侧使用margin负值,以便和中间内容横向重叠
// ◆防止中间内容被两侧覆盖, -个用padding - -个用margin
// flex： align-self：设置子元素的对齐方式
// .xxx:nth-child(1){
// align-self:flex-ceter
// align-self:flex-end
// }
// 水平居中
// ◆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
// line-height如何继承
// ◆写具体数值,如30px,则继承该值(比较好理解)
// ◆写比例，如2/ 1.5 ,则继承该比例(比较好理解)
// ◆写百分比,如200% ,则继承计算出来的值(考点)
