加载中…
个人资料
cicy
cicy
  • 博客等级:
  • 博客积分:0
  • 博客访问:4,413
  • 关注人气:2
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

前端开发之CSS的基本布局(二)

(2012-10-30 10:09:12)
标签:

css

块级元素

合并边距

margin

分类: 技术

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

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

前端开发之CSS的基本布局(二)
Note: 元素的width属性是指左内边距与右内边距的距离,可见框的宽度是左边框与右边框的距离,整个元素框的宽度是左外边距与右外边距的距离,;相关高度亦是同理

水平格式化

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

前端开发之CSS的基本布局(二)

在这七大属性中只有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.

前端开发之CSS的基本布局(二)

 

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

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

前端开发之CSS的基本布局(二)

 

ul{margin-bottom:15px;}
li{margin-top:10px;margin-bottom:20px;}
h1{margin-top:28px; }
前端开发之CSS的基本布局(二)

  • 当出现负外边距,会对垂直格式化有影响,也会影响外边距的合并. 负外边距会使元素超出其父元素.出现合并时会有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>

前端开发之CSS的基本布局(二)

 

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的基本布局(二)

 

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

转载请标明来源,谢谢!

http://blog.sina.com.cn/s/blog_63ff72a601016nm6.html

 

 

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有