1、标签模式（块级、行内）

行内元素：span、a、b（加粗）、s、del、strong、em、i（斜体）、ins（下划线）等

块级元素：p、div、ul、ol、li、h1-h6 等

display标签（CSS标签）

display:none---------不被显示，直接移除

visibility:hidden-----------只是不显示，但是占用页面空间

display:inline----------变为行内元素，不能设置宽高，只能通过内容来撑开宽高，只能设置左右边距

display:block----------变为块级元素，可以设置宽高，能设置上下左右边距

display:inline-block-------成为行内标签，但是能设置宽高，只能设置左右边距

2、颜色表示

3种表示方法：

顺序：         红          绿         蓝

rgb(0-255，0-255，0-255)

rgb（2%，43%，24%）

（常用）十六进制法：#XX XX XX

3、CSS长度单位

PC端：更多的用到px

移动端：更多用到em，1em=当前的字体大小。例如：当前元素的字体大小为16px，则1em=16px

4、字体类型

font-family:“宋体”，“黑体”，“Lucida Console”

注意：字体类型如果是中文要加“”（双引号），英文可以不用加，多字体用英文逗号隔开，并且此时英文要用双引号，执行顺序从左向右，如果页面支持第一个字体则执行，不支持则依次执行。

为了避免跨国打开网页，中文会造成一些错误，所以应把中文换成Unicode编码，在网页审查页面的console中，输出escape（“黑体”），回车，就可以生成一行代码%u9ED1%u4F53，将%换为\。

4.1、衬线体

•西方国家字母体系分为两类：serif（衬线体）以及sans  serif（非衬线体）

•serif是有衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。相反的，sans  serif就没有这些额外的装饰，而且笔画的粗细差不多。

为了安全起见，在设置字体的最后，都加上sans  serif，防止前面的字体页面都无法识别，最后随机在非衬线体集合中找一个字体。

5、字体加粗

font-weight:

可用属性值：normal、bold、bolder、lighter、100-900（100的整数倍），有继承性。

400：normal                          700：bold

字体的加粗和字体类型有关，有的字体只有两种粗细程度，那么normal到bold   和到bolder是一样的效果。

6、字体风格

font-style：

设置斜体、倾斜或正常字体

normal

italic（斜体，如果此字体没有斜体样式，则显示为normal）

oblique（让文字倾斜，不管文字有没有斜体，都能倾斜）

7、综合设置字体

font:font-style   font-weight    font-size/line-height    font-family

font:oblique 700  20px  "微软雅黑Light";

注意：中间使用空格隔开，inline-height 是行高，其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

8、文本布局

8.1、letter-spacing：字符间距

letter-spacing:10px;

8.2、word-spacing：单词间距

word-spacing:10px;

此设置只对英文单词有效，对中文字之间没有影响，但是如果中文字之间有空格，那么会把空格设置位10px宽度。

8.3、line-height 行高

行高一般用来调整垂直位置。比如垂直居中，

还有vertical-align：top   or  middle  or  bottom,但是有时会失效，所以一般采用行高调整。

line-height:1.5em(1.5倍当前！！文字像素大小)   or   

line-height:1.5    (同上)                                     or 

line-height:150%                                     or

line-height:20px

8.4、文本装饰

text-decoration:

-none  不显示任何装饰

-underline 加上下划线

-linethrough   删除线

-overline    上划线

8.5、text-align文本内容水平对齐方式

text-align:

-left   （默认值）

-right   

-center

8.6、text-indent首行缩进

只能设置于块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用em作为设置单位。

8.7、white-space:空白符处理

normal：正常显示，如果宽度不够，空白处后的内容折行显示。

nowrap：即使超过了盒子的宽度，文本也不换行显示

pre：代码中文本什么样式，就显示成什么样式。

8.8、word-break自动换行

normal: 浏览器默认的换行规则，一般都是不打断单词

break-all：允许在单词内换行，打断单词进行换行，充分利用行的空间。占满，不管单词的完整性。

keep-all：只能在半角空格或连字符处换行。

8.9、文本（字母大小写）转换

概念：文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

text-transform:uppercase;-------------所有字母变成大写

text-transform:lowercase;---------------所有字母变成小写

text-transform:capitalize;------------------每个单词首字母大写

8.10、text-shadow文本阴影属性

text-shadow:2px 2px red;--------------文本阴影距离原文本的宽 高 颜色

9、盒子模型

概念：HTML页面中的元素看作是一个矩形的盒子，每个盒子都是由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

10、background背景

background-color:red;  ----------------背景颜色

background-image:url('图片的相对路径或绝对路径，若是绝对路径，则需要设置宽高'); -----------背景图片

background-repeat:repeat-x  or  repeat-y  or  no repeat ;       ---------------------背景图片水平平铺 或 垂直平铺  或  不平铺

bcakground-position:center; ------------------图像的位置居中，还有其他属性值：top or  bottom ,right  or  left 。并且可以两个方位相合并例如：top  right。

background-attachment:scroll;--------------------背景图片随页面其余部分滚动，是默认值，其他属性值：fixed（背景不动，固定），inherit（从父元素继承）

简写：

background:#ffffff   url('img_tree.png')   no-repeat   fixed  right top;

属性值顺序：background-color   background-image   background-repeat   background-attachment    background-position