CSS：display屬性和position屬性的介

CSS：display屬性和position屬性的介紹

介紹一下display屬性

1.display:none 表示該元素不存在，也不會顯示和占用空間

2.display: inline表示該元素設置為行內元素，給元素設置寬高是沒有反應的

3.display: block 表示該元素設置為塊狀元素，可以自己設定寬度和高度；如果沒有給定寬度高度，則會繼承父元素的屬性，搞定一般以子元素的高度為準

4.display: list-item 表示該元素設置為列表來顯示

5.display:table 表示該元素會用塊級表格的方式來展示

6.display: inline-block 表示該元素既有inline的行內特性又有block的寬高特性（行內塊元素）

7.display:flexflex是一種彈性布局屬性，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效

接下來介紹介紹position屬性

1.position:static 這個是默認的屬性（塊級元素和行內元素都遵守各自的特性）

2.position:relative相對定位，原來的位置會保留，可以根據top，right，bottom，left來進行位置的變化

3.position:absolute絕對定位，設置了這個屬性后，原來的空間會被占用，后面的元素會頂上來，該元素就會脫離文檔流；不管你設置的這個元素是塊級元素還是行內元素，只要給了這個屬性，該屬性就可以設置寬度和高度。如果父級元素設置了相對定位，那么該元素就會相對父級來定位，如果父級元素沒有設置相對定位的話就再往上找，一直找不到，那么該元素就會相對body來定位。

4.display:fixed固定定位，該屬性是相對于瀏覽器來定位的

如果有什么什么問題，歡迎打開下面的網站來共同學習交流經驗

http://www.mackxin.com/html/code.html

關注分享，體驗樂趣

分享是一種態度

家都知道display可以轉換元素類型，但是大多人其實對于display的屬性值，比較熟悉的只是block和inline以及inline-block和none，對于其他屬性值，了解都比較一般，在平時開發過程中也不太用得到其他的屬性值，但是每次用這個屬性的時候，腦海里都會冒出來，其他的屬性值，設置了會是怎么樣、有什么樣的特點，這個奇奇怪怪的想法，所以找了個時間，寫下這篇文章，跟我有相同可愛想法的伙伴，如果感興趣的，可以駐步瞄一眼喲；

一、css規定，元素類型有兩大類，一類是塊狀元素，一類是行內元素，首先了解一下兩種元素類型的特征：

塊狀元素特征：

塊狀元素可以正確解釋盒模型的屬性width,height,padding,margin,border
塊狀元素前后帶有換行符，所以自占一行，在垂直方向一個接一個的放置；
塊狀元素一般作為容器、盒子使用；
塊狀元素默認情況下，寬度與父元素同寬，高度根據內容而定，沒有內容，高度為0；

行內(內聯)元素特征：

行內元素不能正確解釋盒模型的屬性，width、height執行無效，padding、border、margin解釋時，左右解釋沒有問題，上下解釋不正確；
行內元素在一行內從左往右依次排列；
行內元素默認情況下，寬度和高度都根據內容而定；

二、元素類型的轉換

display屬性：規定元素應該生成的框的類型（改變元素的類型，使用display屬性）。

ps：以下就是每個屬性的詳解了，啦啦啦啦啦啦啦；

屬性值詳解：

1、none：此元素不會被顯示；

（1） none此單詞的意思是沒有一個、毫無的意思；所以當display的屬性值設置為none的時候，表示的是沒有框類型，沒有框類型的元素，是無法在瀏覽器中顯示的，就實現隱藏元素的作用了；

示例如下：

html結構：

    <div></div>
    <p>我是p，測試div消失后，會不會占據瀏覽器空間</p>

css樣式：

     <style>
        div{
            width:100px;
            height:100px;
            background:violet;
            /*設置div的屬性值為none，觀察div是否會隱藏不可見*/
            display: none;
        }
        p{
            background:yellowgreen
        }
    </style>

以上代碼效果可以看出，div設置none之后，實現了完全消失并且不占據瀏覽器的空間效果；

（2）有很多標簽，display的屬性值默認是none，比如 head meta style link等等；

（3）項目應用中，做二級導航效果或者鼠標懸停效果動態時，會經常用到這個屬性值，下次我們寫一個好玩的二級效果再來展示這個屬性值的作用；

2、block：此元素將顯示為塊級元素，此元素前后會帶有換行符。

