前端開發工程師 - 04.頁面架構 - CSS Reset & 佈局解決方案 & 響應式 & 頁面優化 &規範與模塊化

如圖所示，一個水平排列的列表，每項高度都未知，但要求底部對齊，有哪些方法能夠解決呢？html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平列表的底部對齊</title>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
        }
        .parent {
            display: flex;
            align-items:flex-end;
            height: 30%;
            width: 50%;
            margin: auto;
        }
        .children {
            float: left;
            width: 25%;
            margin-bottom: 10px;
        }
        #item_1 {
            height: 50%;
            background-color: #006899;
        }
        #item_2 {
            height: 33%;
            background-color: #9f0000;
        }
        #item_3 {
            height: 17%;
            background-color: #00970a;
        }
        #item_4 {
            height: 40%;
            background-color: #009999;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="children" id="item_1"></div>
        <div class="children" id="item_2"></div>
        <div class="children" id="item_3"></div>
        <div class="children" id="item_4"></div>
    </div>
</body>
</html>

實現一個幻燈佈局

一個幻燈片效果如圖：css3

已知結構以下：express

<div class="slide">瀏覽器

架構

編輯器

<div class="pointer"><i></i><i></i><i></i></div>ide

</div>模塊化

要求以下：幻燈（slide）寬高未知，指示器（pointer）在底部且水平居中，距離底部10px，指示器中的圓直徑爲10px，個數未知，背景爲黑色，間距爲5px，請完成CSS。工具

.slide {
    display: flex;
    align-items:flex-end;
    height: 200px;
    width: 400px;
    margin: auto;
    margin-top: 200px;
    background-color: #9dc3e6;
}
.pointer {
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-bottom: 10px;
}
.pointer i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-style: solid;
    background-color: black;
    border-radius: 50%;
}

多列布局

全屏佈局

第3章--響應式

瀏覽網頁使用的設備屏幕大小迥異，如何保證頁面在不一樣設備上都正常顯示呢？

優勢：無需爲不一樣設備編寫對應的頁面 --> 下降開發成本、維護成本

缺點：頁面中某些部分在某些設備上會被隱藏（資源加載了，可是隻是用CSS隱藏了）

initial-scale爲0時，初始化不會進行等比縮小
user-scalable爲no時，用戶沒法手動縮放

1. 最基本要求：少用定寬屬性，使用自適應（都是定寬則會出現水平滾動條）

2. 若是左邊的菜單是定寬，右邊的主內容爲自適應，在電腦和pad端均可行，可是在手機端會出現主內容寬度過窄

想要實現菜單和主內容在手機端佈局成上下排列（即佈局方式改變了）-- 媒體查詢 @media

使用@media媒體查詢resolution的方式，設定圖片不一樣分辨率的url便可

已知一個自適應佈局的HTML結構以下：

</div>

請完成如下響應式要求：

一、默認狀況，PC電腦（假設視窗都大於等於1000px）訪問：兩列布局，.parent寬960px且水平居中，左列.side寬300px，右列.main寬650px，列間距10px。

二、當用平板（假設視窗都大於400px且小於1000px）訪問：兩列布局，.parent寬度撐滿，右列.main自適應剩餘寬度，兩列間距仍舊爲10px。

三、當用手機（假設視窗都小於等於400px）訪問：上下兩行佈局，.parent寬度撐滿，.side和.main寬度也撐滿，行間距爲10px。

響應式的單元測驗

第4章--頁面優化

避免使用import方式引入css文件（每一個import都會產生一個請求，且這些請求是串行的）

選擇合適的圖片格式：半透明的小圖標：PNG；色彩絢麗尺寸比較大：JPG

將css文件放在<head>中，在head中找到css文件進行下載並解析；當在body中遇到相應元素時，就能夠直接將解析好的對應css樣式應用到元素上；這樣用戶看到的頁面就很順暢

若是將css文件放到底部的話，極可能第一次渲染的時候沒有將這些樣式應用到元素上

