溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS中普通流、浮動和絕對定位怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
CSS 定位和浮動
CSS 定位屬性允許你對元素進行定位。
CSS 為定位和浮動提供了一些屬性，可以建立列式布局，將布局的一部分與另一部分重疊。
定位允許你定義元素框相對于其正常位置、父元素、另一個元素甚至瀏覽器窗口本身的位置。
另一方面，CSS1 中首次提出了浮動，浮動不完全是定位，不過，它當然也不是正常流布局。
一切皆為框
div、h2 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。
而 span 和 strong 等元素稱為“行內元素”，因為它們的內容顯示在行中，即“行內框”。
您可以使用 display 屬性改變生成的框的類型。
通過將 display 設置為 block，可以讓行內元素（比如 <a>）表現得像塊級元素一樣。
通過把 display 設置為 none，讓該框及其所有內容都不再顯示，不占用文檔中的空間。
但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素，例如 div 的開頭：
<div> some text <p>Some more text.</p> </div>
注釋：即使沒有把這些文本定義為段落，它也會被當作段落（塊級元素）對待。
注釋：在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。
提示：無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方。
CSS 定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
通常，所有框都在普通流中定位。即普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
注意：行框與行內框是兩個概念，行框（Line Box）的高度總是足以容納它包含的所有行內框。
CSS position 屬性
通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。
position 屬性值的含義：
static：元素框正常生成。塊級元素和行內元素分別生成框，作為文檔流的一部分。
relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute：元素框從文檔流完全刪除，并相對于其包含塊定位（生成一個新的塊級框）。
fixed：元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。
相對定位 relative
<html>
<head>
<style type="text/css">
h3.pos_left {
position: relative;
left: -20px
}
h3.pos_right {
position: relative;
left: 20px
}
</style>
</head>
<body>
<h3>這是位于正常位置的標題</h3>
<h3 class="pos_left">這個標題相對于其正常位置向左移動</h3>
<h3 class="pos_right">這個標題相對于其正常位置向右移動</h3>
<p>相對定位會按照元素的原始位置對該元素進行移動。</p>
<p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p>
<p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。</p>
</body>
</html>注釋：本例演示如何相對于一個元素的正常位置來對其定位。
絕對定位 absolute
h3.pos_abs {
position: absolute;
left: 100px;
top: 150px
}注釋：本例演示如何使用絕對值來對元素進行定位。
固定定位 fixed
p.pos_fix {
position: fixed;
left: 5px;
top: 5px;
}注釋：本例演示如何相對于瀏覽器窗口來對元素進行定位。
元素內容溢出 overflow
overflow 屬性定義溢出元素內容區的內容會如何處理：
visible：默認值。內容不會被修剪，會呈現在元素框之外。
hidden：內容會被修剪，并且其余內容是不可見的。
scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto：如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit：規定應該從父元素繼承 overflow 屬性的值。
如果元素中的內容超出了給定的寬度和高度屬性，將會使用到 overflow 屬性。
<html>
<head>
<style type="text/css">
div {
background-color: #00FFFF;
width: 150px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<div>
overflow 屬性可以確定是否顯示滾動條等行為。
這個屬性定義溢出元素內容區的內容會如何處理，默認值是 visible。
如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。
因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
</div>
</body>
</html>
設置元素的形狀
<html>
<head>
<style type="text/css">
img {
position: absolute;
clip: rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>clip 屬性剪切了一幅圖像：</p>
<p><img border="0" src="../book.gif" width="120" height="151"></p>
</body>
</html>注釋：本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，并顯示出來。
垂直排列圖象
<html>
<head>
<style type="text/css">
img.top {vertical-align: text-top}
img.bottom {vertical-align: text-bottom}
</style>
</head>
<body>
<p>圖像<img class="top" border="0" src="../cute.gif" />位于段落中。</p>
<p>圖像<img class="bottom" border="0" src="../cute.gif" />位于段落中。</p>
</body>
</html>注釋：本例演示如何在文本中垂直排列圖象（頂部對齊、底部對齊）。
Z-index
<html>
<head>
<style type="text/css">
img.x {
position: absolute;
left: 0px;
top: 0px;
z-index: -1
}
</style>
</head>
<body>
<h2>這是一個標題</h2>
<img class="x" src="../mouse.jpg" />
<p>默認的 z-index 是 0。Z-index -1 擁有更低的優先級。</p>
</body>
</html>注釋：Z-index可被用于將在一個元素放置于另一元素之后。
<html>
<head>
<style type="text/css">
img.x {
position: absolute;
left: 0px;
top: 0px;
z-index: 1
}
</style>
</head>
<body>
<h2>這是一個標題</h2>
<img class="x" src="../mouse.jpg" />
<p>默認的 z-index 是 0。Z-index 1 擁有更高的優先級。</p>
</body>
</html>
CSS 定位 屬性及描述
position：把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top：定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right：定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom：定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left：定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow：設置當元素的內容溢出其區域時發生的事情。
clip：設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。
vertical-align：設置元素的垂直對齊方式。
z-index：設置元素的堆疊順序。
感謝各位的閱讀！關于“CSS中普通流、浮動和絕對定位怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
