进行网页布局的三种方式时为什么设置很多包裹层

手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要。我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染。现在,我们可以让元素大小和布局针对设备作出改变。
在Css2中,我们可以通过特殊的CSS后缀实现不同的媒体类型,比如印刷、演讲和屏幕显示。默认情况下,网页即为屏幕显示。另外一个比较有用且流行的媒体类型是印刷,它为优质的网面打印创建一个分离的设计。我们可以告诉浏览器仅仅在打印时使用CSS规则。
当从浏览器转到打印机的时候,这里有一些可以优化的地方,以保证输出具有更佳品质的内容:
1、移除背景图像;
2、移除主要的导航链接;
3、重建头部和页脚,使其更加合理;
4、将文本和链接改为黑色和白色;
5、将字体大小设置为打印的基础单位,例如12
6、加粗文字中的链接;
7、通过content属性自动打印URLa:link:after{content:"("attr(href)")";}
8、将内容区域进行扩展,使其充分利用打印页面。
适应媒体查询
CSS3 扩展了媒体类型的概念以检查特定的屏幕尺寸,所以样式表在做一个设计时可以更精确。例如,为了将一组CSS 规则应用到小屏幕的移动设备上,使用@media 规则设置那些CSS 声明,从而设置两个屏幕交付与视口大小:
&style type="text/css"&
// regular, default CSS rules go here for browsers that don't understand basic layout.
@media screen and (min-width: 480px) {
// CSS rules go here
通过这种方法,只有在视口或浏览器窗口至少为480 像素时,我们才可以告诉浏览器应用CSS规则。
为多种类型的屏幕(从移动设备的屏幕到桌面计算机的屏幕)设置样式:
&style type="text/css"&
@media screen and (min-width: 480px) {
// CSS rules go here
@media screen and (min-width: 600px) {
// CSS rules go here
@media screen and (min-width: 768px) {
// CSS rules go here
@media screen and (min-width: 910px) {
// CSS rules go here
这便可以为不同视口应用相同的设计,如图12.24让你示。
自适应和响应式的不同之处在网页设计中,自适应和响应式有着很明显的区别。自适应倾向于针对不同的断点产生特定的、定制的设计。这些视图常常是适应像桌面、平板电脑和移动设备这样大的物体。
我们在这一章的前面部分创建两栏和三栏布局的时候,创建了固定和流式两个版本。现在,我们可以进一步看到在处理响应式设计时的不同以及流式布局的优点。
尽管断点可以让我们将设计适应当前常用的视口宽度。通过为元素设置成比例的宽度,它们就可以根据渲染时视口的宽度进行浮动。
因为一个新媒体通常是被之前媒体的元素所限制的,所以设计网页的印刷设计人员将印刷项目中固定设置和精确布局的想法带到了网页设计中。
div.container{margin:0 width:960} &div.main{width:600float:} &div.aside{width:300float:}
效果如下图:
宽度通常都是以像素为单位,用于定义包含元素的宽度。为了将已经存在的设计转变为浮动的,我们可以使用基本的数学公式——除法。例如,在固定宽度的设计中,主要栏的宽度只需要除以容器或者上下文的宽度:
600px ÷ 960px = 0.625
接着将结果转换成百分比:
0.625 × 100 = 62.5%
为什么是百分比?这是因为尽管像素是一个绝对单位,但是百分比是一个相对单位。当浏览器窗口扩大时,这个栏的宽度也会扩大,如图12.26 所示。现在,新布局的结果建立在流式输出上。
div.container {
width: 100%;
div.main {
width: 62.5%;
div.aside {
width: 31.25%;
-------------------------------------------
除法运算中的第一个参数叫作除数,它被所谓的被除数除,所得结果叫作商。如果除法不是你的强项,我们周围有各种计算器可以利用。PC、Mac、智能手机,甚至网页上都有。
-------------------------------------------
接下来,就要用指定的样式来包裹媒体规则:
@media screen and (min-width:910px){
& div.container{margin:0 width:100%;}
& div.main{width:62.5%; float:}
& div.aside{width:31.25%;float:}
然后重复每一个你想支持的断点。
文本可以轻而易举地回流到新的容器中。当栏扩展时,每一行的长度也会发生改变,所有栏看起来都是合适的(无论大小还是宽度)。当文本改变以填补一个灵活的容器时,不需要担心文本的拉伸、变形或者变得不优雅。如图12.27 所示,相同数目的文字在不同的栏中展示了不同的长度和高度。
最优的行长度
关于每行放置多少个字符才是最合适,这个讨论一直没有答案,66 个字符也许是最值得参考的。这里有一个简单的测试:每45 和75 个字符放置一个特殊符号,如“^”。只要每行只有一个符号,那么这个长度就比较合适。
媒体查询实战
为了了解媒体查询的作用,我们创建一个简单的布局,使其可以适应桌面计算机和智能手机。尽管有许多种方法可以创建响应式布局,但是直接的方法还是在桌面版本中创建一个流式网格,然后尽可能少地修改CSS,使其适应移动设备的浏览器。
这个布局中的基本要素包括头部、导航菜单、主要的内容区域和侧边栏。另外我们还会插入一幅图像。
现在,让我们给网站创建桌面版本的CSS。下面的代码片段只展示了这个网站针对布局的相关CSS。
现在,我们创建了一个水平的导航栏和一个流动的两栏布局。内容中的图像浮动到右边。我们同时指定了这个布局中不存在的一些东西,比如列表项的顶部边框。这是为了确保我们的常规布局不会从我们后面要做的手机版本里继承样式——你将会看到我们是如何解释手机布局的CSS 的。在我们的桌面版本中,网页如图12.28所示。
桌面计算机应用响应式布局会产生大量的屏幕空白&
这个布局对桌面端非常友好,它有更大的屏幕使用面积。但是对于移动端设备,挤压水平导航菜单和320像素中的两栏会导致网站非常难阅读。所以我们不得不通过下面的步骤来改变它在移动设备中的布局。
将水平导航菜单变成垂直的,尤其是点击区域或者按钮足够大,这对手指触控是有益的。
将两栏布局改为一栏:将侧边栏放到主要内容区域下面。
,,在移动浏览器的窗口中,图像由于太大而不能浮动,无法自适应和水平对齐,我们必须调整它。
首先,我们在HTML 页面的头部区域中加入下面一行:
&meta name="viewport" content="width=initial-scale=1.0"&
这是为什么?这行代码的目的是调整iPhone,使其重新缩放我们的网页。当展示网页的时候,iPhone(带着很好的想法)会“缩小”网站,因此,桌面计算机的页面设计可以适应iPhone 的小屏幕。尽管这对于不适应移动设备的网页来说非常好,但是我们不想iPhone 缩小页面元素!所以这一行重设页面元素到实际的大小。
1.创建媒体查询
接下来,我们需要在样式表中创建媒体查询。这下可复杂了,因为移动设备丰富多样,屏幕大小和分辨率各不相同。我们需要给几个常见的移动设备写单独的媒体查询,但是最简单的方法还是创建一个媒体查询,它可以囊括几乎所有的智能手机,然后使布局灵活地适应它们。所以我们现在要做的是让媒体查询匹配设备最大的480 像素宽,这基本可以适应大部分的智能手机的横向和纵向模式(注意,这里不包括平板设备,比如iPad。我们会为这些设备创建一个独立的媒体查询。为了简便,在这个例子中我们只讨论智能手机)。
所以,让我们创建自己的媒体查询。你会想把这部分的CSS 放到常规布局的下面。
首先,我们要去掉导航区域顶部和底部的边框和内边距。此外,我们需要将水平的“条”变成垂直系列的“按钮”。对于导航条列表项,我们在导航按钮上添加顶部的边框(和水平条的样式一致)。同时我们将浮动属性设置为none,因为在这里我们想使一个按钮低于另一个,而不是让它们水平相邻。我们需要添加一些内边距来让它们更“肥”一些。最后,对于列表本身,当它是水平条的时候,要为它添加一个下边框并且稍微调整它的定位。正如你所见到的,我们并不想在常规的布局中添加这些东西(如上边框,等等),这也是为什么我们将其从默认的CSS 中“提前移走”。当创建有媒体查询的布局时,注意你的样式层叠和跟踪哪些样式可能被继承是非常重要的。
现在,开始操作两栏。我们希望两栏可以在垂直方向上重叠,并希望每栏都能充分利用手机的屏幕宽度。
#content {
width: 100%;
#sidebar {
width: 100%;
就这么简单?注意,我们要保持原有布局的流动。虽然我们已经针对了一部分智能手机,但是我们不想将栏的宽度设置为一个特定值;我们想要这个布局适应无数的设备宽度。所以,我们必须将宽度调整到100%。同时,通过在侧边栏上设置clear 来清除浮动。最后,对图像设置样式:
margin: 0 0 10px 0;
max-width: 100%;
除了在我们图像的底部设置一个小的下边距之外,唯一值得注意的是, 我们必须将max-width 设置为100%。这样图像的大小就不会超过设备屏幕的宽度,从而避免了用户屏查看整张图像。现在,让我们来看看页面在iPhone 上是如何显示的(见图12.29)。现在,我们的页面在手机浏览器上易于阅读,并且导航菜单可以轻松地通过大拇指或者其他手指进行操作。
移动设备中的响应式布局&
2.自定义媒体查询
我们着眼于设计一个可替代的设计,它可以在智能手机上表现良好,同时在桌面计算机上也可以。随着智能手机和平板电脑的普及,这两种设计无法适应大多数主流设备。所以,我们需要提供各种媒体查询,以适应网站设计的不同偏好。
多产的网页设计师Chris Coyier 有一个关于多种设备的媒体查询的参考列表(/snippets/css/media-queries-forstandard-devices/):
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
/* iPads ( portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
/* iPhone 4 and 5 ----------- */
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
/* Styles */
虽然这是一个相当全面的设备列表,但是也意味着一个网站要支持许多不同的风格。因此,最好不要采用这种支持流行每一种类型的设备的方法,这样会让你的网站针对每一种设备无限地更新。事实上,Chris Coyier 的方法基于一个古老的童话故事:金发姑娘和三只熊(/media-queries-sass-3-2-and-codekit/)。
与提供多个版本的网站不同,Coyier 发布了3 个版本。
Papa Bear——针对屏幕宽度超过 1 600 px的网站。
Mama Bear——针对屏幕宽度为 650 px到 1 600 px的网站。
Baby Bear——针对屏幕宽度在 650 px以上的网站。
这种方式的媒体查询应该像下面这样:
@media only screen and (max-width: 1 600 px) {
... /* papa bear size */
@media (max-width: 1250px) {
... /* mama bear size */
@media (max-width: 650px) {
... /* baby bear size */
当然,如果你觉得有需要(或你的客户需要它们时),可以添加设备指定的媒体查询。但你关注的重点是,测试你的设计在不同设备下的样式,看看能否在某些宽度掩盖或收起。
响应式框架
如果你想使用一个可以快速建立并运行的框架,但也要具有响应式设计的灵活性,可以看看http://adapt.960.gs。
虽然它们有一个JavaScript 提供媒体查询(表面上老版浏览器不处理动态样式表转换),但是你可以下载多种样式表和所有相关的CSS 规则来控制框架。
额外的样式表可供下载。
mobile.css——针对屏幕大小低于760 px的网站设计。
,,720.css——针对屏幕大小为760 px到 980 px的网站设计。
,,960.css——针对屏幕大小为980 px到 1 280 px的网站设计。
1200.css——针对屏幕大小为1 280 px到 1 600 px的网站设计。
,,1560.css——针对屏幕大小为1 600 px到 1 940 px的网站设计。
,,1920.css——针对屏幕大小为1 940 px到 2 540 px的网站设计。
,,2520.css——针对屏幕大小高于 2 540 px的网站设计。前端在线资源
本文地址:
五、浮动的非本职工作
浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是浮动应该做的事情,我称之为“非本职工作”。
或许我们并没有过多的深思,把一些实际上不是浮动该干的事情当作“这必须用浮动来实现”。举个常见的例子,列表显示,见下面的图,截自淘宝新版首页:我不看代码就知道是用浮动实现的,我用firebug一看,果然是,不仅浮动,而且定宽。ps:要是在几个月以前,我会觉得这实在有待改进,不过现在我的心态宽了,布局思想不同而已,没有孰对孰错之分。
我可以确信,浮动这个属性诞生的那天压根没有想到自己会要做这样的事情,本来它以为自己就让文字环绕显示就OK了,功德圆满了,结果,在web2.0的时代,其却在页面布局中被滥用。可能有人会反驳,你何处此言,有何证据?
更多文章:/wordpress/
本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处
我们只要静下心来好好想想浮动的本质,实现的原理,就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗?即“包裹与破坏”。我们可以用这个(“包裹与破坏”)解释为什么浮动可以让li这类block水平的元素水平排列。
单个无浮动的li元素
本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 网站地址是:
看下面的HTML代码:
&ul style="width:440"&
&li style="border:4px solid #ff6633; background:#ffffc0;"&&img src="../image/border.png" /&&/li&
结果如下图(截自Firefox浏览器,无其他样式干扰,下同):
这里的li元素为什么会有高度?如果您认真读过关于line boxes模型与高度的关系的内容,应该知道,由于图片没有应用float属性,其本身有一个正常的inline box,这个inline box高度等于图片的height,在这行元素中,图片这个inline box的高度最高,于是传递给了line box,line box是个真正意义上的高度,直接作用于containing box(就是这里的li元素,使li元素有一个高度)。理解了这个您就会明白为什么要是这里的图片添加了float属性,li高度会塌陷了:浮动破坏了inline box。这个后面会详细讲解。
更多文章:/wordpress/
本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处
这里的li没有添加float属性,可以见到li宽度100%自适应于父ul标签。一切显得那么的和谐!
单个左浮动的li元素
看下面的HTML代码:
本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 网站地址是:
&ul style="width:440"&
&li style="border:4px solid #ff6633; background:#ffffc0; float:"&&img src="../image/border.png" /&&/li&
结果如下图:
相比上面而言,这里多了个float:,浮动的“包裹性”一目了然:水平方向上,li宽度紧贴内部元素。我在曾说过这么句结论性的话:“撇开浮动的‘破坏性’,浮动就是个带有方位的display:inline-block属性”。这不难理解,您可以讲这里的float:改成display:inline-最后实现的效果基本上就是一样的。display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。所谓对象呈递为内敛对象就是元素呈递为inline box,所以浮动“包裹性”所产生的结果就是使得元素转为了line box模型中的inline box元素。
浮动的“包裹性”让元素变成类似于inline box的元素,而浮动的“破坏性”正是破坏inline box元素的,这其中岂不有矛盾。其实非也,对于block水平的这类块状元素需要先让其变成类似效果的内联元素,然后再破坏之,实乃先诱拐再奸杀的生动实例啊!
又是我反复提到的,浮动破坏了inline box,也就是破坏了高度,所以这里含有浮动属性的li元素实际上是没有高度的。所以呢,要是后面还有同样的li标签的话,就会水平对齐排列的。如下:
本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 网站地址是:
多个左浮动的li元素
看下面的HTML代码:
&ul style="width:440"&
&li style="border:4px solid #ff6633; background:#ffffc0; float:"&&img src="../image/border.png" /&&/li&
&li style="border:4px solid #ff6633; background:#ffffc0; float:"&&img src="../image/border.png" /&&/li&
结果如下图:
左浮动的li元素和无浮动的li元素
看下面的HTML代码:
&ul style="width:440"&
&li style="border:4px solid #ff6633; background:#ffffc0; float:"&&img src="../image/border.png" /&&/li&
&li style="border:4px solid #ff6633; background:#ffffc0;"&&img src="../image/border.png" /&&/li&
结果如下图:
后面一个li无float属性,直接无视前面的float li元素,宽度100%显示,而且与float属性的li同一水平线排列,为何?因为浮动破坏了li的实际高度(原因我讲得太多次了),只是图片是个实体,无法与同样实体的同一文档流的图片重合,所以图片靠在一起。
1. 首要证据
本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 网站地址是:
是着重分析了浮动的“本职工作”:文字环绕显示;本文着重分析了浮动的“非本职工作”:列表布局;两者都是用的同样的原理解释的,那么有什么证据可以证明“页面布局”不是浮动的“本职工作”呢。答案关键字就是:高度塌陷。
我在多个地方浓墨重彩的讲浮动与高度的关系,浮动使高度塌陷的原因,自己都觉得唠叨的太多了,这里不再讲。直接讲些实际的东西。
您是否发现,浮动布局会让父标签高度缺失,但是实现文字环绕图片效果的时候父标签无需清除浮动。还是上面的例子,我们看看多li元素浮动时ul标签高度在哪里,我们可以给ul加个边框属性做测试,测试代码如下:
更多文章:/wordpress/
本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处
&ul style="width:440 border-top:4px solid #a0b3d6; border-bottom:4px solid #34538b;"&
&li style="border:4px solid #ff6633; background:#ffffc0; float:"&&img src="../image/border.png" /&&/li&
&li style="border:4px solid #ff6633; background:#ffffc0; float:"&&img src="../image/border.png" /&&/li&
结果如下图:
上图显示ul高度为0,这是必然的,正常的,应该的。您要是在IE下看到ul有高度,认为这是Firefox等浏览器有问题就错了,您把ul的width属性去掉,看看,会发现IE下ul高度也为0, 这是IE的layout作祟。至于为什么ul高度为0,我前面很多地方都已经讲了,不再说了。但是,从中我们可以看到,浮动本不是用来列表布局的,而是用来使元素环绕显示的,因为元素环绕(例如文字),其自身是含有inline boxes高度的,这是inline水平的元素形成高度的基础,所以,虽然浮动元素没有高度,但是其周围环绕的元素是有高度的,只要环绕元素比浮动元素高度高,父标签无高度的问题自然也就没有了,但是纯粹一堆浮动元素会有高度吗?没有。所以浮动元素塌陷的问题根本就不是浏览器的bug,而是我们没有正确地深入地了解浮动,是我们自己使用不当,因为浮动本不应该用在这里的。
2. 其他证据
为什么说浮动的本职工作不是页面布局而应该是是元素环绕呢。还有其他些证据。
CSS刚诞生的时候,那时候的网页还是表格布局的时代,能显示几张图片就不错了,复杂的列表显示,布局啊这些概念还是很淡薄的,浮动出现的意义就是让文字能够环绕图片显示而已,就如word般。
Google是目前互联网领域的老大,技术很牛叉,毋庸置疑,但是,当我发现它所有的页面几乎都是表格布局的时候,很诧异;还有twitter,也是表格布局的;为什么这些顶尖的web网站使用表格布局,而不跟随潮流呢,起初我是百思不得其解。现在,我是明白了,这么做是有他的道理的,难道要用一堆浮动的元素去布局吗?这不是浮动该干的事情。而且,浮动是个很不好惹的魔鬼。
七、浮动是个魔鬼、混球
浮动的存在就是个破坏。浮动效果的实现就是先破坏自身(挥刀自宫),然后影响别人。页面中只要出现一个浮动,势必有其他元素受其影响。这是开发和维护中的一个定时炸蛋(敏感词)。我们想想浮动的意义,只是让文字环绕图片显示而已,所以其必须破坏自身模型和高度。但是,不知道幸运还是不幸,浮动的这种置之死地而后生的特性居然可以让元素布局,加上其表面意思很好理解,兼容性还不错,使用方便,于是在舍弃了table布局的这个web时代里,浮动成为当前页面布局的主流。想想,真是一件可怕的事情。
有些人可能没有意识到浮动其实是个很糟糕的东西,是CSS中的一个魔鬼。为什么,或许因为用浮动布局页面发现还行,即使偶尔出现些小bug,打打补丁也可以解决。或许是因为没有体会到非浮动元素和浮动元素在开发和维护上所消耗的成本精力的差别。有些人可能知道浮动这个属性能不用就不用,但是由于找不到更好的替代方法,所以还是有很多地方使用了浮动布局,例如选项卡,列表显示等。
理论上而言,除了浮动的环绕效果之外,我们使用浮动做的其他工作都可以使用别的CSS属性实现,而且大部分情况是比浮动的效果好:首先没有了清楚浮动一说,二是有关浮动的一堆bug也不会出现,三是元素间独立了,不会像浮动一样改变一个会影响其他。但是,考虑到大多数人对CSS掌握的程度,以及浏览器的一些兼容性问题等,很多时候,我们不得不使用看上去使用方面但潜在问题较大的浮动属性。所以,有关浮动的一些特性的研究还是很有必要的,这就是下面的重点。
八、解决高度塌陷的问题 – 清除浮动
CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题。为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。什么时候会塌陷:当标签里面的元素只要样子没有实际高度时会塌陷。所以呢,并不是只要有浮动元素就会坍塌,就要清除的,CSS水平高低衡量的标准之一就是改用什么样式就用什么样式,不多用也不少用。
下面就来讲讲如何清除浮动,zxx:写到这儿,一下子轻松了。
IE下清除浮动准则很简单,使元素haslayout就可以了。如宽度值,高度值,绝对定位,zoom,浮动本身都可以让元素haslayout。显然,首选zoom:1;不会干扰任何样式。非IE浏览器常用的是overflow属性,overflow:或是overflow:scroll都可以,不过由于后者经常一不小心出现滚动条,所以前者用的更多些。由于现代浏览器都支持after伪类伪元素,所以常常也会用after写入一个clear属性的元素清除浮动。当然,最投机取巧的方法就是直接一个&div style="clear:"&&/div&放到当作最后一个子标签放到父标签那儿。下面小结这几个方法。
1. 投机取巧法
就是直接一个&div style="clear:"&&/div&放到当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强,使用方便,是初学时使用的上佳之选。但是我从来不用,因为我看到的是个巨大的浪费,浪费了一个标签,而且只能使用一次,我个人是无法容忍的,所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的。
2. overflow + zoom方法
更多文章:/wordpress/
本文地址:/wordpress/?p=594
.fix{overflow: zoom:1;}
此方法优点在于代码简洁,涵盖所有浏览器,可谓不错的选择啊。不过也是有问题的,就是这个overflow:是个小炸蛋,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。我一般不用这个方法,只是有时候顺便去除浮动时用用。
3. after + zoom方法
先来简单讲讲after,所谓after,就是指标签的最后一个子元素的后面。于是呢,我们可以用CSS代码生成一个具有clear属性的元素,其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点,我了很多次,貌似随便写什么东西都没有问题,比如content:'clear both';没问题,或是content:'张鑫旭'也是ok的。于是有:
.fix{zoom:1;}
.fix:after{display: content:'clear'; clear: line-height:0; visibility:}
这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了,我都是用这个样式清除浮动的,不会影响任何其他样式,通用性强,覆盖面广,我很推荐哦。
九、float与JavaScript
JavaScript可以改变CSS的属性,其他些属性还好,但是这个float值得一说,为何呢,因为float貌似是JavaScript中的一个关键字,不能使用obj.style.float="left";这样的句子。得使用其他写法。
IE浏览器:
obj.style.styleFloat = "left";
其他浏览器:
obj.style.cssFloat = "left";
本文地址:/wordpress/?p=594
本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处
十、最后的总结
其实原本是想通过深入分析浮动的前世今生,本质意义来揭示其丑陋的真面目的,可能是在文字表达上还欠火候,总觉得表达的有些凌乱,估计很轻松就知道我在说什么的人较少,本来是篇很有技术含量的文章,但是在表现上做的不够好,可能是内容太多,自己想要表达的内容太多,于是反而有些混乱。所以,最后其实很多东西没有继续详细展开讲解,例如清除浮动的本质是什么?浮动产生一系列bug的根本原因是什么?浮动布局更好的替代方案是什么?因为内容已经够多够乱的了,所以我决定这些内容留到以后,思路清晰的时候再表述出来。
本文可以说是有别于目前绝大多数关于浮动的文章,我没有讲浮动的使用实例啊之类的东西,也没有去分析浮动的一些特性,仅仅从最根本的地方分析浮动,我想这个比单纯的讲解几个浮动的应用作用更深远。而且还有一点,本文其实某种程度上是批判浮动的,希望开发者尽可能的少使用浮动,少使用浮动去做些其实并不是浮动应该做的事情。所以要是花功夫讲浮动的应用的话就是搬石头砸自己的脚。
本文很多理论的东西,多是自己张鑫旭的个人见解,所以实际上有些认识可能是不准确的,欢迎有不同观点的同行们反驳,也欢迎交流(通过评论或是去进行提问交流)。
原创文章,转载请注明来自[]
本文地址:
(本篇完)
相关文章 (0.682) (0.629) (0.411) (0.329) (0.251) (0.247) (0.233) (0.233) (0.217) (0.208) (RANDOM - 0.015)
标签: , , , , , , ,
赞助商推荐():
想学到点真东西?
如果你有1~3年前端开发经验,不妨
想找个师兄入门前端?不妨
热门总排行

我要回帖

更多关于 用表格进行网页布局 的文章

 

随机推荐