ccs布局

盒模型宽度计算

1. offsetWidth = (内容宽度 + 内边距 + 边框), 无外边距
2. 如何让offsetWidth为固定宽度, 设置属性box-sizing:border-box

margin纵向重叠问题

1. 相邻元素的margin-top和margin-bottom会发生重叠
2. 空白内容的标签也会重叠

margin 负值问题

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

BFC理解与应用

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

float布局

圣杯布局和双飞翼布局的技术总结
使用float布局
两侧使用margin负值,以便和中间内容横向重叠
防止中间内容被两侧覆盖, 一个用padding 一个用margin

手写clear fix

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