行內元素

時間 2019-12-14

標籤元素简体版

原文原文鏈接

[2019.07.04 學習筆記2]html

1.行級元素（inline element），與其餘元素位於同一行。ide

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>行內元素</title>
 6 </head>
 7 <body>
 8     <span>內容</span>
 9     <span>內容</span>
10     <span>內容</span>
11 </body>
12 </html>

行內元素

2.行內元素儘可能不要包含塊級元素，不符合規範。可容納文本或其餘行內元素。學習

3.行內元素的高度通常由元素內部的字體大小決定，寬度由內容長度決定。不可設置元素寬（width）和高（height），只能設置左右方向的內邊距（padding）和外邊距（margin），上下方向不可設置。<img>除外。字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行內元素</title>
</head>
<body>
<span>內容</span>
<br/>
<span>內容內容內容內容內容</span>
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<span>內容</span>
<br/>
<span style="width:200px; height: 200px;">內容</span>
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<img src="test.jpg"/>
<br/>
<img src="test.jpg" style="width:10px; height: 10px;"/>
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<span>內容</span>
<br/>
<span style="padding: 10px; margin: 10px;">內容</span>
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<img src="test.jpg" style="padding: 10px; margin: 10px;"/>
<img src="test.jpg" />
<hr/>
<!--///////////////////////////////////////////////////////////////////////-->
<span>內容</span>
<br/>
<span style="padding-left: 10px; padding-right: 10px; margin-left: 10px; margin-right: 10px;">內容</span>
<br/>
<span style="padding-top: 10px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px;">內容</span>
</body>
</html>

行內元素-設置屬性

4.CSS樣式默認顯示爲dispaly:inline;，可將行內元素設置爲塊級元素。spa

5.塊級元素有：u、span、a、b、big、small、strong、em、i、sub、sup、img（可設置寬和高）、input、textarea、label、selectcode

6.不可設置位置屬性align。htm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>塊級元素</title>
 6 </head>
 7 <body>
 8     <span>內容</span>
 9     <span align="center">內容</span>
10 </body>
11 </html>

行內元素-位置屬性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。