基本视觉格式化——块级元素

块级元素——水平格式化(非替换元素)

  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. 若块级元素设置了内边距或边框,其高度则是从最高子元素的外边距边界到最低子元素的外边距边界

    也就是说外边距的合并只有当外边距直接相邻时才能发生

负外边距

外边距合并时,若都为负值,则为其绝对值的最大值;若一正一负,则做加法

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