预览加载中，请您耐心等待几秒...

css中margin属性详细分析.doc

预览
1/7
2/7
3/7
4/7
5/7
6/7
7/7

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

Css中margin属性详细解析 写css，你少不了与margin打交道。你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… Margin是什么 CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南 我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 Margin的特性 margin始终是透明的。margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。 外边距的margin-width的值类型有：auto|length|percentage。也可以使用简写的外边距属性同时改变所有的外边距：margin:toprightbottomleft;(eg:margin:10px20px30px40px)记忆方式是元素周围正上方顺时针“上右下左”记忆。 并且规范还提供了省略的数值写法，基本如下： 如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px;就等于margin:10px10px10px10px; 如果margin只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px20px;就等于margin:10px20px10px20px; 如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px20px30px;就等于margin:10px20px30px20px; 如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px20px30px40px; 在实际应用中，个人不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px20px30px;日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px30px30px20px;费力且不讨好，不如一开始就老老实实的写成margin:10px20px30px20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。 垂直外边距合并问题 别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3ShoolCSS外边距合并了解这个基本知识。 实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)： 01<htmlxmlns="HYPERLINK"http://www.w3.org/1999/xhtml"http://www.w3.org/1999/xhtml">02<head> 03<title>垂直外边距合并</title>04<style> 05.top{width:160px;height:50px;background:#ccf;}06.middle{width:160px;background:#cfc;} 07.middle.firstChild{margin-top:20px;}08</style> 09</head>10 11<body>12<divclass="top"></div> 13<divclass="middle">14<divclass="firstChild">我其实只是想和我的父元素隔开点距离。</div> 15<divclass="secondChild"></div>16</div> 17</body