页面布局 layout
- 块元素在文档流中独占一行，块元素在页面中独占一行
- 默认宽度是父元素的全部（会把父元素撑满）
- 默认高度被内容撑开（子元素）
- 行内元素不会独占页面一行，只占自身大小；
- 行内元素在页面中水平向右排列，如果一行之中不能容纳的下所有行内元素，则元素会换到第二行继续自左向右排列。
- 行内元素默认的高度和宽度都是被内容撑开。
盒子模型（box model）
| 内容区 | content |
| 内边距 | padding |
| 边框 | border |
| 外边框 | margin |
一、内容 content
内容区（content） 元素中的所有子元素和文本内容都在内容区中排列，内容区的大小由 width和height 来决定。
width、height属性用以设置内容区的宽度和高度
二、边框 border
边框（border）边框属于盒子边缘，边框里面属于盒子的内部，出了边框都是盒子的外部，要设置边框至少需要三个样式。
- 边框的颜色 border-width
- 边框的颜色 border-color
- 边框的样式 border-style
1、 border-width 有默认值，一般是3个像素（必须写，会使用各个浏览器的默认值）
border-width可以用来指定四个方向的边框宽度
- 四个值：上、右、下、左（顺时针方向）border- 1px 2px 3px 4px;
- 三个值：上、左右、下 border- 1px 2px 3px
- 两个值：上下、左右 border- 1px 2px
- 一个值：上下左右（四个边） border- 1px
除了border-width 还有一组 border-xxx-width，xxx可以是 top、right、left、bottom，用来单独指定某一个边的宽度
2、 border-color 用来指定边框的颜色，同样可以分别指定四个边的边框，规则和 border-width 相同
border-color 可以省略不写，如果省略了就会自动使用 color的默认值
3、 border-style 指定边框的样式，不可以不设置，因为border-style的默认值是 none（没有）
- solid 实线
- dotted 点状虚线
- dashed 虚线
- double 双实线
border 简写属性：
border 通过 设置该属性可以同时设置边框所有的相关样式，并且没有顺序要求
除了border 之外还有四个 border-xxx
- border-top
- border-right
- border-bottom
- border-left
三、内边距 padding
内容区和边框之间的距离是内边距
一个有四个方向的内边距
- padding-top
- padding-left
- padding-bottom
- padding-left
内边距的设置会影响盒子的大小
背景颜色会延伸到内边距上，内边距默认是透明的 transparent
一个盒子的可见框大小，由内容区、内边距、边框共同组成，所以在计算盒子大小的时候，需要将这三个加到一起计算。
padding 内边距的简写属性，可以同时指定四个方向的内边距。
四、margin 外边距
外边距不会影响可见框的大小，但是外边距影响的是盒子的位置。影响实际占用网页空间的大小。元素有四个方向的外边距：
- margin-top
- margin-left
- margin-right
- margin-bottom
注意：默认情况下设置 margin-right 不会产生任何效果
left 左外边距，设置正值，元素会向右边移动；top 上外边距，设置正值，元素会向下移动
元素在页面中会按照自左向右顺序排列，所以默认情况下如果设置的是 左上，移动的是元素自身。
设置其他 下和右外边距会移动其他元素，把别的元素挤开。margin-top 和 margin-left挤开别人
margin-bottom 下外边距，设置正值，下边的元素会向下移动，如果是负值元素会向相反的方向移动。
简写属性