盒模型屬性

• centent 內(nèi)容
  width
height

• padding 內(nèi)邊距 隔開內(nèi)容和邊框
  padding- top | right | bottom | left

• border 邊框

• 邊框顏色 border- top | right | bottom | left | -color

• 邊框?qū)挾?border- top | right | bottom | left | -width
  medium 默認的邊框?qū)挾?| thin 小于默認的邊框?qū)挾?br> thick 大于默認的邊框?qū)挾葇 length 長度值

• 邊框樣式 border- top | right | bottom | left | -style:
  none 沒有邊框 | hidden 隱藏邊框
  dotted 邊框為點線 | dashed 邊框為虛線
  solid 邊框為實線 | double 邊框為雙線
  groove 邊框為3d凹槽 | ridge 邊框為菱形
  inset 邊框為3d凹邊 | outset 邊框為3d凸邊

• 邊框圓角 border-radius

• margin 外邊距 隔開元素與元素的間距
  margin- top | right | bottom | left
  auto 瀏覽器默認值| length 具體單位值| percentag百分比

• tip

• 簡寫 margin padding border適用
  margin：1px 2px 3px 4px ；按（上、右、下、左）順時針寫
  margin: 1px 2px 3px 2px;可簡寫成margin: 1px 2px 3px;表示上外邊距是1px 下外邊距是3px，左右外邊距都是2px
  margin: 0 1px 0 1px;可簡寫成margin: 0 10px;表示（上下）外邊距都是0px （左右）外邊距都是10px
  margin: 0 0 0 0;可簡寫成margin: 0;表示（上下左右）外邊距都是0px

• 外邊距合并
  1.當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
  2.當一個元素包含在另一個元素中時（前提是外面的元素沒有border且沒有padding），它們的上和/或下外邊距也會發(fā)生合并。
  3.當一個空元素且沒有邊框但是有外邊距top與bottom，在這種情況下，上外邊距與下外邊距也會發(fā)生合并。
  注：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。

• 關(guān)于行內(nèi)元素
  行內(nèi)元素設(shè)置width，height無效。
  行內(nèi)元素上下margin無效，上下padding撐開空間，但不占用文檔流。左右margin、padding有效。

• 設(shè)置背景色時，margin外邊距沒有顏色。

text-align: center

text-align 屬性規(guī)定元素中的文本的水平對齊方式
value=left | right | center | justify | inherit
text-align: center作用在塊級元素上，使塊級內(nèi)的行內(nèi)元素水平居中

屬性兼容性查詢工具can i use

IE 盒模型和W3C盒模型區(qū)別?

標準盒模型width=content尺寸
padding、border所占的空間不在width、height范圍內(nèi)；
IE的盒模型width=content尺寸＋padding＋border；

box-sizing作用 兼容性

* {
   box-sizing: border-box;
  }

• box-sizing屬性可以設(shè)置盒模型的組成形式
  value：
  content-box，border和padding不計算入width之內(nèi)
  padding-box，padding計算入width內(nèi)
  border-box，border和padding計算入width之內(nèi)（即怪異模式）

• *{box-sizing: border-box} 作用：為所有元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。
  更符合人們對盒子的直觀感受，計算起來更方便

• 兼容性