基于CSS盒模型中的margin属性解析.docVIP

基于CSS盒模型中的margin属性解析 　　摘要：因特网的迅速发展使得HTML 排版界面效果的局限性日益明显。DIV+CSS解决了网页界面布局的难题，成为当前网页布局方式中的主流技术。而CSS盒模型更是这一技术中的重要概念，在CSS盒模型的属性中，margin属性尤为重要，它几乎可以设置在任何元素上，在使用的时候也容易出现一些问题，本文将通过实例对margin 属性进行详细解析。 　　关键词：CSS；盒模型；margin 　　中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2016）36-0074-02 　　现在，CSS已经发展得非常成功了，无论是在浏览器还是应用商店，甚至聊天客户端，CSS都无处不在并且没有任何消退的迹象。CSS也叫层叠样式表（Cascading Stylesheet），在页面制作时采用 CSS 技术，可以控制文本的颜色、字体的样式、段落的间距、背景的图像颜色以及其他各种视觉效果。其主要优势在于，相同的CSS可以用在多个页面上。当CSS与HTML、XHTML结合使用时，CSS展现出了强大的能力。 　　CSS盒模型，是基于CSS的Web设计中非常重要的概念，因为盒模型是CSS定位布局的核心内容。盒模型是针对HTML元素的一组规则，制定了元素的高度、宽度、内边距、边框和外边距是如何度量的，下面从盒模型是什么开始讲起。 　　1 CSS盒模型概念 　　XMTML中大部分的元素（特别是块状元素），都可以看作是一个盒子，而网页的元素定位实际就是这些大大小小盒子在页面中的定位。当某个块状元素被CSS设置了浮动属性，这个盒子就会自动排到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题。为什么要把XHTML元素作为盒模型来研究呢？因为XHTML元素的特性和盒子非常相似，盒子中的内容到盒子的边框之间的距离及填充（padding）；盒子本身有边框（border）；盒子边框外和其他盒子之间有边界（margin），效果如图1所示。 　　 　　图1 盒模型示意图 　　大多数XHTML元素的结构都类似于图一所示，除了包含的内容（文本或图片）外，还有内边距、边框和外边距一层层的包裹。我们在布局网页和定位XHTML元素时要充分地考虑这些要素才可以更加自如地摆弄这些盒子。下面我们就重点讲一讲盒子的外边距margin属性的应用。 　　2 CSS盒模型中的margin属性 　　margin属性应用于盒子外面的空间，或者是位于盒子和浏览器窗口之间的区域，又或者是位于盒子和文档中其他元素之间的区域。表一显示了各种margin属性。margin属性是margin-top、margin-right、margin-bottom和margin-left四个单独属性的简写属性。值得注意的是盒模型简写属性总是以顺时针方向指定，从top开始： top、right、bottom和left。 　　2.1 margin 的基本写法 　　表达式：margin：top right bottom left； 　　margin属性值是数值单位，可以是长度、百分比或 auto，margin 甚至可以设为负值，造成 BOX与BOX之间的重叠显示。 　　例如：margin：70px 100px 50px 100px；可以看到这个语句给相应内容设置了有70px上外边距，100px的左右外边距和50px的下外边距的BOX。 　　margin 在书写时可以省略参数，基本原则如下： 　　1）如果没有left值，则默认使用right值替代； 　　2）如果没有bottom值，则默认使用top值替代； 　　3）如果没有right值，则默认使用top值替代。 　　例如：margin：50px 100px；这个语句等同于 　　margin：50px 100px 50px 100px； 　　margin：50px；这个语句等同于 　　margin：50px 50px 50px 50px； 　　2.2 margin 边界折叠问题 　　在CSS中，当两个或多个BOX的上或下外边距接触时，会产生外边距折叠。只有垂直margin会折叠，水平margin不会。相邻两个BOX折叠后的最终margin 值计算方法如下： 　　1）两者都为正值，取值大者； 　　2）值有正负，两者都取绝对值，再用正值减去最大绝对值； 　　3）全为负值，两者都取绝对值，再用 0 减去最大绝对值。 　　如果一个子元素的外边距直接接触到父元素的外边界，也会发生margin折叠。如上算法，较大的外边距是胜利者，胜利的外边距总是应用到父元素，子元素的margin总是被折叠。因此，如果可以防止两个外边距相互接触，那么margin折叠就可以避免。可以通过对父元