關於CSS的隻言片語

 

　　這段時間作了一個簡單的頁面，藉機又重溫了一下CSS的相關知識，現總結一下：

• 工欲善其事必先利其器，讓咱們先作一點準備工做
  
  1.在頁面添加：

<meta http-equiv="x-ua-compatible" content="ie=edge"> 

　　指定IE利用標準模式渲染頁面，而不是兼容模式

<meta name="viewport" content="width=device-width,initial-scale=1"> 

　　viewport的屬性
　　width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
　　height：和 width 相對應，指定高度
　　initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例
　　maximum-scale：容許用戶縮放到的最大比例
　　minimum-scale：容許用戶縮放到的最小比例
　　user-scalable：用戶是否能夠手動縮放，默認爲yes

　　2.引入normalize.css

　　　　多數時候咱們都用reset.css來去除或規範一些瀏覽器的默認樣式，normallize.css 較之 reset.css 提供了更好的樣式跨瀏覽器一致性體驗。

　　　　normalize.css   

　　　　來，讓咱們談一談 Normalize.css   微吐槽：實際項目中normalize沒有去除ul的padding等相似的值，誰能告訴我爲何？

　　3.利用BrowserSync來調整編輯頁面

　　　　這個工具真的很強大，支持sass和less的實時編輯預覽，不再用擔憂save & F5了。(下載頁面)

　　4.多用Can I Use（http://caniuse.com/）

　　　　不只列出各瀏覽器的支持程度，還能提供一些issues文檔，多查查你確定會收穫更多。

• 項目實踐中的一點經驗總結

　　1.固定背景

　　　　視差效果是愈來愈流行了，其實我以爲設置一個固定背景就能實現一個最簡單的視差效果，提高你的網站bigger。

　　　　　　background-attachment: fixed 使背景圖不隨頁面的滾動而滾動
　　　　　　background-size: cover 使背景圖始終填滿整個屏幕
　　　　　　background-position: center; 使背景圖居中
　　　　　　更多background屬性參考

　　2.關於Collapsing Margins
　　　　常見的相鄰兩個塊級元素垂直margin合併、子元素margin傳遞到父級margin其實都是Collapsing Margin 惹的禍。詳細介紹能夠參考collapsing-margins.其中針對margin傳遞問題可用設置border或padding處理。

　　3.關於overflow:hidden的兩個實現原理

　　　　當文字和圖片同級且同時設置浮動時：

　　　　

　　　　有時咱們並不想讓文字全包圍圖片，而是這樣

 　　　　

 　　　　沒有設置overflow：hidden時，文字內容的容器與外部容器左邊界是重合的, 修改後，這個容器內的內容（context）屬性變爲了block formating contexts(參考block-formatting  以及 bfc-next-to-float)，直接效果就是圖片和文字各自的容器在同時浮動時再也不有重合的部分。　　

　　　　更多內容可參考：CSS 101: Block Formatting Contexts

　　　　　　　　　　　　How does the CSS Block Formatting Context work?

　　　　另外常見到用overflow:hidden來清除浮動，其原理是：容器在計算自身高度的時候必需要有足夠的高度包圍全部的子元素。但 float 的元素 （還有絕對定位的元素）並不包含在這個計算裏面，設置overflow就能夠改變容器計算高度的方式讓容器 float 元素包含在高度計算內。（參考： bfc-next-to-float）

　　4.簡化佈局的border-box
　　　　盒模型（content-box）在計算寬度（width）時是不包括border\padding的，因此若是用width:25%設置一排四個均勻分佈的span時，極可能得不到想要的效果。這時將其轉化爲border-　　　　box（width=content+padding+border）模型就能很好的完成需求.參考box-sizing

　　5.絕對定位（absolute）
　　　　經常使用的絕對定位的場景是：針對正常佈局的主要頁面元素（設置參考  position:relative）將其輔助的頁面組件設置爲position:absolute，列入下拉菜單，彈出的菜單選項就是輔助組件。

　　　　

　　　　這裏須要注意的是，輔助組件必定要設置寬度（百分比或指定寬度皆可），不然器寬度會變得不肯定。

　　6.一些關於語義化實現的細節
　　　　標題文字下裝飾性的下劃線、指示用的小三角符號以及清除浮動均可以藉助僞元素（:after和:before）來實現，更好遵循樣式和內容分離的原則。
　　　　此外在頁面引入nav/section/header/article等標籤能更好遵照語義化（Semantic）規範。語義化Semantic參考 另外 normalize.css幫咱們處理好了IE8-瀏覽器對新標籤元素的支持問題。

　　7.怎能忘記響應式
　　　　響應式的頁面不單單是包括了能夠解決因屏幕大小而產生布局問題的Media Query，還要考慮到因帶寬小和高延遲帶來的資源加載、用戶體驗等問題。可參考Resposive Disgn

　　　　先說到這裏，有可吐槽的地方，歡迎拍磚。