1、标签元素分类
在CSS中，标签元素一般分为3大不同的种类：块状元素、内联元素以及内联块状元素
常见的块状元素有：<div>、<p>、<table>、<ol>、<li>、<h1>
内联元素：<span>、<em>、<strong>、<a>
内联块状元素有：<img>、<input>
1.1 块级元素
(1) 定义
什么是块级元素？其实很明显的一点就是块级元素起点于每行的最开始位置，结束于每行的终止位置；并且块级元素的高度和宽度均可以被设置；如果没有设置块级元素的宽度，那其会默认为同父级容器的宽度一样，保持为100%。
(2) 常见元素
div p table form ol li h1...h5
(3)特点
a、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
b、元素的高度、宽度、行高以及顶和底边距都可设置。
c、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
(4) 转换
块级元素可以转换为内联元素。转换方式为display: inline;
1.2 内联元素
(1) 定义
什么是内联元素？内联元素就是多个元素可以放置在同一行；宽度、高度、顶部以及底部距离不可设置；元素所保持的宽度就是所包围文字或者图片的大小，不可被改变。
(2) 常见元素
span a em br strong
(3)特点
a、多个内联元素可以一行或者说内联元素可以同其他元素保留在同一行上；
b、元素的高度、宽度、行高以及顶和底边距都不可以被设置。
(4)转换
块级元素可以转换为内联元素。转换方式为display: block;
1.3 内联块状元素
(1) 定义
什么是内联块状元素？内联块状元素就是同时具有内联元素的特点，也具有块状元素的特点。
(2) 常见元素
input
(3)特点
a、可以同其他元素保持在同一行；
b、元素的高度、宽度、行高以及顶和底边距都可以被设置。
2、盒子模型
2.1 填充
在盒子模型中，填充主要是指内容同盒子边框之间的距离，用padding的属性来表示
2.2 边界
元素【一个盒子】同另一个元素【盒子】之间的距离称之为边界，通过margin表示。
无论是padding或者是margin的属性，都是呈现上、右、下、左的方式进行设置
{
margin:10px 20px 3px 9px;
}
3、布局模型
上述我们讲解了盒子模型，其实在网页中还存在另外一种布局模型，即在网页中存在两种模型：盒子模型、布局模型。这两种模型属于CSS中最基本且最核心的概念。
3.1 分类
布局模型主要分为流动模型、浮动模型以及层模型。
流动模型可简易为从左往右进行分布
浮动模型即可以将两个块状元素并列显示，通过CSS属性float可以进行定义
float属性：left right none
层模型：相对定位、绝对定位以及固定定位
绝对定位：设置postion：absolute，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
例如：
最接近的一个具有定位属性的父包含块
<head>
<title>!important的使用方式</title>
<style type="text/css">
.test1{
background-color: blue;
position: relative;
width: 100px;
height: 100px;
}
.test2{
background-color: pink;
position: absolute;
width: 200px;
height: 200px;
top:20px;
left:160px;
}
</style>
</head>
<body>
<div class="test1">你好太阳1</div>
<div class="test2">你好太阳2</div>
</body>相对定位：设置postion：relative，将元素依然保留在文档流中，然后使用left、right、top、bottom属性相对于异动前的位置的定位。
固定定位：设置position:fixed。
4、颜色值
在CSS的设置中，存在三种颜色的设置：
(1) 英文类型
color:red;
(2) rgb格式
color:rgb(12%,2%,2%)
(3) 十六进制
color:#000
5、长度值
首先涉及到长度值的有像素px、em、以及百分比。那这三者之间存在的关系是什么？一般而言，由于电脑屏幕基本上是基于像素作为计算单位，因此像素使用比较频繁。
(1) 像素
览器中使用像素较多
(2) em
em的应用可以如下：
p{
font-size:10px;
text-indent:2em;
}
上述例子表示如果前者存在使用到px值，后者用到em，那就表示1em=10px;按实际值text-indent:(10*2)px;
特例：如果在p{ font-size:1em;} 那就需要考虑到以p元素为父元素而设置的像素值。
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
(3) 百分比
百分比和上述类似
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）
6、块状元素居中显示
6.1 定宽居中
对块状元素设定固定的宽度，并设置居中显示
CSS
.test1{
width: 100px; /*设定宽度*/
height: 100px;
margin:20px auto; /*设置*/
border:1px solid red;
}
HTML
<body>
<div class="test1">你好太阳</div>
</body>
6.2 不定宽居中
由于宽度不确定，无法设定宽度再次进行居中显示。方法如下：
(1) 添加table元素
CSS
table{
border:1px solid;
margin:0 auto;
}
HTML
<table>
<tr>
<td>333</td>
</tr>
</table>