基于css盒模型中的margin属性解析

《基于css盒模型中的margin属性解析》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于CSS盒模型中的margin属性解析摘要：因特网的迅速发展使得HTML排版界面效果的局限性日益明显。DIV+CSS解决了网页界面布局的难题，成为当前网页布局方式中的主流技术。而CSS盒模型更是这一技术中的重要概念，在CSS盒模型的属性中，margin属性尤为重要，它几乎可以设置在任何元素上，在使用的时候也容易出现一些问题，本文将通过实例对margin属性进行详细解析。中国8/vie　　关键词：CSS；盒模型；margin　　中图分类号：TP37文献标识码：A：1009-3044（2016）36-0074-02　　现在，CSS已经发展得非常成

2、功了，无论是在浏览器还是应用商店，甚至聊天客户端，CSS都无处不在并且没有任何消退的迹象。CSS也叫层叠样式表（CascadingStylesheet），在页面制作时采用CSS技术，可以控制文本的颜色、字体的样式、段落的间距、背景的图像颜色以及其他各种视觉效果。其主要优势在于，相同的CSS可以用在多个页面上。当CSS与HTML、XHTML结合使用时，CSS展现出了强大的能力。　　CSS盒模型，是基于CSS的L元素的一组规则，制定了元素的高度、宽度、内边距、边框和外边距是如何度量的，下面从盒模型是什么开始讲起。　　1CSS盒模型概念　　XMTML

3、中大部分的元素（特别是块状元素），都可以看作是一个盒子，而网页的元素定位实际就是这些大大小小盒子在页面中的定位。当某个块状元素被CSS设置了浮动属性，这个盒子就会自动排到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题。为什么要把XHTML元素作为盒模型来研究呢？因为XHTML元素的特性和盒子非常相似，盒子中的内容到盒子的边框之间的距离及填充（padding）；盒子本身有边框（border）；盒子边框外和其他盒子之间有边界（margin），效果如图1所示。　　　　图1盒模型示意图　　大多数XHTML元素的结构都类似于图一所示，除了

4、包含的内容（文本或图片）外，还有内边距、边框和外边距一层层的包裹。我们在布局网页和定位XHTML元素时要充分地考虑这些要素才可以更加自如地摆弄这些盒子。下面我们就重点讲一讲盒子的外边距margin属性的应用。　　2CSS盒模型中的margin属性　　margin属性应用于盒子外面的空间，或者是位于盒子和浏览器窗口之间的区域，又或者是位于盒子和文档中其他元素之间的区域。表一显示了各种margin属性。margin属性是margin-top、margin-right、margin-bottom和margin-left四个单独属性的简写属性。值得注意

5、的是盒模型简写属性总是以顺时针方向指定，从top开始：top、right、bottom和left。　　2.1margin的基本写法　　表达式：margin：toprightbottomleft；　　margin属性值是数值单位，可以是长度、百分比或auto，margin甚至可以设为负值，造成BOX与BOX之间的重叠显示。　　例如：margin：70px100px50px100px；可以看到这个语句给相应内容设置了有70px上外边距，100px的左右外边距和50px的下外边距的BOX。　　margin在书写时可以省略参数，基本原则如下：　　1）如

6、果没有left值，则默认使用right值替代；　　2）如果没有bottom值，则默认使用top值替代；　　3）如果没有right值，则默认使用top值替代。　　例如：margin：50px100px；这个语句等同于　　margin：50px100px50px100px；　　margin：50px；这个语句等同于　　margin：50px50px50px50px；　　2.2margin边界折叠问题　　在CSS中，当两个或多个BOX的上或下外边距接触时，会产生外边距折叠。只有垂直margin会折叠，水平margin不会。相邻两个BOX折叠后的最终m

7、argin值计算方法如下：　　1）两者都为正值，取值大者；　　2）值有正负，两者都取绝对值，再用正值减去最大绝对值；　　3）全为负值，两者都取绝对值，再用0减去最大绝对值。　　如果一个子元素的外边距直接接触到父元素的外边界，也会发生margin折叠。如上算法，较大的外边距是胜利者，胜利的外边距总是应用到父元素，子元素的margin总是被折叠。因此，如果可以防止两个外边距相互接触，那么margin折叠就可以避免。可以通过对父元素使用内边距或者边框来防止两个外边距接触。　　但是在一些特殊情况或是一些设置前提下，盒模型的垂直margin不会被折叠。如

8、果相邻的盒模型中，其中一个是浮动的（floated），那么垂直margin则不会被折叠，而且这个浮动盒模型的里的子元素之间也不会折叠；设置了displ