塊級元素與內聯元素相互轉換

admin發表於2018-11-15

塊級元素與內聯元素之間是可以相互進行，下面通過程式碼例項進行一下介紹。

關於內聯元素與塊級元素基本概念可以參閱CSS塊級/內聯元素一章節。

一.塊級元素與內聯元素：

首先總結一下塊級元素與內聯元素各自特點。

塊級元素：

（1）.預設情況下，塊級元素比較霸氣，獨佔一行。

（2）.它可以容納塊級元素或者內聯元素。

（3）.塊級元素尺寸和內外邊距都是可控的。

（4）.塊級元素的寬度預設會鋪滿它的直接父級元素。

內聯元素：

（1）.內聯元素比較慫，可以與其他內聯元素共同佔據一行。

（2）.內聯元素心胸也不行，只能容納它同類內聯元素。

（3）.某些內聯元素的尺寸和上下內外邊距是不可控的。

（4）.內聯元素的尺寸由其內容決定。

有些內聯元素的尺寸和上下內外邊距是可控的。

具體參閱HTML 替換元素與非替換元素一章節。

塊級內聯元素：

同時兼具內聯元素與塊級元素的特點。

（1）.尺寸與內外邊距都是可控的。

（2）.可以出現在同一行。

二.內聯元素轉換為塊級元素：

（1）.通過display:block轉換：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  background-color:#ccc;
  width:150px;
  height:100px;
  display:block;
}
</style>
</head>
<body>
<span></span>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/15/151000awyxrtdb7ikyya70.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過display:block將span元素轉換為塊級元素。

span元素的尺寸就是可控的，同樣的道理，內外邊距也是可控的。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  background-color:#ccc;
  width:150px;
  height:100px;
  float:left;;
}
</style>
</head>
<body>
<span></span>
</body>
</html>

將內聯元素浮動起來也可以實現相同的效果。

但是更像是將元素轉換為內聯塊級元素，因為轉換後的元素寬度不會自動鋪滿父元素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  background-color:#ccc;
  width:150px;
  height:100px;
  position:absolute;
}
</style>
</head>
<body>
<span></span>
</body>
</html>

通過position將元素設定為定位，那麼也可以將其轉換為塊級元素。

與浮動方式相同，元素的尺寸無法自動鋪滿父元素。

需要注意的是，相對定位不能實現轉換功能。

最後總結：

（1）.只有dispaly:block轉換成塊級元素，才具有自動鋪滿父元素的特點。

（2）.浮動和定位方式轉變會改變文件流，所以使用的時候需要特別注意。

三.塊級元素轉換為內聯元素：

通過display:inline可以將塊級元素轉換為內聯元素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  background-color:#ccc;
  display:inline;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
<div>螞蟻部落</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/15/151101mvyp1y6pzyrrzj96.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到div也低下了高傲的頭，可以與其他兄弟平起平坐了。

兩個元素之間名模奇妙出現了空格，具體參閱刪除內聯元素之間的空隙一章節。

相關文章