HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種

使用display屬性能夠將三者任意轉換

塊狀元素自動換行

轉換方法
(1)display:inline;轉換為行內元素
(2)display:block;轉換為塊狀元素
(3)display:inline-block;轉換為行內塊狀元素

比較

行內元素最常使用的就是span，其他的只在特定功能下使用，修飾字體 b 和 i 標簽，還有 sub 和 sup 這兩個標簽可以直接做出平方的效果，而不需要類似移動屬性的幫助，很實用。

行內元素特征：(1)設置寬高無效

(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間

(3)不會自動進行換行

 !DOCTYPE html  html  head  meta charset= utf-8 /  title 行內元素 /title  style type= text/css  span {  width: 120px;  height: 120px;  margin: 1000px 20px;  padding: 50px 40px;  background: lightblue;  /style  /head  body  sspan 不會自動換行 /span  span 行內元素 /span  /body  /html 

塊狀元素代表性的就是p，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用p來實現。不過為了可以方便程序員解讀代碼，一般都會使用特定的語義化標簽，使得代碼可讀性強，且便于查錯。

塊狀元素特征：(1)能夠識別寬高

(2)margin和padding的上下左右均對其有效

(3)可以自動換行

(4)多個塊狀元素標簽寫在一起，默認排列方式為從上至下

 !DOCTYPE html  html  head  meta charset= utf-8 /  title 塊狀元素 /title  style type= text/css  p {  width: 120px;  height: 120px;  margin: 50px 50px;  padding: 50px 40px;  background: lightblue;  /style  /head  body  i 自動換行 /i  p 塊狀元素 /p  p 塊狀元素 /p  /body  /html 

行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取舍。因此行內塊狀元素在日常的使用中，由于其特性，使用的次數也比較多。

行內塊狀元素特征：(1)不自動換行

(2)能夠識別寬高

(3)默認排列方式為從左到右

 !DOCTYPE html  html  head  meta charset= utf-8 /  title 行內塊狀元素 /title  style type= text/css  p {  display: inline-block;  width: 100px;  height: 50px;  background: lightblue;  /style  /head  body  p 行內塊狀元素 /p  p 行內塊狀元素 /p  /body  /html 

絕對路徑：指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑

相對路徑：指由這個文件所在的路徑引起的跟其它文件（或文件夾）的路徑關系

每一個.向外跳一層

把css代碼直接寫在現有的HTML標簽中

 p >2.內嵌樣式:
嵌入式css樣式，就是可以把css樣式代碼寫在標簽之間
 style type= text/css span{color:red;} /style 
3.外部樣式表:
外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名
 link href= style.css rel= stylesheet type= text/css / 
注意：
css樣式文件名必須符合命名規則，如 main.css
rel=”stylesheet” type=”text/css” 是固定寫法不可修改
css文件也可以在 style /style 中用import引入，但是這種方法不可以用js操作
絕對定位、相對定位和固定定位注意：
1.position屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素。 
2.可以使用position屬性把一個元素放置到網頁中的任何位置。 
 可選值： 
 – static：默認值，元素沒有開啟定位 
 – relative：開啟相對定位 
 – absolute：開啟絕對定位 
 – fixed：開啟固定定位
3.相對定位
①每個元素在頁面的文檔流中都有一個自然位置。相對于這個位置對元素進行移動就稱為相對定位。周圍的元素完全不受此影響。
②當開啟了相對定位以后，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
—-left：元素相對于其定位位置的左偏移量。left:100px，相對與原來位置向右偏移100px
—-right：元素相對于其定位位置的右偏移量
—-top：元素相對于其定位位置的上邊偏移量
—-bottom：元素相對于其定位位置的下邊偏移量
③相對定位的特點
—-如果不設置元素的偏移量，元素位置不會發生改變。
—-相對定位是相對與元素在文檔流中原來的位置進行定位。
—-相對定位不會使元素脫離文本流。元素在文本流中的位置不會改變。
—-相對定位不會改變元素原來的特性。塊元素還是塊元素，內聯還是內聯
—-相對定位會使元素的層級提升，使元素可以覆蓋文本流中的元素。
4.絕對定位
①絕對定位指使元素相對于html元素或離他最近的祖先定位元素進行定位。
②當將position屬性設置為absolute時，則開啟了元素的絕對定位。
③當開啟了絕對定位以后，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
④絕對定位的特點：
—-絕對定位會使元素完全脫離文本流。
—-絕對定位的塊元素的寬度會被其內容撐開。
—-絕對定位會使行內元素變成塊元素。
—-絕對定位是相對于離它最近的開啟了定位的祖先元素。如果所有的祖先都沒有開啟定位，則會相對于瀏覽器窗口進行定位。
—-一般使用絕對定位時會同時為其父元素指定一個相對定位，以確保元素可以相對于父元素進行定位。
—-絕對定位會使元素的層級提升。
5.固定定位
①固定定位的元素會被鎖定在屏幕的某個位置上，當訪問者滾動網頁時，固定元素會在屏幕上保持不動
②當將position屬性設置為fixed時，則開啟了元素的固定定位。
③當開啟了固定定位以后，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
④固定定位也是一種絕對定位，固定定位的其他特性和絕對定位類似。
不同：
(1)固定定位永遠相對與瀏覽器定位。
(2)會固定在瀏覽器窗口某個位置，不會隨滾動條滾動。
(3)IE6不支持固定定位。
以上就是html學習中的幾個重點總結的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。