前端基礎(三)

• 含有z-index的圖解
  CSS佈局(三) 佈局模型
  float設計初衷
  CSS佈局(五) 網頁佈局方式
  CSS佈局(六) 對齊方式

  水平居中

• 1 行內元素，在父元素中設置text-align:center實現行內元素水平居中，將子元素的display設置爲inline-block，使子元素變成行內元素
• 2 塊狀元素（定寬）， margin: 0 auto

• 3 塊狀元素（不定定寬，導航欄）能夠直接給不定寬的塊級元素設置text-align：center來實現，也能夠給父元素加text-align:center 來實現居中效果。

  垂直居中

• 1 子元素是行內元素，高度是由其內容撐開的，經過設定父元素的line-height爲其高度來使得子元素垂直居中
• 2 子元素是塊級元素可是子元素高度沒有設定，經過給父元素設定display:table-cell;vertical-align:middle來解決

• 3子元素是塊級元素且高度已經設定，計算子元素的margin-top或margin-bottom，計算方法爲父(元素高度-子元素高度)/2

  水平垂直居中

• 1 水平對齊+行高，text-align + line-height實現單行文本水平垂直居中
• 2 水平+垂直對齊，text-align + vertical-align　　在父元素設置text-align和vertical-align，並將父元素設置爲table-cell元素，子元素設置爲inline-block元素

<style>
.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}
</style>

• 3 相對+絕對定位，(子絕父相)

左側固定，右側自適應

---

聖盃佈局

雙飛翼佈局* 阿里筆試題 *

---

這篇文章後面引用了CSS3中的計算函數calc()，還沒有涉及，先屯起來
這多是史上最全的CSS自適應佈局總結教程
優點在於若是不使用calc函數，那麼就須要wrap左邊距爲0，left左邊距-100%，而後center多加一層子塊DIV設置margin-left：100px，能夠達到一樣的效果！calc函數與百分比配合就足以實現自適應的要求！目前全部的自適應佈局都在利用瀏覽器來爲咱們計算尺寸，可是有了calc以後咱們就能夠本身制定規則！