• 含有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 相對+絕對定位，(子絕父相)

左側固定，右側自適應

聖杯布局

[雙飛翼布局] * 阿裏筆試題 *

前端基礎(三)