网页设计中的负外边距2

  • 2019-02-19 17:13:44
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

有意思的是,网站建设里负外边距可能导致浮动元素移到其父元素的外面。这看上去与先前的规则相矛盾,不过其实并不矛盾。通过设置负外边距,元素可能看上去比其父元素更宽,同样的道理,浮动元素也可能超出其父元素。

下面考虑一个向左浮动的浮动图像,其左外边距和上外边距都是-15px。这个图像放在一个div中,该div没有内边距、边框和外边距。结果如图10-17所示。

图10-17:有负外边距时的浮动

尽管看上去有问题,但实际上并没有违反浮动元素放在其父元素之外的相关限制。

仔细研究上一节的规则可以发现,从技术上讲这种行为是允许的:一个浮动元素的外边界必须在父元素内。不过,由于外边距为负,放置浮动元素的内容时就好像覆盖了自己的外边界一样,如图10-18所示,

通过数学计算描述如下:假设div的上内边界在100像素处。为了得出浮动元素的上内边界应该在哪里,浏览器会做以下计算:100px +(-15pX)外边距+0内边距=85px,因此,网站建设浮动元素的上内边界应当在85像素处,尽管比浮动元素父元素的上内边界还要高,但从数学计算可知,这并没有违反规范。出于类似的原因,同样可以解释为什么浮动元素的左内边界可以放在其父元素左内边界的左边。

图10-18:利用负外边距向上和向左浮动详解

现在可能很多网页设计人员都想大叫“犯规!”从我个人来说,不会为此批评你们。例如,上内边界比上外边界还要高,这看上去是完全错误的,不过,如果有一个负的上外边距,确实会产生这种结果,这与负外边距使正常的非浮动元素视觉上比其父元素还要宽是一样的》浮动元素框的4个边都是如此:如果将外边距设置为负值,内容就会超出外边界,但从技术上讲并没有违反规范。

这里有一个重要问题:在使用负外边距时,如果浮动元素元素超出其父元素,文档会如何显示?例如,一个图像可能浮动得太远,超出了用户代理已显示的一个段落。在这种情况下,要由用户代理决定文档是否重新显示,网站建设CSS1和CSS2规范明确地指出,用户代理不必重新显示已显示内容来适应文档中后来出现的内容。换句话说,如果一个图像浮动到之前已经显示的段落中,它可能只是覆盖该位置上原有的内容。另一方面,用户代理也可能采用一种不同的方法处理这种情况,让内容环绕浮动元素重新显示。不论采用哪种方式,都不要指望肯定会发生某一种行为,否则为浮动元素设置负外边距的作用会受到限制。让元素浮动可能很安全,不过网页设计人员试图将元素在页面上向上推往往不是好主意。

还有另外一种方法可以让浮动元素超出其父元素的左右内边界:即浮动元素比其父元素更宽。在这种情况下,浮动元素会超出右或左内边界,从而尽可能正确地显示,究竞是超出右内边界还是左内边界,取决于元素以何种方式浮动。这会得到如图10-19所示的结果。

当前文章标题:网页设计中的负外边距2

当前URL:http://www.lyjtt.cn/news/wzzz/negative-margin2.html

上一篇:网页设计中的实用行为

下一篇:网页设计中的清除

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)