首先，CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，分别为块级（block）、行内（inline）。
-
块级元素：
< h1>定义最大的标题
< h2>定义副标题
< h3>定义标题
< h4>定义标题
< h5>定义标题
< h6>定义最小的标题
< ul>定义无序列表
< ol>定义有序列表
< li>定义有序列表或无序列表的列表项目
< dl>定义自定义列表
< dd>定义自定义列表中的条目
< dt>定义自定义列表中的项目
< hr>创建一条水平线
< p>定义段落
< table>定义表格
< td>表格中的标准单元格
< th>定义表头单元格
< thead>标签定义表格的表头
< tr>定义表格中的行
-
行内元素：
< a>定义超链接
< b>字体加粗
< span>定义在文档中的行内元素
< img>向网页中插入题图像
< input>输入框
< small>小号字体效果
< br>换行
< big>字体加大加粗
< strong>强调的语气
< select>创建单选或多选菜单
< textarea>定义文本域，多行的文本输入控件
-
行内元素与块级元素的区别：
1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。
2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；
块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；
块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；
行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
-
CSS中可以和不可以继承的属性
一、无继承性的属性
1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性：content、counter-reset、counter-increment
7、轮廓样式属性：outline-style、outline-width、outline-color、outline
8、页面样式属性：size、page-break-before、page-break-after
9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
三、所有元素可以继承的属性
1、元素可见性：visibility
2、光标属性：cursor
四、内联元素可以继承的属性
1、字体系列属性
2、除text-indent、text-align之外的文本系列属性
五、块级元素可以继承的属性
1、text-indent、text-align *
如何让块级元素水平居中？如何让行内元素水平居中?
CSS设置行内元素的水平居中
div{text-align:center} DIV内的行内元素均会水平居中
CSS设置行内元素的垂直居中
div{height:30px; line-height:30px} DIV内的行内元素均会垂直居中
当然，如果既要水平居中又要垂直居中，那么综合一下
div{text-align:center; height:30px; line-height:30px}
CSS设置块级元素的水平居中
div p{margin:0 auto; width:500px} 块级元素p一定要设置宽度，
才能相当于DIV父容器水平居中
CSS设置块级元素的垂直居中
div{width:500px} DIV父容器设置宽度
div p{margin:0 aut0; height:30px; line-height:30px} 块级元素p也可以加个宽度，以达到相对于DIV父容器的水平居中效果 说明：在以后的实际项目中，块级元素的垂直居中布局方式可能会碰到比这个更复杂。
什么叫行内元素？
常见的span、a、lable、strong、b等html标签都是行内元素
默认情况下，行内元素均无法设置宽度、高度、上下方向margin的外边距等
当然，这不是绝对的，通过CSS可以让任何行内元素变成块级元素！比如：
span{display:block} /span这时设置成了块级元素/
什么叫块级元素？
常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素
当然，这也不是绝对的，通过CSS可以让任何块级元素变成行内元素！比如：
h1{display:inline} h1这时设置成了行内元素
-
用 CSS 实现一个三角形
-
单行文本溢出加 ...
-
px, em, rem 有什么区别?
PX特点
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
EM特点
em的值并不是固定的；
em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
-
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem特点
rem是[CSS3]新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是
一个例子：
p {font-size:14px; font-size:.875rem;}
注意：
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
IE无法调整那些使用px作为单位的字体大小;
国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)是相对长度单位，像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
字体单位使用em能支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。
px是绝对单位，不支持IE的缩放。
em是相对单位，网页中的文字能放大和缩小。将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
em有如下特点：
1. em的值并不是固定的;
2. em会继续父级元素的字体大小。
所以我们在写CSS的时候，需要注意：
1. body选择器中声明Font-size=62.5%;(Font-size=63%;用于ie6兼容)
2. 将你的原来的px数值除以10，然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继续#content的字体高而变为了1em=12px。
但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有 其他的解释。
单位pt的说明
在印刷排版中,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。因为我们的显示器 被分割为了一个个的像素，单个像素只能有一种颜色 (为了简化，这里暂不讨论次像素反锯齿技术)，要在屏幕上显示，必须先把以 pt 为单位的长度转换为以像素为单位的长度，这个转换的媒介，就是 DPI (事实上，这里的所谓的 DPI，是操作系统和浏览器中使用的术语，即为 PPI, pixels per inch，和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。
例如，无论在哪个操作系统中，Firefox 浏览器默认的 DPI 都是 96，那么实际上 9pt = 9 * 1/72 * 96 = 12px。
所以，虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”，都不代表物理上的英寸，但这两个单位互相之间是相等的，也就在相乘中约掉了。
那么，真实的物理长度怎么计算呢?请拿出一把尺子，丈量你的显示器的可见宽度 (我这里是 11.2992 英寸)，除以横向分辨率 (我这里是 1024 像素)，得到的就是每个像素的物理长度。
现在我们可以回答这样一个问题，网页上 9pt 的字体究竟占用了多宽的空间?答案是: 9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。
虽然pt是绝对单位，但是那只是针对输出设备而言的，在文字排版工具(word，abobe)中是非常有用的字体单位。不管显示器的分辨率是多少，打印在纸面上的结果是一样的。
但是网页主要为了屏幕显示，而不是为了打印等其他需要的。而px能够精确地表示元素在屏幕中的位置和大小。
当然。在dpi是96的情况下，9pt=12px。
字体大小12px 行高1.5*12px 字体（tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;）
引号是为了在有空格的情况下不会被解析成多个元素
\5b8b \4f53 黑体
代码
test1
test2 rgba1 rgba2
test3
test4
test5