HTML 塊級元素和內聯元素

admin發表於2018-09-16
HTML

一.塊級元素:

塊級元素一般當做容器使用，既可以容納內聯元素也可以容納塊級元素，例如div和p。

預設狀態下，塊級元素總是佔據一整行，除非使用CSS控制。

使用display:inline可以把塊級元素轉換成內聯元素。

塊級元素的特點:

（1）.塊級元素既可以容納內聯元素也可以容納塊級元素。

（2）.塊級元素在預設的情況下是獨佔一行的。

（3）.塊級元素大小是可以控制的，css可以設定高度和寬度。

（4）.寬度預設值就是它所在容器寬度的100%。

例項程式碼: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant-1{
  height:200px;
  background-color:green;
}
.ant-2{
  width:200px;
  height:200px;
  background-color:red;
}
</style>
</head>
<body>
  <div class="ant-1"></div>
  <div class="ant-2"></div>
</body>
</html>

程式碼中有兩個div，分別佔據一行，並且設定了它們的長度和寬度。

常見的塊級元素:

（1）.div：主要用來進行框架佈局。

（2）.h1～h6：用來設定不同級別的標題。

（3）.p:建立段落，會自動在其前後建立一些空白。

（4）.hr:用來建立分隔先。

（5）.ol:建立有序列表。

（6）.ul:建立無序列表。

二.內聯元素:

內聯元素名稱有多種，比如內嵌元素、行內元素等等，無需糾結。

任何不是塊級元素的可見元素都是內聯元素。

內聯元素只能夠容納文字或者內聯元素。

內聯元素的尺寸是不可以控制的，也就是說CSS的height和width是不起作用的。

使用display:block語句可以把內聯元素轉換成塊元素；內聯元素浮動起來自動轉換成塊級元素。

內聯元素的特點:

（1）.內聯元素只能容納文字或者內聯元素。

（2）.內聯元素預設情況下可以和其他內聯元素元素在一行上。

（3）.內聯元素預設情況下的大小是不可以控制的。

（4）.內聯元素可以產生程式碼換行和空格。

例項程式碼: 

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

程式碼中兩個內聯元素是在一行排列的，但是無法給它們設定高度和寬度。

常見的內聯元素:

（1）.strong：加粗強調。

（2）.em：斜體強調。

（3）.s：刪除線。

（3）.u：下劃線。

（3）.a：超連結。

（3）.span：常用行級，可定義文件中的行內元素。

（3）.img：圖片。

（3）.input:表單。

三.內聯塊級元素:

預設狀態下，元素要麼內聯元素，要麼塊級元素。

使用display:inline-block可以將一個元素轉換成內聯塊級元素。

顧名思義，就是使元素兼具內聯元素和塊級元素的特性。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul {
  background: #ccc;
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  display: inline-block;
  width: 80px;
  height: 20px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  background: #cfc;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

li元素應用display:inline-block，它們就可以在同一行顯示，也能夠設定尺寸和內外邊距。

相關文章