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

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                # 第 29 章 CSS3 彈性伸縮布局[上] 學習要點: 1.布局簡介 2.舊版本 主講教師:李炎恢 本章主要探討 HTML5?中 CSS3?提供的用來實現未來響應式彈性伸縮布局方案,這里做一個初步的了解。 **一.布局簡介** CSS3 提供一種嶄新的布局方式:Flexbox 布局,即彈性伸縮布局模型(Flexible Box)。用來提供一個更加有效的方式實現響應式布局。但是用于這個布局方式還處于 W3C?的草案階段,并且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。在發展中,可能還有各種改動,瀏覽器的兼容性還存在問題。所以,本節課作為初步了解即可。 首先,我們來看下舊版本的瀏覽器兼容情況: Flexbox 舊版本兼容情況 | **屬性** | **IE** | **Firefox** | **Chrome** | **Opera** | **Safari** | | --- | --- | | 帶前綴 | 無 | 4 ~ 25 | 4 ~ 31 | 15 ~ 18 | 5.17+ | | 不帶前綴 | 無 | 無 | 無 | 無 | 無 | 以上的數據,我們摘自 CSS3?手冊上的。當然,不同的教材和文章的會略有不同。但誤差率也就一到兩個版本,影響不大。 首先,第一步:先創建一段內容,分成三個區域。 //HTML 部分? ``` <div> <p> 第一段內容... </p> <p> 第二段內容... </p> <p> 第三段內容... </p> </div> ``` //CSS 部分? ``` p { width: 150px; border: 1px solid gray; margin: 5px; padding: 5px; } div { display: -moz-box; display: -webkit-box; display: box; } ``` 通過以上設置,在除了 IE?瀏覽器外,布局實現了水平分布。那么下面,我們就重點研究一下這些屬性的含義。 **二.舊版本** 如果屬性和屬性值為:display:box,那么就是 2009?年 7?月份設定的工作草案,屬于舊版本。它面向的是一些早期瀏覽器的彈性布局方案。 首先,我們要將幾個需要布局模塊的父元素設置一下容器屬性 display。 | **屬性值** | **說明** | | --- | --- | | box | 將容器盒模型作為塊級彈性伸縮盒顯示(舊版本) | | inline-box | 將容器盒模型作為內聯級彈性伸縮盒顯示(舊版本) | 我們知道塊級它是占用整行的,類似&lt;div&gt;元素;而內聯級不占用整行,類似&lt;span&gt;元素。但是我們設置了整個盒子,他們都不占用,保持一致。 //設置彈性,以火狐為例 ``` div { display: -moz-box; } ``` **1.box-orient** **屬性** box-orient 主要實現盒子內部元素的流動方向。 //設置垂直流動 ``` div { -webkit-box-orient: vertical; } ``` | **屬性值** | **說明** | | --- | --- | | horizontal | 伸縮項目從左到右水平排列 | | vertical | 伸縮項目從上到下垂直排列 | | inline-axis | 伸縮項目沿著內聯軸排列顯示 | | block-axis | 伸縮項目沿著塊軸排練顯示 | **2.box-direction** box-direction 屬性主要是設置伸縮容器中的流動順序。 //設置逆序 ``` div { -moz-box-direction: reverse; }? ``` | **屬性值** | **說明** | | --- | --- | | normal? | 默認值,正常順序 | | reverse? | 逆序 | **3.box-pack** box-pack 屬性用于伸縮項目的分布方式。 //分布方式已結束位置靠齊 ``` div { -moz-box-pack: end; }? ``` | **屬性值** | **說明** | | --- | --- | | start | 伸縮項目以起始點靠齊 | | end | 伸縮項目以結束點靠齊 | | center | 伸縮項目以中心點靠齊 | | justify | 伸縮項目平局分布,-webkit-支持,-moz-不支持 | **4.box-align** box-align 屬性用來處理伸縮容器的額外空間。//居中對齊,清理上下額外空間 ``` div { -moz-box-align: center; } ``` | **屬性值** | **說明** | | --- | --- | | start | 伸縮項目以頂部為基準,清理下部額外空間 | | end | 伸縮項目以底部為基準,清理上部額外空間 | | center | 伸縮項目以中部為基準,平均清理上下部額外空間 | | baseline | 伸縮項目以基線為基準,清理額外的空間 | | stretch | 伸縮項目填充整個容器,默認 | **5.box-flex** box-flex 屬性可以使用浮點數分配伸縮項目的比例//設置每個伸縮項目占用的比例 ``` p:nth-child(1) { -moz-box-flex: 1; } p:nth-child(2) { -moz-box-flex: 2.5; } p:nth-child(3) { -moz-box-flex: 1; } ``` **6.box-ordinal-group** box-ordinal-group 屬性可以設置伸縮項目的顯示位置。 //將第一個位置的元素,跳轉到第三個位置 ``` p:nth-child(1) { -moz-box-ordinal-group: 3; } ```
                  <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>

                              哎呀哎呀视频在线观看