Web前端學習筆記——CSS京東案例、BFC
京東專案(一)
京東專案介紹
專案名稱：京東網 專案描述：京東首頁公共部分的頭部和尾部製作，京東首頁中間部分。
專案背景
現階段電商類網站很流行，很多同學畢業之後會進入電商類企業工作，同時電商類網站需要的技術也是較為複雜的，這裡用京東電商網站複習、總結、提高前面所學佈局技術。其實，最主要的原因還是，為啥寫京東？ 因為劉強東，賺了我們的錢，搶了我們的女神， 我們也要學劉強東，賺別人的錢，搶別人…額，自己的女神。。。
設計目標
- 保證瀏覽器 ie7及以上, 火狐, 360, safari，chrome等。誰讓我再測ie6，就跟誰急。。
- 熟悉CSS+DIV佈局，頁面的搭建工作
- 瞭解常用電商類網站的佈局模式
- 為後期京東移動端做鋪墊
幾點思考
(1). 開發工具 sublime 、fireworks（ps）、各種瀏覽器(ie6.7 要測看心情)
(2). CSS Reset 類庫,為跨瀏覽器相容做準備(也可以直接運用jd網站的初始化)
normalize.css 只是一個很小的CSS檔案，但它在預設的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。Normalize.css現在已經被用於Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。 你值得擁有。。 - 保護有用的瀏覽器預設樣式而不是完全去掉它們 - 一般化的樣式：為大部分HTML元素提供 - 修復瀏覽器自身的bug並保證各瀏覽器的一致性 - 優化CSS可用性：用一些小技巧 - 解釋程式碼：用註釋和詳細的文件來
(3). 技術棧
HTML 結構 + CSS 佈局 (因為我們就會這些。。。嘻嘻)
(4). 低版本瀏覽器 單獨製作一個跳轉頁面 (都是孩子，也捨不得打，捨不得扔)
目錄說明
要實現結構和樣式相分離的設計思想。 根目錄下有這4個檔案（目錄）。
| 名稱 | 說明 |
|---|---|
| css | 用於存放CSS檔案 |
| images | 用於存放圖片 |
| index | 京東首頁 HTML |
| js | 用於後期存放javascript檔案 |
運用知識點
引入ico圖示
程式碼： <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
注意：
-
她(它)不是iconfont字型哦 也不是圖片。
-
位置是放到 head 標籤中間。
-
後面的type=“image/x-icon” 屬性可以省略。（我相信你也願意省略。）
-
為了相容性，請將favicon.ico 這個圖示放到根目錄下。（我們就不要任性了，聽話放位置，省很多麻煩。。你好，我也好）
轉換ico圖示
網站優化三大標籤
SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜尋引擎優化”！SEO是指通過對網站進行站內優化、網站結構調整、網站內容建設、網站程式碼優化等)和站外優化，從而提高網站的關鍵詞排名以及公司產品的曝光度。 簡單的說就是，把產品做好，搜尋引擎就會介紹客戶來。
我們現在階段主要進行站內優化。網站優化，我們應該要懂。。。
網頁title 標題
title具有不可替代性，是我們的內頁第一個重要標籤，是搜尋引擎瞭解網頁的入口，和對網頁主題歸屬的最佳判斷點。
建議：
首頁標題：網站名（產品名）- 網站的介紹
例如：
京東(JD.COM)-綜合網購首選-正品低價、品質保障、配送及時、輕鬆購物！
小米商城 - 小米5s、紅米Note 4、小米MIX、小米筆記本官方網站
Description 網站說明
對於關鍵詞的作用明顯降低，但由於很多搜尋引擎，仍然大量採用網頁的MATA標籤中描述部分作為搜尋結果的“內容摘要”。 就是簡要說明我們網站的主要做什麼的。 我們提倡，Description作為網站的總體業務和主題概括，多采用“我們是…”“我們提供…”“×××網作為…”“電話：010…”之類語句。
京東網：
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
注意點：
- 描述中出現關鍵詞，與正文內容相關，這部分內容是給人看的，所以要寫的很詳細，讓人感興趣， 吸引使用者點選。
- 同樣遵循簡短原則，字元數含空格在內不要超過 120 個漢字。
- 補充在 title 和 keywords 中未能充分表述的說明.
- 用英文逗號 關鍵詞1,關鍵詞2
<meta name="description" content="小米商城直營小米公司旗下所有產品，囊括小米手機系列小米MIX、小米Note 2，紅米手機系列紅米Note 4、紅米4，智慧硬體，配件及小米生活周邊，同時提供小米客戶服務及售後支援。" />
Keywords 關鍵字
Keywords是頁面關鍵詞，是搜尋引擎關注點之一。Keywords應該限制在6～8個關鍵詞左右，電商類網站可以多 少許。
京東網：
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,儲存卡,京東" />
小米網：
<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />
頂部（快捷選單）所用知識點
| 知識點 | 說明 |
|---|---|
| 通欄的盒子 | 不用給寬度 預設為 100% 但是加了浮動和定位的盒子需要 新增 100% |
| 盒子居中對齊 | margin: auto; 注意必須有寬度的塊級元素，文字水平居中對齊是 text-align:center; |
| 行高會繼承 | 文字性質的，比如 顏色、文字大小、字型、行高等會繼承父級元素 |
| 浮動元素、固定定位，絕對定位會模式轉換 | 具有行內塊特性，比如一行放多個，有高度和寬度，如果沒有指定寬度，則會根據內容多少撐開。 |
logo 和搜尋 header 區域所用知識點
網頁佈局穩定性
寬度剩餘法：
| 知識點 | 說明 |
|---|---|
| 浮動元素特性 | 1. 浮動可以讓多個元素同一行顯示 2. 浮動的元素是頂部對齊 |
| logo優化 | text-indent: -20000px; 隱藏文字， 背景圖片 |
| 清除浮動 | 清除浮動的目的就是為了解決父親高度為0的問題 |
| 滑鼠樣式 | cursor: pointer; 小手 cursor: move; 四角箭頭 cursor: text; 插入游標 cursor: default; 小白 |
| 不允許換行 | white-space: nowrap; |
nav導航欄所用知識點
| 名稱 | 說明 |
|---|---|
| 邊框底側 | border-bottom: 2px solid #ccc; |
| 定位重點 | 絕對定位不佔位置 相對定位佔有位置 |
| 標籤語義化dl | dl也是塊級元素 dt 是 定義標題 dd 是定義描述，dd是圍繞這dt來描述的，也就是說，dd算是dt 的解釋說明詳細分解。 |
| 標題標籤h | 儘量少用h1，可以多用h2和h3等標籤 |
頁面底部所用知識點
| 名稱 | 說明 |
|---|---|
| 絕對定位的盒子居中對齊 | 盒子 left 50% 然後通過 margin 負值自己的寬度一半（固定定位也是如此） |
固定定位的盒子靠近版心右側對齊
跟絕對定位的盒子居中對齊原理差不多。
left 50% 然後 margin-left 版心寬度一半。
京東專案(二)
nav導航欄所用知識點
| 名稱 | 說明 |
|---|---|
| 邊框底側 | border-bottom: 2px solid #ccc; |
| 定位重點 | 絕對定位不佔位置 相對定位佔有位置 |
| 標籤語義化dl | dl也是塊級元素 dt 是 定義標題 dd 是定義描述，dd是圍繞這dt來描述的，也就是說，dd算是dt 的解釋說明詳細分解。 |
| 標題標籤h | 儘量少用h1，可以多用h2和h3等標籤 |
固定定位的盒子靠近版心右側對齊
跟絕對定位的盒子居中對齊原理差不多。
left 50% 然後 margin-left 版心寬度一半。
焦點圖部分所用知識點
| 名稱 | 說明 |
|---|---|
| 圓角矩形 | border-radius: 左上角 右上角 右下角 左下角。 |
負值自己的寬度一半（固定定位也是如此）
背景半透明
1.強烈推薦： background: rgba(r,g,b,alpha);
r,g,b 是紅綠藍的顏色， alpha 是透明度的意思，取值範圍是 0~1 之間。
2.瞭解ie低版本瀏覽器 半透明
filter:Alpha(opacity=50) ； // opacity值為0 到 100
但是 此屬性是盒子半透明，不是背景半透明哦，因為裡面的內容也一起半透明瞭
因此，低版本的 ie6.7瀏覽器，我們不需要透明瞭，直接採用優雅降級的做法。
background: gary;
background: rgba(0,0,0,.2);
寫上兩句 背景， 低版本ie只執行gray， 其他瀏覽器執行 半透明下面這一句。
BFC(塊級格式化上下文)
BFC(Block formatting context)
直譯為"塊級格式化上下文"。
元素的顯示模式
我們前面講過 元素的顯示模式 display。
分為 塊級元素 行內元素 行內塊元素 ，其實，它還有很多其他顯示模式。
那些元素會具有BFC的條件
不是所有的元素模式都能產生BFC，w3c 規範：
display 屬性為 block, list-item, table 的元素，會產生BFC.
大家有麼有發現這個三個都是用來佈局最為合理的元素，因為他們就是用來視覺化佈局。
注意其他的，display屬性，比如 line 等等，他們建立的是 IFC ，我們暫且不研究。
這個BFC 有著具體的佈局特性：
有寬度和高度 ， 有 外邊距margin 有內邊距padding 有邊框 border。
就好比，你有了練習武術的體格了。 有潛力，有資質。
什麼情況下可以讓元素產生BFC
以上盒子具有BFC條件了，就是說有資質了，但是怎樣觸發才會產生BFC，從而創造這個封閉的環境呢？
在好比，你光有資質還不行，你需要一定額外效果才能出發的武學潛力，要麼你掉到懸崖下面，撿到了一本九陰真經，要麼你學習葵花寶典，欲練此功必先…
同樣，要給這些元素新增如下屬性就可以觸發BFC。
-float屬性不為none
-position為absolute或fixed
-display為inline-block, table-cell, table-caption, flex, inline-flex
-overflow不為visible。
BFC元素所具有的特性
BFC佈局規則特性：
1.在BFC中，盒子從頂端開始垂直地一個接一個地排列.
2.盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。
- BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
- 計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。
它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
白話文： 孩子在家裡願意怎麼折騰都行，但是出了家門口，你就的乖乖的，不能影響外面的任何人。
BFC的主要用途
BFC能用來做什麼？
(1) 清除元素內部浮動
只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設定overflow: hidden樣式，對於IE6加上zoom:1就可以了。
主要用到
計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。
外邊距合併的問題。
主要用到
盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
屬於同一個BFC的兩個相鄰盒子的margin會發生重疊，那麼我們建立不屬於同一個BFC，就不會發生margin重疊了。
(3) 製作右側自適應的盒子問題
主要用到
普通流體元素BFC後，為了和浮動元素不產生任何交集，順著浮動邊緣形成自己的封閉上下文
BFC 總結
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合併等等，因此，有了這個特性，我們佈局的時候就不會出現意外情況了。
優雅降級和漸進增強
什麼是漸進增強（progressive enhancement）、優雅降級（graceful degradation）呢？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
類似 爬山，由低出往高處爬
優雅降級 graceful degradation：
一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。
類似笨豬跳，由高處往低處下落
區別：漸進增強是向上相容，優雅降級是向下相容。
個人建議： 現在網際網路發展很快， 連微軟公司都拋棄了ie瀏覽器，轉而支援 edge這樣的高版本瀏覽器，我們很多情況下沒有必要再時刻想著低版本瀏覽器了，而是一開始就構建完整的效果，根據實際情況，修補低版本瀏覽器問題。
瀏覽器字首
| 瀏覽器字首 | 瀏覽器 |
|---|---|
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
後面我們會有 常用的解決H5和C3 的相容解決檔案， 我們這裡暫且不涉及。
背景漸變
線上性漸變過程中，顏色沿著一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或著沿任何任意軸。如果你曾使用過製作圖件，比如說Photoshop，你對線性漸變並不會陌生。
相容性問題很嚴重，我們這裡之講解線性漸變
語法格式：
background:-webkit-linear-gradient(漸變的起始位置， 起始顏色， 結束顏色)；
background:-webkit-linear-gradient(漸變的起始位置， 顏色 位置， 顏色位置....)；
CSS W3C 統一驗證工具
CssStats 是一個線上的 CSS 程式碼分析工具
網址是： http://www.cssstats.com/
如果你想要更全面的，這個神奇，你值得擁有：
因為它可以檢測本地檔案哦！！