註意點： 元素類型分為 塊級元素 和 行內元素 塊級元素： 在網頁中以塊的形式顯示，預設情況都會占據一行，兩個相鄰的塊級元素不會出現併列顯示的元素，按照順序自上而下排列。 塊級元素可以定義自己的寬度和長度。 div： dl：與dt、dd搭配使用 form：交互表單 h1-h6:標題 hr：水平線 o ...
註意點：
元素類型分為 塊級元素 和 行內元素
塊級元素：
在網頁中以塊的形式顯示，預設情況都會占據一行，兩個相鄰的塊級元素不會出現併列顯示的元素，按照順序自上而下排列。
塊級元素可以定義自己的寬度和長度。
div：
dl：與dt、dd搭配使用
form：交互表單
h1-h6:標題
hr：水平線
ol：有序列表
ul：無序列表
p：段落
fieldset：表單欄位級
colgroup-col：表單列分組元素
table-tr-td：表格及行，單元格
行內元素：
在網頁中始終以行內逐個顯示，沒有自己的形狀並且不能定義自己的寬和高，他顯示的寬和高根據所包含內容的寬和高確定。
內聯元素也會遵循盒模模型基本法則，如定義padding，border，margin，background等屬性，但是個別屬性不能正確顯示。
a：錨點
b：粗體
strong：粗體
sub：下標
sup：上標
u：下劃線
i：斜體
br：換行
em：強調
input：輸入框
img：圖片
label：表格標簽
span：內聯容器
textarea：富文本
可變元素：
需要根據上下文確定該元素是塊元素還是內聯元素。
applet：java applet
button：按鈕
del：刪除文本
iframe：inline iframe
ins：插入文本
map：圖片區域
object：對象
script：客戶端腳本
元素類型的轉換
display屬性：用於定義建立佈局時元素生成的顯示框類型
常見屬性值：
none：此元素不會被顯示，隱藏元素並脫離文本流
block：將元素設置為塊級元素，獨占一行。不設置寬度時寬度撐滿一行。當元素設置了float屬性後就相當於給元素加了display：block；屬性
inline：在元素後面刪除行符，多個元素可以在一行顯示。非獨占一行，不支持寬度，代碼換行被解析成空格
list-item：將元素轉換成列表，li 的預設類型。不設置寬度時寬度撐滿一行，獨占一行，支持高度設置
大部分塊元素display屬性值預設為block，其中列表的預設值為list-item
大部分內聯元素的display屬性值預設為inline，其中img，input預設值為inline-block
練習：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} .nav {height: 60px; background: #2a063a;} .nav ul { width: 960px; margin: 0 auto; text-decoration: none; overflow: hidden;} .nav ul li {float: left; border-right: 1px #fff solid;} .nav ul li a {display: block; width: 119px; height: 60px; color: #fff; text-align: center; line-height: 60px; text-decoration: none; font-size: 18px;} .nav ul li a:hover {background: rgb(224, 28, 28);} .nav ul .last{border-right: none;} </style> </head> <body> <div class="nav"> <ul type="none"> <li><a href="#">博客首頁</a></li> <li><a href="#">添加隨筆</a></li> <li><a href="#">歡迎練習</a></li> <li><a href="#">訂閱查看</a></li> <li class="last"><a href="#">後臺管理</a></li> </ul> </div> </body> </html>
結果：
