CSS盒模型

box model

• Margin

• Border

• Padding

• Content

width

指定content box 的宽度         
百分数相对于父容器(包含块)的content box的宽度     
只有包含块的高度不依赖该元素时，百分比宽度才生效

padding

• 内边距

margin

• 外边距

• 相邻的两个盒子margin，会发生折叠

• margin可以为负值

box-sizing

• 改变盒模型计算方式

• content-box

• border-box //更符合

overflow

• 溢出控制

• 取值：visible hidden scroll auto

• 初始值：visible

视觉格式化模型

视口(Viewport)

浏览器的可视区域

块级元素(block-level)

会被格式化块状元素
例如p,div,section等
将display设置为block，list-item, table    使元素变为块级元素

行级元素(inline-level)

盒子的生成

• 每一个块级元素生成一个主块级盒(principal block-level box)用它来包含子级盒

• 每一个行级元素生成一个行级盒，行级盒分布于多行

Box Model-revisited

• 行级盒 margin-top, margin-bottm, padding-top不会产生效果

• 行级盒 padding-bottom不会影响布局

块级盒子的子盒子的生成

• 块级盒子可以包含多个子块级盒子

• 也可以包含多个行级盒子

• 不在行级元素里面的文字，会生成匿名行级盒比如,<p>Some <em>text</em></p>中的some

• 块级盒子中不能同时包含块级和行级盒子。遇到这种情况，会生成匿名块级盒来包含行级盒。比如<div><h1>标题</h1><span>2017-1-10</span></div>

行级盒子的子盒子生成

• 行级盒子内可以包含行级盒子

• 行级盒子包含块级盒子时，会被块级拆成两个行级盒子，这两个盒子又分别被匿名k块级盒包含 <span>aaaa<h2>22222</h2><strong>tttttt</strong></span>

display属性

• block 生成块级盒

• inline 生成行级盒

• inline-block 生成行级盒，为其内容生成块级盒

• none 在排版时将元素忽略

visibility

• 控制元素展示

• 取值：visible hidden collapse

• 初始值：visible

• 排版时会占用位置

Generated Content //多产生盒子，用来存放指定的内容

控制元素
::before 和 ::after
content //需要插入的内容

常规流

• 除了根元素，浮动元素和绝对定位元素外，其他元素都在常规流之内

• 而根元素，浮动和绝对定位元素会脱离常规流

• 常规流中的盒子，属于处于块级格式化上下文，或行级格式化上下文

块级格式化上下文(Block Formatting Context)

• 盒子在容器(包含块)内从上到下一个接一个的放置

• 两个兄弟盒子之间的距离由margin属性决定

• 同一个BFC内垂直margin会合并

• 盒子的左外边缘挨着容器(包含块)的左边

BFC特性

• BFC内的浮动不会影响到BFC外部的元素

• BFC的高度会包含其内的浮动元素

• BFC不会和浮动元素重叠

• BFC可以通过 overflow：hidden 浮动框 绝对定位框 非块级的块容器(inline-block) 等方法创建

行级格式上下文(lnline Formatting Context)

• 盒子一个接一个水平放置

• 盒之间的水平margin，border和padding都有效

• 同一行的盒子所在的矩形区叫行盒(line box)

• 当一个行盒放不下上下文内所有盒子时，会被分到多个垂直折叠的行盒内
  行盒内的水平分布由 text-align 决定

• 如果一个行级块无法分割(单词, inline-block)，该元素会被作为一个整体被决定放在哪一个行盒

浮动(float)

• 浮动元素从常规流中脱离，被漂浮在容器(包含块)的左边或者右边

• 浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒

• 浮动元素不会影响其后面的流内块元素

• 但是浮动元素后面的行级盒子会变短以避开浮动元素

clear

指定元素哪一边不能与之前的浮动框相邻
取值：left right both

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}