css是层叠样式表，它是网页之皮
本文主要内容
1. 块级元素和行内元素
2. 常见css属性
- 宽高
- 边框
- 边距
- display
- font
- 文本
- 颜色
- 单位
- 隐藏/透明
块级元素和行内元素
块级元素：block-level：
- 可以包含其他的块级元素和行内元素；
- 占据了一整行的空间；
- 可以设置宽高属性；
常见的有h1~h6 div form table th tr td ul li dl dt dd p等
行内元素：inline-level：
- 只能包含其他的行内元素和文本；
- 占据了自身宽度的空间(可以和其他行内元素并排）；
- 设置宽高无效；
常见的有 span strong em a img button input label
总结块级元素和行内元素的区别：
1.块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素和文本。
box1包含了h1,但是用span包含box2却不行；
2.块级元素占据一整行，行内元素只占据自己本身。
通过背景色大家可以发现，块级元素会占据整行，行内元素只占据本身。
3.块级元素能设置宽高，行内元素设置宽高无效。
h1和span一样设置了宽高，span不生效。
4.块级元素可以设置上下左右的margin和padding；行内元素可以设置左右的margin和padding，上下margin和padding无效。（但是可以撑开border和背景色却不占用空间）
很显然，上面的h1标签的margin和padding都正常，span标签的左右也是生效的。
常见css属性
宽高
语法：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的写法，有四个数值-上右下左；有两个数值-读两遍，顺序仍然是上右下左；有三个数值-先读上右下，左边的没写就和右边的一样（读第二个数值）；
- display
display属性可以规定元素的类型。display: block; display: inline; 等
display :
- 常见 block table list-item等是块级元素
- 常见 inline inline-table inline-block等是行内元素
- font
对文本字体的设置
- font-size 字体大小
- font-family 字体，最好用审查元素的console里的escape('xx')的方法得到xx的编码写法，用在font-family里。
- font-weight 字体粗细
- line-height 行高
以上属性均可继承
简易写法：font: 字体样式 字体粗细 字体大小/行高 字体;
例：font: italic bold 12px/30px arial;
- 文本
- text-align: 文本的对齐方式，left/center/right/justify（双对齐，不折行）
- text-indent 文本第一行的缩进
- text-decoration: 文本修饰；none（不修饰）；underline（下划线）；overline（上划线）；line-through（穿过线）
- color 文字颜色
- text-transform 改变文字的大小写，none（不改变）；uppercase（变大写）；lowercase（变小写）；
- word-spacing：改变字（单词）的间距。
- letter-spacing：改变字母之间的间距。
- 颜色
颜色有几种写法：
- 单词
- 十六进制表示，用photoshop吸取颜色。
- rgb
- rgbo
单位
px：固定单位像素
百分比：相对于父元素大小
em：相对于父元素字体大小，1em就是父元素字体的100%大小。
rem：相对于根元素字体大小隐藏/透明
- opacity opacity: 0; 此时透明度为0；整体彻底的透明。
- visibility: hidden; 和上面的类似。
- display: none; 消失，还不占地方。
- background: rgbo(0,0,0,0.2); 只是背景色透明。
