[2019.07.04 學習筆記2] 1.行級元素（inline element），與其他元素位於同一行。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行內元素</title> 6 < ...
[2019.07.04 學習筆記2]
1.行級元素（inline element），與其他元素位於同一行。
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;，可將行內元素設置為塊級元素。
5.塊級元素有：u、span、a、b、big、small、strong、em、i、sub、sup、img（可設置寬和高）、input、textarea、label、select
6.不可設置位置屬性align。
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>行內元素-位置屬性
