【CSS】盒模型

每个HTML元素都可以看作是一个矩形的盒子，每个盒子都会包含外边距、边框、内边距以及内容，将元素盒子比作现实生活中的纸盒：

• 外边距(margin)相当于盒子与盒子之间的间隙
• 边框(border)相当于盒子纸板的厚度
• 内边距(padding)相当于盒子中装的东西与盒子之间的间隙
• 内容(content)相当于盒子里装的东西

页面的布局一般有两种摆放方式：

• 在正常流中，元素会按照其在HTML文档中的位置从左到右、从上到下按顺序排布
• 脱离正常流，也就是不按顺序来排布，常用的实现方法有浮动和绝对定位

盒模型

盒模型分为两种：W3C盒模型和IE盒模型。两者的不同之处是对元素尺寸的计算方式。

div {
    padding: 10px;
    margin: 10px;
    border: 1px solid #000;
    width:100px;
    height: 40px;
}

W3C盒模型

宽度 = content宽度

content的实际宽度 = width

IE盒模型

宽度 = content宽度 + padding×2 + border×2

content的实际宽度 = width - padding×2 - border×2 = 100 - 10×2 - 1×2 = 78

box-sizing

CSS3中新增了一种能够更改盒模型的属性：box-sizing，它有两个值：

• content-box: 对应W3C盒模型
• border-box：对应IE盒模型

IE盒模型的计算方式也有有利的一面，无论内边距和边框如何改变，都不会影响元素的尺寸，不会打乱整体布局。

盒子的显示类型

css中用display指定盒类型(即框类型)，常用的有block、inline、inline-block、table以及css3中新增的flexbox

HTML元素只有两种默认的盒模型：块级元素和行内元素。其中行内元素不可定义css属性width、height、上下margin和上下padding

css中元素有两种形式：替换元素和非替换元素。替换元素是指元素内容需要引用其它位置的资源或来自用户的输入(即内容不在文档中),常用的替换元素除了img外，还有object、video和表单元素(input、textarea等)等。