本文主要内容

块级元素：block-level：

行内元素：inline-level：

总结块级元素和行内元素的区别：
1.块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素和文本。

1.png

box1包含了h1,但是用span包含box2却不行；

2.块级元素占据一整行，行内元素只占据自己本身。

2.png

通过背景色大家可以发现，块级元素会占据整行，行内元素只占据本身。

3.块级元素能设置宽高，行内元素设置宽高无效。

3.png

h1和span一样设置了宽高，span不生效。

4.块级元素可以设置上下左右的margin和padding；行内元素可以设置左右的margin和padding，上下margin和padding无效。（但是可以撑开border和背景色却不占用空间）

x.png

s.png

很显然，上面的h1标签的margin和padding都正常，span标签的左右也是生效的。

宽高
语法：width: xxx; height: xxx;
注意：宽高属性只能用于块级元素，行内元素设置宽高无效。
边框
语法：border: 边框宽度边框形状边框颜色;
例： border: 1px dotted red;
例子是1px宽的点状的红色的边框
边框圆角，border-radius 上右下左的顺序可以单独设置。
注意：这是把四周的边框都画好，也可以单独设置，比如border-top:xxxxxxxxx;
border-radius如果大于这个盒模型的半径那么画出来的是一个圆形。
边距

QQ20161209-0@2x.png

一个盒子由margin（外边距）、border（边框）、padding（内编剧）、宽高（width、height）组成。

margin／padding 可以是数字或者百分比，百分比是对照父元素。有四个方向的值。对应上右下左。padding:10px 10px 10px 10px;
margin居中设置左右margin是auto，就可以把该盒模型居中。
ps: padding和margin的写法，有四个数值-上右下左；有两个数值-读两遍，顺序仍然是上右下左；有三个数值-先读上右下，左边的没写就和右边的一样（读第二个数值）；

font-size 字体大小
font-family 字体，最好用审查元素的console里的escape('xx')的方法得到xx的编码写法，用在font-family里。
font-weight 字体粗细
line-height 行高
以上属性均可继承
简易写法：font: 字体样式字体粗细字体大小/行高字体;
例：font: italic bold 12px/30px arial;