示例如下：

 html結構：
     <em>我原本是行內元素</em>
 css樣式：
       <style>
            em{
                width:100px;
                height:100px;
                background:tomato;
               /*em本來是行內元素元素,現在使用display屬性轉換為塊狀元素 */
                display: block;
            }
        </style>

3、inline 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。

示例如下：

  html結構：   
    <div>我原本是塊狀元素</div>
    <span>用來測試的行內元素span</span>
    
   css樣式： 
     <style>
        div{
            width:80px;
            height:80px;
            background:coral;
            /*div標簽本來是塊狀元素，現在使用display屬性轉換為行內元素；*/
            display: inline;
        }
        span{
            background:cornflowerblue
        }
    </style>

4、inline-block 行內塊元素（CSS2.1 新增的值）

說明：行內塊元素既具備行內元素的特性也具備塊狀元素的特性，具備行內元素前后沒有換行符可以在一行內并列顯示的特性，具備塊狀元素可以正確解釋盒模型屬性的特性。

示例如下：

div塊狀元素，span行內元素，使用此屬性值轉換為行內塊元素；

 html結構：   
      <div>我原本是塊狀元素</div>
      <span>我原本是行內元素</span>
    
   css樣式： 
        div,span{
           /*div塊狀元素，span行內元素，使用此屬性值轉換為行內塊元素；*/  
            display: inline-block;
        }
        div{
            width:100px;
            height:100px;
            background:tomato;
        }
        span{
            width:100px;
            height:100px;
            background:turquoise;
        }

5、list-item 此元素會作為列表顯示。

(1) 此屬性值表示將元素顯示為列表項標簽，li標簽默認的display的屬性值是list-item，display的屬性值為list-item的標簽也屬于塊狀元素；

示例如下：

(2) li標簽作為列表項標簽，前面會有列表項標記，下面給div標簽設置為list-item，div也會有列表項標記

 html結構：
        <ul>
            <div>div0</div>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
    
 css樣式：     

        ul{
            background:tomato
        }
        ul li{
            border:1px solid turquoise
        }
        div{
            /*給div標簽設置為list-item*/
            display: list-item;
        }

6、run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。

(1) 目前很少有瀏覽器支持run-in這個屬性值，并且在開發過程中用不到這個屬性值，不予過多的研究；

7、table 此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。

（1）table標簽默認的元素類型是table，顯示為塊級表格，可以設置大小并且單獨占據一行；（2）當table標簽的元素類型是table時，并且設置寬度和高度之后，后代td標簽的寬度和高度，默認是由table根據內容的多少去分配的；

(3) table屬于塊狀元素，但是對比別的塊狀元素，有自己的特點， table會單獨占據一行，但是在沒有設置width的情況下，不會與父元素同寬，而是根據內容而定；

html結構：
      <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
        <span>我是行內元素span</span>
        
 css樣式： 

        table{
            border:2px solid red;
        }
        table td{
            border:1px solid chocolate;
            background:darkcyan
        }
        span{
            background:cornflowerblue
        }

（3）其他標簽設置display的屬性值為table，也不會具有表格的特性；

html結構：
       <div>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
       </div>

 css樣式：    
 
        div{
            height:300px;
            width:300px;
            border:2px solid red;
            /*將div設置為表格類型*/
            display: table;
        }
        div td{
            border:1px solid chocolate;
            background:darkcyan
        }
        span{
            background:cornflowerblue
        }

8、inline-table 此元素會作為內聯表格來顯示（類似 <table>），表格前后沒有換行符。

（1）將table顯示為行內表格，具有行內塊元素的特征，可以和別的行內元素從左往右顯示也可以設置寬度和高度；

html結構：

       <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
       </table>
       <span>我是行內元素span</span>

css樣式：

        table{
            border:2px solid red;
            /*將table設置為inline-table*/
            display: inline-block;
        }
        table td{
            background:darkcyan;
            
        }
      span{
             background:cornflowerblue
      }

（2）將table標簽設置為inline-table之后，td標簽的寬度就不能是table根據內容去分配了，需要單獨給td設置width和height屬性實現，不然td的大小就是內容的大小

HTML結構：

       <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
       </table>
       <span>我是行內元素span</span>

css樣式：

 table{
            border:2px solid red;
            /*將table設置為inline-table*/
            display: inline-block;
            width:300px;
            height:300px;
        }
       table td{
            background:darkcyan;
            
        }
      span{
             background:cornflowerblue
      }

9、table-caption 此元素會作為一個表格標題顯示（類似 <caption>）

（1）caption標簽display的屬性值是table-caption，能設置寬度高度盒模型屬性等，屬于塊狀元素；

