資訊專欄INFORMATION COLUMN
摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的
布局 描述
表示對頁面中的顯示效果進行一些排列
水平方向居中
垂直方向居中
居中布局
水平方向居中 第一種方式水平居中 + 行內塊級元素（text-align: center + display: inline-block）
水平居中的第一種方法
第二種方式
外邊距特性（margin: 0 auto）
水平居中的第二種方式
第三種方式
定位（position屬性 + transform屬性）
水平居中的第三種方式
垂直方向居中
第一種方式
定義元素類型 + 垂直居中（display: table-cell + vertical-align: middle）
垂直居中的第一種方式
第二種方式
定位（position屬性 + transform屬性）
垂直居中的第二種方式
居中布局
表示水平方向和垂直方向同時居中
第一種方式水平方向 - 外邊距（margin: 0 auto）
垂直方向 - 定義元素類型 + 垂直居中（display: table-cell + vertical-align: middle）
居中布局的第一種方式
第二種方式
定位（position屬性 + transform屬性）
居中布局的第二種方式
兩列布局
表示水平排列的元素布局方式
第一種方式浮動 + 外邊距
第一種兩列布局
第二種方式
通過浮動 + 外邊距 + 父級容器實現兩列布局
第二種兩列布局
第三種方式
浮動 + BFC模式
第三種兩列布局
第四種方式
通過display屬性實現兩列布局
第四種兩列布局
三列布局
右邊自適應三列布局
中間自適應三列布局
右邊自適應三列布局在兩列布局的基礎上在加上一列定寬
可以按照兩列布局的方式來實現
三列布局 - 右自適應
中間自適應三列布局
第一種方式
改變HTML代碼順序結構
三列布局 - 中間自適應
第二種方式
為中間自適應的區域添加子級,解決覆蓋問題
三列布局 - 中間自適應
第三種方式
簡易圣杯布局
三列布局 - 中間自適應
第四種方式
簡易雙飛翼布局
三列布局 - 中間自適應
定分布局
表示子級元素平均分配父級元素的寬度
沒有間隙的等分布局
有間隙的等分布局
沒有間隙的等分布局 通過百分比來設置
等分布局
通過display屬性來實現等分布局
等分布局
有間隙的等分布局
添加容器 + 外邊距 + overflow屬性
等分布局 - 有間距
添加容器 + 外邊距 + 定位
等分布局 - 有間距
等高布局
等高布局 - 表示在一行中的元素擁有相同的高度
簡單粗暴的方式 - 直接設置統一高度
通過display屬性設置等高布局
通過設置 內、外邊距 進行擠壓實現偽等高
通過display屬性設置等高布局為指定元素添加整體容器，并且設置display屬性，定義為表格（table屬性值）
為指定元素設置display屬性，定義為表格中的單元格（table-cell屬性值）
通過表格的特性實現等高布局
等高布局
我是誰、我在那、我要干啥
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet blanditiis cum enim inventore iure nihil odit, optio porro quasi reiciendis similique sit tempora voluptate voluptates voluptatibus. Amet, iure!
通過設置 內、外邊距 進行擠壓實現偽等高
為指定元素設置下內邊距，向下拉伸
為指定元素設置下外邊距（負值），向上擠壓
為整體容器設置overflow屬性，隱藏多余的部分實現偽等高布局
等高布局
我是誰、我在那、我要干啥
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet blanditiis cum enim inventore iure nihil odit, optio porro quasi reiciendis similique sit tempora voluptate voluptates voluptatibus. Amet, iure!
全局布局
表示對整個頁面進行布局
可以通過固定定位來實現
全屏布局
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113800.html
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的 布局 描述 表示對頁面中的顯示效果進行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內塊級元素（text-a...
閱讀 1958·2021-11-16 11:45
閱讀 3668·2021-09-06 15:02
閱讀 2013·2019-08-30 15:44
閱讀 2282·2019-08-30 11:21
閱讀 1845·2019-08-29 16:31
閱讀 3421·2019-08-29 13:55
閱讀 1894·2019-08-29 12:15
閱讀 3251·2019-08-28 18:05
