HTML 塊級元素和內聯元素

admin發表於2018-09-16

一.塊級元素:

塊級元素一般當做容器使用,既可以容納內聯元素也可以容納塊級元素,例如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,它們就可以在同一行顯示,也能夠設定尺寸和內外邊距。

相關文章