仓酷云

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

[DIV+CSS] 来看看:扫除网页浮动CSS的做法

[复制链接]
山那边是海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:05:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
闭合浮动元素也就是扫除浮动,在poluoluo.com屡次被说起,然后良多CSSer对此并非十分懂得,常常未闭合浮动元素,形成页面凌乱的情况。
 依照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的办法:
.gainlayout{display:inline-block;}
.gainlayout{display:block;}
  以是要跨扫瞄器闭合浮动元素,能够选择的体例仍是良多的,怎样搭配利用这些CSS属性就要详细情形详细剖析了,天真使用前提正文也很有需要,如果其实不可我们回过火来另有clear能够用嘛。

支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
金色的骷髅 该用户已被删除
沙发
发表于 2015-1-18 05:13:44 | 只看该作者
直接用代码建立链接,如:可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
第二个灵魂 该用户已被删除
板凳
发表于 2015-1-22 05:37:34 | 只看该作者
可以使用 CSS 检查工具进行设计。
变相怪杰 该用户已被删除
地板
发表于 2015-1-30 23:08:08 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
再见西城 该用户已被删除
5#
发表于 2015-2-6 16:55:37 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
兰色精灵 该用户已被删除
6#
发表于 2015-2-17 16:08:52 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
小魔女 该用户已被删除
7#
发表于 2015-3-5 21:07:17 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
谁可相欹 该用户已被删除
8#
发表于 2015-3-12 15:36:02 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
因胸联盟 该用户已被删除
9#
发表于 2015-3-19 23:35:58 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-24 08:43

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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