outline用法和border一样，只不过border会影响页面的布局，
outline不影响页面的布局。outline:10px solid red; outline
不影响可见框的大小。

通常情况下浏览器会给元素设置默认样式，如：ul默认不会靠左顶着
浏览器的边框，设置一个宽和高都是100px的div，左和上都有边距等，
默认的浏览器样式会影响我们的页面布局，通常情况下我们在写页面
时会去掉其默认的样式。

- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding，但是垂直方向padding不影响页面的布局。
- 行内元素可以设置border，垂直方向的border不影响页面的布局。
- 行内元素可以设置margin，垂直方向的margin不影响页面的布局。

相邻的垂直方向会外边距重叠现象。

垂直布局不像水平布局那么麻烦，因为水平布局的宽度是确定的，不同设备的
宽度还不一样，垂直方向的就无限，因为可以出现纵向的滚动条。

- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right

盒模型也叫盒子模型，框模型，英文名是box modle,css将页面中所有
的元素都设置成了一个矩形的盒子，将元素设置为矩形的盒子后，对
页面的布局就是将不同的盒子摆放在不同的位置。

文档流（normal flow），其中网页是一个多层的结构，我们看到的其实是网页
的最上面一层的元素，这些层中，最底下的一层就是我们说的文档流，我们所创
建的元素默认都是在文档流中排列的。

子元素会继承一些父元素的样式，有些是可以被继承的，有些是不可以被继承，
如：color,font-size等是可以被继承，不过backgroud-color等不是被继承的，
如何区分参考zeal手册，如下所示。

像素的单位是px，显示器是有一个一个小的方格组成的，其中一个方格就是1px，
不同屏幕下的像素尺寸是不一样的，屏幕越小越清晰，所以相同的像素在不同的
设备上显示的大小是不同的。
案例：100px,200px