HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種
使用display屬性能夠將三者任意轉換
塊狀元素自動換行
轉換方法
(1)display:inline;轉換為行內元素
(2)display:block;轉換為區塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
比較
行內元素最常使用的就是span，其他的只在特定功能下使用，修飾字體<b>和<i>標籤，還有<sub>和<sup>這兩個標籤可以直接做出平方的效果，而不需要類似移動屬性的幫助，很實用。
行內元素特徵：(1)設定寬高無效
(2)對margin僅設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐會大空間
(3)不會自動進行換行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内元素</title>
<style type="text/css">
span {
width: 120px;
height: 120px;
margin: 1000px 20px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<sspan>不会自动换行</span>
<span>行内元素</span>
</body>
</html># 塊狀元素代表性的就是p，其他如p、nav、aside、
# 塊狀元素代表性的就是p，其他如p、nav、aside、##header、 footer、section、article、ul-li、address等等，都可以用p來實現。不過為了可以方便程式設計師解讀程式碼，一般都會使用特定的語意化標籤，使得程式碼可讀性強，且方便查錯。 塊狀元素特徵：(1)能夠辨識寬高 (2)margin和padding的上下左右均對其有效##
## (4)多個塊狀元素標籤寫在一起，預設排列方式為從上至下<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>块状元素</title>
<style type="text/css">
p {
width: 120px;
height: 120px;
margin: 50px 50px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>自动换行</i>
<p>块状元素</p>
<p>块状元素</p>
</body>
</html># #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内块状元素</title>
<style type="text/css">
p {
display: inline-block;
width: 100px;
height: 50px;
background: lightblue;
}
</style>
</head>
<body>
<p>行内块状元素</p>
<p>行内块状元素</p>
</body>
</html><p style="color:red">这里文字是红色。</p>
<style type="text/css">span{color:red;}</style><link href="style.css" rel="stylesheet" type="text/css" />
– static：預設值，元素沒有開啟定位
– relative：開啟相對定位
– absolute：開啟絕對定位
– fixed：開啟固定定位
3.相對定位
—-相對定位不會改變元素原來的特性。塊元素還是塊元素，內聯還是內聯
—-相對定位會使元素的層級提升，使元素可以覆蓋文字流中的元素。
4.絕對定位
①絕對定位指使元素相對於html元素或離他最近的祖先定位元素進行定位。
②當將position屬性設為absolute時，則開啟了元素的絕對定位。
③當開啟了絕對定位以後，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
④絕對定位的特點：
—-絕對定位會使元素完全脫離文字流。
—-絕對定位的塊元素的寬度會被其內容撐開。
—-絕對定位會使行內元素變成區塊元素。
—-絕對定位是相對於離它最近的開啟了定位的祖先元素。如果所有的祖先都沒有開啟定位，則會相對於瀏覽器視窗進行定位。
—-一般使用絕對定位時會同時為其父元素指定一個相對定位，以確保元素可以相對於父元素進行定位。
—-絕對定位會使元素的層級提升。
5.固定定位
①固定定位的元素會被鎖定在螢幕的某個位置上，當訪客捲動網頁時，固定元素會在螢幕上保持不動
②當將position屬性設為fixed時，則開啟了元素的固定定位。
③當開啟了固定定位以後，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
④固定定位也是絕對定位，固定定位的其他特性和絕對定位類似。
(1)固定定位永遠相對與瀏覽器定位。
(2)會固定在瀏覽器視窗某個位置，不會隨捲軸滾動。
(3)IE6不支援固定定位。
以上是html學習中的幾個重點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
