首頁 > 文章 > web前端 > html學習中的幾個重點總結

html學習中的幾個重點總結

无忌哥哥原創: 2018-07-19 11:39:412543瀏覽

關於html的重點總結

區塊元素、行內元素、行內區塊狀元素

HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種
使用display屬性能夠將三者任意轉換
塊狀元素自動換行
轉換方法
(1)display:inline;轉換為行內元素
(2)display:block;轉換為區塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
比較

1.行內元素

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

　　行內元素特徵：(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>

2.塊狀元素

#　　塊狀元素代表性的就是p，其他如p、nav、aside、

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

　　塊狀元素特徵：(1)能夠辨識寬高

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

##　　　　　　　　　(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>

3.行內塊狀元素

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

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

　　　　　　　　　　　(2)能夠辨識寬高

#　#

<!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>

絕對路徑與相對路徑

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

相對路徑：指由這個檔案所在的路徑引起的跟其它檔案（或資料夾）的路徑關係
每一個.向外跳一層
樣式的三種寫法

1.行內樣式：

把css程式碼直接寫在現有的HTML標籤中

<p style="color:red">这里文字是红色。</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檔案也可以在
中用import引入，但是這種方法不可以用js運算
#絕對定位、相對定位和固定定位

注意：

1.position屬性可以控制網路瀏覽器如何以及在何處顯示特定的元素。

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學習中的幾個重點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html Static JS 样式表 display position margin padding ul li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：SVG動態圖示是如何實現的下一篇：SVG動態圖示是如何實現的

看更多