塊級元素拔恰，行內(nèi)元素（內(nèi)聯(lián)元素）
div玖绿、h1 或 p 元素常常被稱為塊級元素。
這意味著這些元素顯示為一塊內(nèi)容，即“塊框”年堆。與之相反吞杭，span 和 strong 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中变丧，即“行內(nèi)框”芽狗。
display 屬性（block；inline痒蓬；inline-block）改變元素的類型
CSS 定位機制
CSS 有三種基本的定位機制：普通流童擎、浮動和絕對定位。
普通流：默認所有框都在普通流中定位攻晒。
1顾复、普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
2鲁捏、塊級框從上到下排列芯砸，框之間的垂直距離是由框的垂直外邊距計算出來。
3给梅、行內(nèi)框在一行中水平布置假丧。可以使用水平內(nèi)邊距动羽、邊框和外邊距調(diào)整它們的間距包帚。但是，垂直內(nèi)邊距运吓、邊框和外邊距不影響行內(nèi)框的高度渴邦。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框羽德。不過几莽，設(shè)置行高可以增加這個框的高度。
浮動和絕對定位宅静。
一章蚣、CSS 定位
定位 (Positioning) 屬性允許你對元素進行定位。
定位的基本思想很簡單姨夹，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置纤垂，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置磷账。
position 屬性值的含義：
1峭沦、static
（1）static 是默認值。表示沒有定位逃糟，或者說不算具有定位屬性吼鱼。
（2）如果元素 position 屬性值為 static（或者未設(shè) position 屬性）蓬豁，該元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
2菇肃、relative
（1）relative 生成相對定位的元素地粪，相對于其正常位置進行定位。
（2）相對定位完成的過程如下：
- 首先按默認方式（static）生成一個元素(并且元素像層一樣浮動了起來)琐谤。
- 然后相對于以前的位置移動蟆技，移動的方向和幅度由 left、right斗忌、top质礼、bottom 屬性確定，移前的位置保留不動（空間仍保留）织阳。
對于一個元素的正常位置來對其定位
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>這是位于正常位置的標題</h2>
<h2 class="pos_left">這個標題相對于其正常位置向左移動</h2>
<h2 class="pos_right">這個標題相對于其正常位置向右移動</h2>
<p>相對定位會按照元素的原始位置對該元素進行移動眶蕉。</p>
</body>
3、absolute
（1）absolute 生成絕對定位的元素陈哑。
（2）絕對定位的元素使用 left妻坝、right、top惊窖、bottom 屬性相對于其最接近的一個具有定位屬性的父元素進行絕對定位刽宪。
（3）如果不存在這樣的父元素，則相對于 body 元素界酒，即相對于瀏覽器窗口圣拄。
元素框從文檔流完全刪除，并相對于其包含塊定位毁欣。包含塊可能是文檔中的另一個元素或者是初始包含塊庇谆。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣凭疮。position元素定位后生成一個塊級框（使用position：absolute饭耳；元素自動變成塊級元素相當于給元素添加display：block；樣式）执解，而不論原來它在正常流中生成何種類型的框寞肖。
注：因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素衰腌⌒麦。可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>通過絕對定位右蕊，元素可以放置到頁面上的任何位置琼稻。下面的標題距離頁面左側(cè) 100px，距離頁面頂部 150px饶囚。</p>
</body>
</html>
4帕翻、fixed（固定定位）
（1）fixed 生成絕對定位的元素鸠补，該元素相對于瀏覽器窗口進行定位。
（2）固定定位的元素不會隨瀏覽器窗口的滾動條滾動而變化熊咽，也不會受文檔流動影響莫鸭，而是始終位于瀏覽器窗口內(nèi)視圖的某個位置。
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute横殴，不過其包含塊是視窗本身。
相對于瀏覽器窗口來對元素進行定位卿拴。
<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>
使用滾動條來顯示元素內(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 屬性可以確定是否顯示滾動條等行為轧飞。</p>
<div>這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理衅鹿。如果值為 scroll，不論是否需要过咬，用戶代理都會提供一種滾動機制大渤。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xià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 屬性可以確定是否顯示滾動條等行為集漾。</p>
<div>這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理切黔。如果值為 scroll，不論是否需要具篇，用戶代理都會提供一種滾動機制纬霞。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xià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 浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止翠桦。
由于浮動框不在文檔的普通流中横蜒，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。
