<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                # 精通CSS: 高級Web標準解決方案 ## CSS選擇器 選擇器的特殊性分成4個成分等級: 1000, 100, 10和1. - 如果樣式是行內樣式, 那么值為1000 - ID選擇器的值為100 - 類, 偽類和屬性選擇器的值是10 - 類型選擇器和偽元素選擇器是1 例如: | 選擇器 | 特殊性 | |------------|-----------| |style = ""| 1000 | |#wrapper #content {} | 200 | |#content .datepicker{} | 110 | |div#content | 101 | |#content{} | 100 | |p.comment .datepicker{} | 21| |p.comment{} | 11 | |div p{} | 2 | |p{} | 1 | |a[target] | 11 | ## 盒子模型 ### 總述 在CSS中, width和height指的是內容區域的寬度和高度. 增加內邊距, 邊框和外邊距不會影響內容區域的尺寸, 但是會增加元素框的尺寸. 在IE6中, 在混雜模式下使用的是自己的非標準盒子模型. 它的width和height包括的內邊距和邊框. ### 外邊距疊加 在垂直方向的2個元素的外邊距會發生疊加, 最終只保留大的元素外邊距. 外邊距疊加存在如下3種情況: 1. 當一個元素出現在另一個元素上面時, 第一個元素的底部外邊距和第二個元素的頂部外邊距發生疊加. 2. 當一個元素包含在另一個元素時(假設沒有內邊距或者邊框將外邊距分隔開), 它們的頂和/底部外邊距也會發生疊加. 3. 外邊距升值可以與自身發生疊加. 假設有一個空元素, 它有外邊距, 但是沒有內邊距和邊框. 此時, 頂外邊距與底外邊距就碰到一起了, 它們會發生疊加. 只有在普通文檔流中的垂直外邊距才會發生疊加. 行內框, 浮動框或絕對定位框之間的外邊距都不會疊加. ## 定位概述 CSS中有三種定位機制: 普通流, 浮動流, 絕對定位. 除非專門指定, 否則所有的框都在普通流中. 普通流中的元素的位置是由元素在HTML中的位置決定的. ### 普通流 大多數的框是由顯式定義的元素形成的, 但是, 在將一些文本添加到一個塊級元素(比如div)的開頭時, 這些文本也會被當成塊級元素對待, 它們被稱為: 匿名塊. 如 ```html <div> Some text <p> hello world </p> </div> ``` ### 相對定位 如果對一個元素進行相對定位, 它將出現在它所在的位置上. 然后, 可以通過設置垂直或者水平位置(top, left, bottom, right), 讓這個元素"相對于"它的起點移動. 在使用相對定位時, 無論是否移動, 元素仍然占據原來的空間, 因此, 移動元素會導致它覆蓋其他框. ### 絕對定位 相對定位實際上被看起普通流定位模型的一部分, 因為元素的位置是相對于它在普通流中的位置的. 絕對定位使元素的位置與文檔流無關, 因此不占據空間. 絕對定位的元素的位置是相對于距離它最近的那個已定位的祖先元素確定的. 如果元素沒有祖先已定位, 則相對于起始元素(html元素). ### 固定定位 是絕對定位的一種, 只相對于viewport進行定位. ### 浮動 浮動的框可以左右移動, 直到它的外邊緣碰到包含框或另一個浮動框的邊緣. 因為浮動框不在文檔的普通流中, 所以文檔的普通流中的塊框表現得就像浮動框不存在一樣. - 行框和清理 如果浮動的元素后面有一個文檔流中的元素, 那么這個元素的框會表現得浮動元素根本不存在一樣, 但框的文本內容會收到浮動元素的影響, 會移動留出空間. 即浮動元素旁邊的行框被縮短, 從而給浮動元素留出空間, 因為行框圍繞浮動框. - 清除浮動 1. 在浮動元素后添加一個空的div, 給div設置`clear:both` 2. 給浮動的父元素設置一個`parent::after`偽類, 設置樣式清除浮動. ```css .parent::after{ content:'.'; display: block; height: 0; clear: both; visibility: hidden; } ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看