1. 非替换元素
请注意，对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由 line-height 属性决定。
替换元素：浏览器根据其标签的元素与属性来判断显示具体的内容。比如：
<img>、<input>、<textarea>不可替换元素：他们将内容直接告诉浏览器，将其显示出来，比如
<p>wanmei.com</p>2. margin和padding
如果边界画一条线，则margin的属于边界外，padding属于边界内
当我们给元素背景色时，margin区域不会被着色，而padding区域会被着色。
当上下两个块元素，一个设置margin-bottom:10px,下面的设置margin-top:20px,两个块元素的距离不是30 而是20。 而padding则是相加的情况
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”
3. 外边距塌陷
定义：块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距
相邻的兄弟姐妹元素
<p style="margin-bottom: 10px;">上面的段落</p> <p style="margin-top: 20px;">下面的段落</p>
两者的边距不是两者和30，而是二者较大的20.
- 块元素与其第一个或者最后一个子元素
<style>
.my-title{
margin:0;
background-color: #808080;
}
.parent{
margin-top:35px;
background-color: #00FF00;
}
.children-first{
margin-top:20px;
margin-bottom:40px;
}
.children-second{
margin-top:20px;
}
</style><div class="my-title">
my title
</div>
<div class="parent">
<div class="children-first">
children
</div>
<div class="children-second">
children
</div>
</div>4. 定位position
position 这个属性决定了元素将如何定位。它的值大概有以下五种：
| position 值 | 如何定位 |
|---|---|
| static | position的默认值。元素将定位到它的正常位置（上文提到过），其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。 |
| relative | 相对定位，相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。 |
| absolute | 绝对定位，相对于最近一级的 定位不是 static 的父元素来进行定位。元素在页面不占据位置。 可以使用 top right bottom left 移动元素位置。 |
| fixed | 绝对定位，相对于浏览器窗口来进行定位。其余和 absolute 一样，相当于一种特殊的 absolute。 |
| inherit | 从父元素继承 position 属性的值。 |
其它
对于块级元素，子元素的宽度默认为父元素的100%，
父元素宽度 = 子元素宽度 + padding + magin当时img这种元素时，不管我们怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。当宽和高设置一个时，另一个则等比例缩放。当宽和高都100%时则铺满这个父元素
同为块元素，脱离文档流时候，以浮动为例当父元素有宽度，子元素没有宽度，子元素浮动后，注意子元素大小当子元素有宽度，父元素没有宽度，子元素浮动后，注意父元素大小
