CSS基礎（二）--標籤元素及佈局模型
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>