前端开发之CSS基本布局(二) — 块级元素布局

Author : luckyGirl

在前端开发之CSS的基本布局(一)了解了一些基本概念后接下来看一下块级元素是如何布局的,

首先先看以下块级元素的完整框模型

盒模型
Note: 元素的width属性是指左内边距与右内边距的距离,可见框的宽度是左边框与右边框的距离,整个元素框的宽度是左外边距与右外边距的距离,;相关高度亦是同理

水平格式化
水平格式化的7大属性有: margin-left, border-left, padding-left, width, padding-right, border-right, margin-right.元素框的宽度即七大属性的值相加即包含块的宽度.

在这七大属性中只有margin和width可设置为auto ,其他必须是特定值或默认值0,值的处理会出现以下情况:

  • width, margin-left, margin-right中有一个属性值为auto,其余两个属性为特定值,那么设置为auto 的属性会确定所需长度,从而使整个元素框的宽度等于包含块的宽度 eg.p{margin-left:auto;margin-right:100px;width:100px;}
  • 三个属性都设置为某特定值,即过分受限,margin-right的值会被强制设置为auto, eg.p{margin-left:auto;margin-right:100px;width:100px;}
  • margin-left, margin-right被设为auto, width值固定,元素将居中, margin-left, margin-right的值相等
  • width与某个margin设为auto, 此margin值为0
  • 当三个属性值都为auto, 则margin值为0
  • 当出现负外边距时,仍遵守七大属性之和为包含块的宽度,此时可能出现内容宽度大于包含块宽度的情况, eg.p{margin-left:10px;margin-right:-50px;width: auto;}

垂直化格式
一个元素的默认高度由其内容决定.
像width一样,height定义了内容区的高度,而不是可见元素框的高度. 垂直格式化也有7个相关的属性: margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom.

在这七大属性中只有margin和height可设置为auto ,其他必须是特定值或默认值0,值的处理会出现以下情况:

  • margin-top, margin-bottom设置为auto,会自动被计算为0
  • height设为auto,其高度将刚好包含其内联内容的行盒
  • 垂直相邻外边距的合并,这是水平外边距不会出现的情况,当在普通流中,相邻外边距会沿着竖轴合并,两个外边距中较小的一个会被较大的一个合并,如果相邻有多个外边距,也会出现合并,eg.li{margin-top:10px;margin-bottom:15px;}


ul{margin-bottom:15px;}
li{margin-top:10px;margin-bottom:20px;}
h1{margin-top:28px; }

  • 当出现负外边距,会对垂直格式化有影响,也会影响外边距的合并. 负外边距会使元素超出其父元素.出现合并时会有2种情况:垂直边距都设置为负值,浏览器会取两个外边距绝对值的最大值;一正一负,取其和.

eg. 负上边距
p.neg{margin-top:-50px;margin-right:10px;
margin-left:10px;margin-bottom:0;
border:3px solid gray;}
div.parentNode{width:420px;background-color:silver;
padding:10px;margin-top:50px;border:1px solid;}
<div class=” parentNode”>
<p class=” neg”>A paragraph</p>
A div
</div>

eg. 负下边距
p.neg{margin-bottom:-50px;margin-right:10px;
margin-left:10px;margin-bottom:0;
border:3px solid gray;}
div.parentNode{width:420px; margin-top:50px; }
<div class=” parentNode”>
<p class=” neg”>A paragraph</p>
The next paragraph
</div>

主要参考书目: <<CSS权威指南(第三版)>>

转载请标注来源 : http://www.yuuuuc.me/?p=510

standard

Have your say