仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 706|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:CSS标准 闭合浮动元素先容

[复制链接]
若相依 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:22:31 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
依照CSS标准,浮动元素(floats)会被移出文档流,不会影响到块状盒子的结构而只会影响内联盒子(一般是文本)的分列。因而当其高度超越包括容器时,一样平常父容器不会主动伸长以闭合浮动元素。可是偶然我们却必要这类主动闭合举动,详细怎样处置呢?


有一种做法就是在父容器内再拔出一个分外的标签,并令其扫除浮动(clear)以撑年夜父容器。这类办法扫瞄器兼容性好,没有甚么成绩,弱点就是必要分外的(并且一般是无语义的)标签,以是我团体不年夜喜好。厥后又有了一种新的体例,利用:after伪类静态的嵌进一个用于扫除浮动的元素,这类办法和上一种道理一样,分歧的只是把这个分外的内容用CSS天生,但思索到IE不撑持:after不能不做了很多的hack。这类办法兼容性一样平常,但经由各类hack也能够对付分歧扫瞄器了,同时又能够包管html对照洁净,以是用得仍是对照多的。再厥后又有人发明将父容器的overflow设为除visible以外的值就能够在尺度兼容扫瞄器中闭合浮动元素,IE天然又是不撑持的,以是这类办法和上一种办法一样都对IE做了分歧处置(详细就是触发layout),分歧的就是overflow没有:after伪类那末贫苦了,弱点也有,overflow大概会发生一些小抵触。在利用overflow之前另有过一种利用float的办法,就是让父容器也浮动,这使用到了浮动元素的一个特征――浮动元素会闭合浮动元素。这类体例在IE/Win和尺度兼容扫瞄器中都有较好的效果,但弱点也很分明――父容器一定想浮动就浮动的了,究竟浮动是一种对照特别的举动,偶然结构不同意其浮动也很一般。利用float固然在IE和尺度兼容扫瞄器中都能闭合浮动元素,但道理倒是分歧的,IE/Win中float触发了layout因此闭合了浮动,而在尺度兼容扫瞄器中,float实在和上一种办法中的overflow道理一样,发生了一个“块级格局化局限”――这是CSS标准中提到的一种征象,它常常具有某种自力性,特征之一就是会主动闭合外部的浮动元素。
依照标准,以下范例的元素会发生一个块级格局化局限:

  • 浮动元素,left大概right皆可。
  • 相对定位的元素。
  • inline-block元素,不外这个gecko今朝不撑持。
  • table-cell范例元素,实在table,table-head-group,table-row甚么的也都能够,另有inline-table(gecko不撑持)也一样,由于他们城市直接发生一个匿名的table-cell。
  • overflow取值非visible的元素。
以是,本来在尺度兼容扫瞄器中我们也能够有这么多的办法闭合一个浮动元素,并且只必要CSS,无需其他。顺带说一下以上除overflow,其他都有一个附加效果就是主动压缩父容器宽度。
而关于IE/Win,它有一套本人的系统,就是layout,具有layout的元素会主动闭合浮动元素,再来看看触发layout的CSS属性,会发明和下面的块级格局化局限有良多相似的地方:

  • 浮动元素
  • 相对定位元素
  • display:inline-block
  • zoom
  • width/height
  • overflow/overflow-x/overflow-y[IE7新增]
  • max/min-width/height[IE7新增]
以下去看IE中闭合浮动元素的办法也很多,天然也都有其范围性,要末有附带效果,要末利用的长短尺度属性(没法经由过程考证)。
还要提一点的是display:inline-block,这个属性对IE而言自己没甚么用,实践效果只是给一个元素公开增加了layout,可是尺度兼容扫瞄器是认得这个属性的,以是要不影响这些扫瞄器,必要将display设回默许。这里IE有一个bug,假如先界说了display:inline-block,然后再将display设回block(这两个display要前后放在两个CSS声明中才无效果),那末layout不会消散,同时也不会影响其他扫瞄器,以是今朝来讲,这也算一个不错的触发layout的办法:
  1. .gainlayout{display:inline-block;}.gainlayout{display:block;}
复制代码
以是要跨扫瞄器闭合浮动元素,能够选择的体例仍是良多的,怎样搭配利用这些CSS属性就要详细情形详细剖析了,天真使用前提正文也很有需要,如果其实不可我们回过火来另有clear能够用嘛。
</p>
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
兰色精灵 该用户已被删除
沙发
发表于 2015-1-18 06:29:35 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
变相怪杰 该用户已被删除
板凳
发表于 2015-1-25 22:47:39 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
透明 该用户已被删除
地板
发表于 2015-2-4 13:19:36 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
再见西城 该用户已被删除
5#
发表于 2015-2-9 23:29:28 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
admin 该用户已被删除
6#
发表于 2015-2-28 08:43:43 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
不帅 该用户已被删除
7#
发表于 2015-3-9 21:39:58 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
灵魂腐蚀 该用户已被删除
8#
发表于 2015-3-17 02:10:17 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
柔情似水 该用户已被删除
9#
发表于 2015-3-23 17:39:33 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-30 02:29

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表