基本視覺格式化——塊級元素

塊級元素——水平格式化(非替換元素)

  1. 不設置margin和width,則width爲父元素的內容寬度(總寬度),margin爲0
  2. 若設置了margin,沒有設置width,則width爲總寬度減去margin
  3. 過分受限時(margin和width都有指定),各瀏覽器的處理不同,firefox保持原設置,chrome將margin-right設爲auto處理
  4. 只設置width,margin都爲auto時,得到居中效果
  5. 若只指定一個外邊距,width和另一個外邊距都設置爲auto,則爲auto的外邊距會變爲0
  6. 三個屬性都爲auto時margin都會被設爲0

負外邊距
7個水平屬性(margin,padding,border,width)之和等於父元素的width,如果設width爲auto,maring爲負值的話,則width會超出父元素;如果margin-right爲auto,爲了保證總和相等,margin-right也可能爲負值

水平外邊距不會合並

百分數
邊框的寬度不能是百分數,margin和padding的百分比是相對於父元素的width

替換元素

**例外**
width爲auto ,則width爲其固有寬度

如果width和height只設置其一,則另一個按比例變化

垂直格式化

maring-top或margin-bottom爲auto,則自動計算爲0
垂直外邊距會合並,這種合併只應用於外邊距

  1. 若塊級元素height設置auto,其默認高度是從最高子元素的的外邊框邊界到最低子元素的外邊框邊界,即不包括最高子元素的上外邊距和最低子元素的下外邊距(也就是說子元素的外邊距可以超出父元素的內容區和父元素的外邊距合併)
  2. 若塊級元素設置了內邊距或邊框,其高度則是從最高子元素的外邊距邊界到最低子元素的外邊距邊界

    也就是說外邊距的合併只有當外邊距直接相鄰時才能發生

負外邊距

外邊距合併時,若都爲負值,則爲其絕對值的最大值;若一正一負,則做加法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章