塊級(jí)元素，行內(nèi)元素（內(nèi)聯(lián)元素）
div、h1 或 p 元素常常被稱為塊級(jí)元素。
這意味著這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內(nèi)元素”，這是因?yàn)樗鼈兊膬?nèi)容顯示在行中，即“行內(nèi)框”。
display 屬性（block；inline；inline-block）改變?cè)氐念愋?/p>
CSS 定位機(jī)制
CSS 有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。
普通流：默認(rèn)所有框都在普通流中定位。
1、普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
2、塊級(jí)框從上到下排列，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)。
3、行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過(guò)，設(shè)置行高可以增加這個(gè)框的高度。
浮動(dòng)和絕對(duì)定位。
一、CSS 定位
定位 (Positioning) 屬性允許你對(duì)元素進(jìn)行定位。
定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。
position 屬性值的含義：
1、static
（1）static 是默認(rèn)值。表示沒(méi)有定位，或者說(shuō)不算具有定位屬性。
（2）如果元素 position 屬性值為 static（或者未設(shè) position 屬性），該元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
2、relative
（1）relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
（2）相對(duì)定位完成的過(guò)程如下：
- 首先按默認(rèn)方式（static）生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))。
- 然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由 left、right、top、bottom 屬性確定，移前的位置保留不動(dòng)（空間仍保留）。
對(duì)于一個(gè)元素的正常位置來(lái)對(duì)其定位
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>這是位于正常位置的標(biāo)題</h2>
<h2 class="pos_left">這個(gè)標(biāo)題相對(duì)于其正常位置向左移動(dòng)</h2>
<h2 class="pos_right">這個(gè)標(biāo)題相對(duì)于其正常位置向右移動(dòng)</h2>
<p>相對(duì)定位會(huì)按照元素的原始位置對(duì)該元素進(jìn)行移動(dòng)。</p>
</body>
3、absolute
（1）absolute 生成絕對(duì)定位的元素。
（2）絕對(duì)定位的元素使用 left、right、top、bottom 屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父元素進(jìn)行絕對(duì)定位。
（3）如果不存在這樣的父元素，則相對(duì)于 body 元素，即相對(duì)于瀏覽器窗口。
元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。position元素定位后生成一個(gè)塊級(jí)框（使用position：absolute；元素自動(dòng)變成塊級(jí)元素相當(dāng)于給元素添加display：block；樣式），而不論原來(lái)它在正常流中生成何種類型的框。
注：因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素?？梢酝ㄟ^(guò)設(shè)置 z-index 屬性來(lái)控制這些框的堆放次序。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對(duì)定位的標(biāo)題</h2>
<p>通過(guò)絕對(duì)定位，元素可以放置到頁(yè)面上的任何位置。下面的標(biāo)題距離頁(yè)面左側(cè) 100px，距離頁(yè)面頂部 150px。</p>
</body>
</html>
4、fixed（固定定位）
（1）fixed 生成絕對(duì)定位的元素，該元素相對(duì)于瀏覽器窗口進(jìn)行定位。
（2）固定定位的元素不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，也不會(huì)受文檔流動(dòng)影響，而是始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置。
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。
相對(duì)于瀏覽器窗口來(lái)對(duì)元素進(jìn)行定位。
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
使用固定值設(shè)置圖像的上邊緣。
使用百分比值設(shè)置圖像的上邊緣。
上下左右等等都可以混合使用，不沖突就好
<html>
<head>
<style type="text/css">
/*使用固定值設(shè)置圖像的上邊緣。*/
img
{
position:absolute;
top:40px;
right:5%;
}
/*使用百分比值設(shè)置圖像的上邊緣。*/
img
{
position:absolute;
top:5%;
right:40px;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
[圖片上傳失敗...(image-1896b9-1567050267317)]
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。 </p>
</body>
</html>
使用滾動(dòng)條來(lái)顯示元素內(nèi)溢出的內(nèi)容
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
</head>
<body>
<p>如果元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動(dòng)條等行為。</p>
<div>這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll，不論是否需要，用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。默認(rèn)值是 visible。
</div>
</body>
</html>
溢出隱藏
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
}
</style>
</head>
<body>
<p>如果元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動(dòng)條等行為。</p>
<div>這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll，不論是否需要，用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。默認(rèn)值是 visible。
</div>
</body>
</html>
在文本中垂直排列圖象。
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>這是一幅[圖片上傳失敗...(image-214762-1567050267317)]位于段落中的圖像。
</p>
<p>這是一幅[圖片上傳失敗...(image-ecdbdb-1567050267317)]位于段落中的圖像。
</p>
</body>
</html>
二、CSS 浮動(dòng)
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?br> 由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