將js文件放在<body>的底部，由於js的加載和執行會阻塞其餘資源的加載和頁面的執行和渲染，並且js的不少邏輯也是等到頁面加載完成後纔開始處理的

減小標籤數量：標籤數量不少，當js遍歷頁面的DOM時會對性能產生影響；對可讀性也有提高

好比expression的計算量較大、filter、border-radius、box-shadow、gradients等

img標籤中的圖片儘可能不要進行縮放，儘可能直接使用原圖大小

由於：瀏覽器在解析html代碼時，有可能在圖片下載完成前就對頁面的佈局進行了定位，若是沒有給圖片設置固定寬高或原圖寬高與設置寬高不一樣，瀏覽器在圖片下載完成後，須要進行迴流和重繪，將圖片從新渲染一遍。

能用css實現的儘可能都用css來實現，好比選中狀態的樣式能夠經過css或js實現，儘可能使用css

語義化：對搜索引擎和屏幕閱讀器友好，也能增長可讀性和可維護性

儘可能避免hack：有的時候爲了兼容不一樣瀏覽器會進行一些hack，須要想一下是否有別的方式代替hack，若是沒有辦法或代價比較大的時候才用hack的方式；hack的方式也要統一，好比對IE6就用*號、對IE7就用_號。

模塊化：把頁面中一系列相關的部分作成一個模塊，好比導航模塊、列表模塊等

1. h1, h2, h3中font-weight屬性重複
2. .g-bd中border屬性可簡寫
3. .g-bd中color屬性可縮短表示
4. .m-tab中margin屬性可簡寫
5. .m-tab中color屬性可縮短表示
6. .m-tab li a 選擇器可省略中間的li (甚至.m-tab也能夠省略)
7. .m-tab li a中padding的0px的單位可省略
7. .m-tab li a中的font屬性可簡寫
8. .m-side中background屬性可簡寫

第5章--規範與模塊化

每一個工程師都有本身的規範，人員的更替，使得後期維護成本提升

規範

行內樣式：不推薦--表現與內容分離（可是某些時候必須用到）

好比對於佈局類樣式，可使用"g-"做爲前綴等等自定義命名規則

單行與多行：單行：節省空間、編輯器可能造成水平滾動條；多行：文件可能須要豎直滾動條

空格與分號：縮進：2個或4個空格；規則內空格，好比key-value之間的空格等；須要保留最後一個屬性的分號（爲了不沒必要要的錯誤）

文本屬性和其餘修飾：font, text-align, text-decoration, vertical-align, white-space, color, background等

值格式：統一屬性值格式，好比顏色（通常選擇#xxx的形式）；無引號/單引號/雙引號

屬性：選擇雙引號仍是單引號；某些屬性是否寫屬性值，好比: <input readonly>仍是<input readonly="readonly">

層級：用縮進體現層級，提升可讀性；標籤正確嵌套(好比<ul>下嵌套<li>)，且不要太深--性能問題

註釋：好比使用什麼格式？如註釋頭註釋尾  ......

圖片合併：儘量使用sprite技術，指定劃分方式，如按模塊、按業務等

模塊化

在學完了本課程後，推薦你們學習網易內部的CSS規範以及模塊化方案——NEC：

用模塊化的思想實現下圖所示導航（寫出html和css代碼，CSS只需寫出選擇器）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模塊化實現</title>
    <style type="text/css">
        .m-nav {}
        .m-nav .m-elem {}
        .m-nav .selected {}
    </style>
</head>
<body>
    <ul class="m-nav">
        <li class="m-elem seleted">分類方法</li>
        <li class="m-elem">命名規則</li>
        <li class="m-elem">代碼格式</li>
        <li class="m-elem">優化方案</li>
        <li class="m-elem">最佳實踐</li>
        <li class="m-elem">典型錯誤</li>
    </ul>
</body>
</html>

前端開發工程師 - 04.頁面架構 - CSS Reset & 佈局解決方案 & 響應式 & 頁面優化 &規範與模塊化

04.頁面架構

第1章--CSS Reset

第2章--佈局解決方案

居中佈局

水平列表的底部對齊