html結構：

     <table>
        <caption>我是表格的標題標簽</caption>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr> 
      </table>

css樣式：

 table{
            border:2px solid red;
           width:300px;
           height:300px;
        }
        table td{
            background:darkcyan;
        }
        table caption{
           width:400px;
           height:50px;
           background:cyan;
           margin:10px 0;
           padding:10px;
           line-height:50px;
        }

（2）其他標簽也可以設置此屬性值，但是不具備表格標題的作用

10、table-header-group 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。

thead標簽display的屬性值是table-header-group；
thead標簽的大小根據table自動分配，或者根據td而定，本身不能設置大小或者邊距
其他標簽可以設置此屬性值，但是不具備表頭標簽的作用

html結構：

       <table>
            <thead>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
       </table>

css樣式：

 table{
            border:2px solid red;
        }
        table td{
            background:darkcyan;
            width:100px;
            height:100px;
        }
      table thead{
          /*以下屬性設置無效*/
          height:60px;
          width:400px;
          margin:100px;
      }

11、table-row-group 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。

tbody標簽display的屬性值是table-row -group；
tbody標簽的大小根據table自動分配，或者根據td而定，本身不能設置大小或者邊距
其他標簽可以設置此屬性值，但是不具表格主體標簽的作用

       <table>
           <thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
           </thead>
          <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
          </tbody>
       </table>

css樣式：

        table{
            border:2px solid red;
            width:300px;
            height:300px; 
        }
        table td{
            background:darkcyan;
        }
      table tbody{
          /*以下屬性設置無效*/
          height:60px;
          width:400px;
          margin:100px;
      }

12、table-footer-group 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。

（1）tfoot標簽display的屬性值是table-footer-group；

（2）tfoot標簽的大小根據table自動分配，或者根據td而定，本身不能設置大小或者其他邊距

（3）其他標簽可以設置此屬性值，但是不具表格表尾標簽的作用

HTML結構：

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tfoot>
           <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
            </tr>
        </tfoot>
      </table>

css樣式：

        table{
            border:2px solid red;
            width:300px;
            height:300px;
        }
        table td{
            background:darkcyan;
        }
      /*以下屬性設置無效*/
      table tfoot{
          height:60px;
          width:400px;
          margin:100px;
      }

13、table-row 此元素會作為一個表格行顯示（類似 <tr>）。

（1） tr標簽display的屬性值是table-row

（2） tr標簽設置height有效，width 邊距設置無效，具體的大小根據table和td而定；

（3）其他標簽可以設置此屬性值，但是不具表格行標簽的作用

HTML結構：

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      </table>

css樣式：

        table{
            border:2px solid red;
        }
        table td{
            background:darkcyan;
        }
       table tr{
         border:1px solid chartreuse;
         margin:20px;
         height:100px;
         width:300px;
         margin:10px;
       }

14、table-cell 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）

（1）td , th標簽display的屬性值是table-cell

（2）設置寬度、高度、邊框、內邊距有效，外邊距無效，單元格之間的間距，使用border-spacing實現

HTML結構：

     <table>
       <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
     </table>

css樣式：

    <style>
        table{
            border:2px solid red;
            border-spacing: 10px;
        }
        table td{
            background:darkcyan;
            width:100px;
            height:100px;
        }
    </style>

（3）其他標簽可以設置此屬性值，但是不具單元格標簽的作用

html結構：

<table>
        <tr>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
   </table>

css樣式：

        table{
            border:2px solid red;
            border-spacing: 10px;
        }
        table td{
            background:darkcyan;
            width:100px;
            height:100px;
        }
       span{
           display: table-cell;
           width:100px;
           height:100px;
           background:darkcyan;
       }

15、table-column-group 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。

（1）colgroup 標簽 display的屬性值是table-column-group

（2）此標簽的特點是對列進行分組的，給分組的列設置樣式；

HTML結構：

<table>
      <colgroup span="1"></colgroup>
      <colgroup span="2"></colgroup>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
   </table>

css樣式：

    table{
            border:2px solid red;
            border-spacing: 10px;
        }
        table td{
            background:darkcyan;
        }
       table colgroup:nth-child(1){
            width:100px;
            height:100px;
            background:pink
        }
        table colgroup:nth-child(2){
            width:50px;
            height:50px;
            background:green
        }

16、table-column 此元素會作為一個單元格列顯示（類似 <col>）

