小結常見佈局技巧

1.0 子絕父相，盒子塌陷，建立BFC

 當浮動解決不了問題的時候，會考慮用定位實現，而爲了頁面的穩定性，要給父元素相對定位
​
 當嵌套的標準流，塊級子盒子設置上外邊距就會出現塌陷
​
 觸發BFC能解決平常網頁開發中不少沒必要要的麻煩

 

2.0 佈局規律

 從上到下，從外到內，從左到右，實體化盒子，再考慮內容
 浮動解決一行多個的問題，浮動解決不了的就用定位
 能用寬度就不用padding，能用padding就不用margin
 能用標準流就不用浮動，能用浮動就不用定位
​
 a的做用很特殊，能夠裝塊級元素，也能夠被裝在行內元素中
 a連接默認空連接給#，須要有小手作點擊效果，給javascript:;
​
 單行文本垂直居中行高等於高度，多行文本沒有垂直居中，行高須要量取
​
 若是有字體圖標的狀況下，能用字體圖標就不要用精靈圖

 

3.0 常見錯誤佈局

 p標籤不能裝div，只能裝文字標籤

 選擇器不須要寫的特別特別長，計算權重會很麻煩

 要浮動就都要浮動，否則盒子不能到一行顯示，浮動的元素會脫離標準流
​
 若是但願盒子有移動效果，不要使用padding或者margin，而使用相對定位或者位移轉換，佔位置

 

4.0 瀏覽器特性

 行內塊盒子默認基線對齊，在塊級盒子內會往下錯位 
​

img {
    vertical-align: middle;
}

 

​
 通常用浮動解決，好比默認圖片就會有底部透明像素和文字排版也有問題 
​
 a連接不繼承樣式，須要單獨設置 
 a連接設置了新的顏色，hover就沒有了，通常須要從新設置 
​
 浮動的元素，要給父元素清除浮動，否則父盒子沒有高度，會影響佈局 
​
 沒有加寬度的盒子給padding值或者margin值，盒子內容會自動縮減 

 

5.0 常見css佈局技巧

 文字水平居中給父盒子設置text屬性，盒子水平居中給自身設置margin或者定位
 使用精靈圖區別於圖像標籤，要區分用法，大致上沒什麼區別，可是小圖標大多都用背景獲取精靈圖
​
 初始化的樣式要先引入，後寫的css要後引入，由於css是層疊樣式表
​
 列表中的元素須要給邊框，要先給其餘人都加上邊框，避免抖動（參考品優購詳情頁的左側圖片列表佈局）
​
 通常給父盒子加上hover 給子盒子改變內容，能夠作一些特殊效果，還穩定
​
 電梯導航類的固定定位的盒子經過中線對齊，而後移動到版心以外，不以瀏覽器爲基準
​
 若是列表盒子一行想展現多個，可是寬度差幾像素，能夠給父元素單獨設置比子盒子寬度總和大一點，就能夠去一行上顯示了，若是有多餘部分要給父盒子的父盒子溢出隱藏
​
 若是寫左右定位盒子，不少屬性能夠集體聲明，可是記住left和right要單獨聲明，由於層疊不掉
​
​

 

6.0 查找問題

 出現問題，先打開審查元素，點擊盒子，查看結構是否正常嵌套，在看右側樣式是否正確或顯示，觀察盒子大小，設置hover效果，調試盒子位置
​
 css文件中任何一個語法錯誤都會致使語句失效，單詞拼錯，少告終束括號，註釋錯誤，中文符號，空格使用錯誤
​
 css單個盒子最後一句css不寫分號不報錯，可是建議都寫上最好
​
 可能還會有別的沒有講到的，可是至此應該要知道核心思想，由於東西是學不完的

 

{
  /* 解決英文字在盒子內不還行的問題 */
  word-break: break-word;
  
  /* 字間距 */
  letter-spacing: 1px;
}