CSS学习笔记：盒模型
盒模型
CSS假定每个元素都会生成一个或多个矩形框。每个框中心都有一个内容区，这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的，原因是它们的宽度可以设置为0。
- 可以用多种属性设置各外边距、边框和内边距。
- 内容的背景也会应用到内边距
- 外边距通常是透明的，从中可以看到父元素的背景
内边距不能是负值，但外边距可以。
边框的颜色如果没有设置，那么将取元素内容的前景色。
- 如果边框样式有某种缝隙，则可以通过这些缝隙看到元素的背景。
- 边框的宽度绝对不能为负。
对于不同类型的元素格式化时存在着差别。块级元素的处理不同于行内元素，而浮动元素和定位元素也分别有各自不同的表现。
包含块
每个元素都相对于其包含块摆放，包含块就是一个元素的布局上下文。
包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界构成。
<body>
<div>
<p>lalalalap>
div>
body>在这个例子中，p元素的包含块是div元素，类似的，div的包含块是body元素。
因此，p的布局依赖于div的布局，而div的布局则依赖于body的布局。
重要概念
正常流：
这是指正常西方语言文本从左向右、从上向下显示，这也是我们熟悉的传统HTML文档的文本布局。
大多数元素都在都在正常流中，要让一个元素不在正常流中，唯一的方法就是使之成为浮动或定位元素。非替换元素：
如果元素的内容包含在文档中，则为非替换元素。例如，如果一个段落的文本内容都放在该元素本身之内，这个段落就是一个非替换元素。替换元素：
CSS 里，替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。
典型的可替换元素有、