网页设计中的浮动元素

  • 2019-02-14 14:52:01
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

浮动元素

网页设计人员对于浮动元素有几点要记住。首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。采用网站建设css的特有方式,浮动元素几乎“自成一派”,不过它们还是对文档的其余部分有影响。

这种影响源自于这样一个事实:一个元素浮动时,其他内容会“环绕”该元素。对于浮动图像来说,这种行为我们已经很熟悉了,不过要知道,元素浮动时也同样如此(例如,浮动一个段落在图10-2中,由于为浮动段落增加了外边距,可以很清楚地看到这种行为:

p.aside {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em; border: 1px solid;}

可以注意到一些有意思的情况,首先,网页设计中浮动元素周围的外边距不会合并。如果浮动一个有20像素外边距的图像,在这个图像周围将至少有20像素的空间。如果其他元素与此图像相邻(这表示水平相邻和垂直相邻),而且这些元素也有外边距,那么这些外边距不会与浮动图像的外边距合并,如图10-3所示:

p img {float: left; margin: 25px;}

第7章做过一个比喻,将元素比作是有塑料边的纸片,再来看这个比喻,图像周围的塑料边(外边距)绝对不会与其他浮动元素周围的塑料边重叠。

如果确实要浮动一个非替换元素,则必须为该元素声明一个width。否则,根据网站建设CSS规范,元素的宽度趋于0。因此,假设浏览器的最小width值是1个字符,那么浮动段落可能只有1个字符宽。如果没有为浮动元素声明width值,最后可能得到如图10-4所示的结果(坦率地说,这种情况很少见,但确实是可能的)。

图10-4:没有显式宽度的浮动文本不浮动

不浮动

除了left和right外,float属性还有一个值,float: none用于防止元素浮动,

这看上去可能有些傻,因为要让一个元素不浮动,最容易的办法就是不声明float,这样不就行了吗?确实如此。首先,float的默认值是none。换句话说,要得到正常的非浮动行为,必须有这个值,如果没有这个none值,所有元素都会以某种方式浮动。

其次,网站建设人员可能想覆盖导入样式表中的某个样式。假设设计人员在使用一个服务器端样式表,这个样式表要让图像浮动。不过在某个特定的页面上,设计人员不希望图像浮动。不必为此再编写一个全新的样式表,而只需在文档的嵌套样式表中增加img {float: none;},不过,除了这种情况,确实很少有必要真正使用float: none.

当前文章标题:网页设计中的浮动元素

当前URL:http://www.lyjtt.cn/news/wzzz/floating-element.html

上一篇:网页设计中的浮动

下一篇:网页设计中的浮动详细内幕

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