(1）col 標簽 display的屬性值是table-column

(2）此標簽的特點是對單元格列設置效果；

HTML結構：

<table>
       <col span="1">
       <col span="2">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
   </table>

css樣式：

 <style>
        table{
            border:2px solid red;
            border-spacing: 10px;
        }
        table td{
            width:100px;
            height:100px;
        }
        table col:nth-child(1){
            background:pink
        }
        table col:nth-child(2){
            background:green
        }
    </style>

17、inherit 規定應該從父元素繼承 display 屬性的值。

說明：此屬性值是所有css屬性都有的值，能被繼承的屬性，自然可以繼承，不能被繼承的，設置了此屬性值也不能實現繼承；

18、compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

19、marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

總結：

通過以上的測試，可以總結出：

display的屬性值為block，table的標簽都為塊狀元素；

display的屬性值為inline，inline-table，inline-block的標簽為行內級元素；

表格中的標簽對應的那些display的屬性值，其他的標簽也可以設置，但是都不具備表格標簽的功能和特征，所以表格中的標簽對應的display的屬性值，不能泛用，相當于一種特殊的存在；

SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發者更好地理解和運用它們來構建響應式和精確的網頁布局。

浮動（Float）

浮動是CSS中用于實現元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。

.element {
  float: left; /* 或者 'right' */
}

使用場景

文字環繞圖片。
創建水平導航欄。
無網格系統時的列布局。

注意事項

清除浮動（Clearing Floats）：使用clear屬性可以防止元素被浮動元素覆蓋。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮動（Containing Floats）：浮動元素的父容器可能不會擴展以包含浮動的子元素，可以通過清除浮動或使用其他技術（如overflow）來解決這個問題。
浮動塌陷（Float Collapse）：浮動元素不占據空間，可能導致父元素高度塌陷。

定位（Position）

定位屬性允許你控制元素的位置，它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用場景

相對定位（Relative Positioning）：元素相對于其正常位置進行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

絕對定位（Absolute Positioning）：元素相對于最近的已定位父元素進行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相對于視口進行定位，即使頁面滾動也不會移動。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用戶的滾動位置在相對和固定定位之間切換。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事項

定位元素可能會脫離文檔流，影響周圍元素的布局。
z-index屬性可以控制堆疊順序。
絕對定位元素的容器應有position: relative;，以便正確定位。

顯示（Display）

display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用場景

塊級元素（Block）：display: block;使元素表現為塊級，占據新的行。

.block-element {
  display: block;
}

內聯元素（Inline）：display: inline;使元素在文本行中顯示，不開始新行。

.inline-element {
  display: inline;
}

內聯塊元素（Inline-Block）：display: inline-block;允許元素并排排列，同時擁有塊級元素的寬度和高度屬性。

.inline-block-element {
  display: inline-block;
}

彈性盒子（Flex）：display: flex;創建了一個彈性容器，其子元素可以靈活地在容器內排列。

.flex-container {
  display: flex;
}

網格（Grid）：display: grid;創建了一個網格容器，可以定義行和列以及在網格內放置元素。

.grid-container {
  display: grid;
}

隱藏元素（None）：display: none;將元素隱藏，且不為元素保留空間。

.hidden-element {
  display: none;
}

注意事項

使用display: none;與visibility: hidden;的區別在于后者仍保留元素占據的空間。
display: flex;和display: grid;為現代布局提供了更多控制，通常比浮動和定位更優。

示例

HTML結構

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS樣式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在這個例子中，我們創建了一個包含頭部、側邊欄、主要內容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導航，以及創建一個側邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。

結語

浮動、定位和顯示屬性是CSS中構建復雜布局的強大工具。通過深入理解和正確應用這些屬性，前端工程師可以創建出既美觀又功能強大的網頁。隨著Web標準的不斷發展，我們也需要不斷學習和適應新的CSS特性，以保持我們技能的前沿性。

在線咨詢

上一篇：通達OA小于12.4 反序列化漏洞分析
下一篇：CSS3 - 新單位vw、vh、vmin、vmax使

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS：display屬性和position屬性的介

一、css規定，元素類型有兩大類，一類是塊狀元素，一類是行內元素，首先了解一下兩種元素類型的特征：

塊狀元素特征：

行內(內聯)元素特征：

二、元素類型的轉換

總結：

浮動（Float）

使用場景

注意事項

定位（Position）

使用場景

注意事項

顯示（Display）

使用場景

注意事項

示例

HTML結構

CSS樣式

結語

您的項目需求