2015第10周五CSS—2

时间 2019-11-30

标签 10周 css 栏目 CSS 繁體版

原文原文链接

常常遇到的浏览器兼容性有哪些？如何解决？

　　一、浏览器默认的margin和padding不一样。解决方案是加一个全局的*{margin:0;padding:0;}来统一。javascript

　　二、IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。测试代码以下：css

<html>
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        .one{
            float: left;
            width: 150px;
            height:150px;
            background:#EEE;
            margin: 5px 0 5px 150px;
        }
    </style>
</head>
<body>
    <div class="one">Double Margin Bug(150*150)</div>
</body>
</html>

　　三、在ie6，ie7中元素高度超出本身设置高度。缘由是IE8之前的浏览器中会给元素设置默认的行高的高度致使的。解决方案是加上overflow:hidden或设置line-height为更小的高度。测试代码：html

.one{
    height:5px;
    width:100px;
    background:#F60;
}

　　四、min-height在IE6下不起做用。解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值。java

　　五、透明性IE用filter:Alpha(Opacity=60)，而其余主流浏览器用 opacity:0.6;git

　　六、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:none;}样式。github

　　七、input边框问题。去掉input边框通常用border:none;就能够，但因为IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。web

　　ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据本身的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。面试

　　解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。浏览器

　　八、父子标签间用margin的问题，表如今有时除IE(6/7)外的浏览器子标签margin转移到了父标签上，IE6&7下没有转移。测试代码：缓存

<body>
    <style type="text/css">
        .box1{
            height:150px;
            background:#CCC;
        }
        .box1_1{
            height:50px;
            margin-top:50px;
            background:#AAA;
        }
    </style>
    <div class="box1">
        <div class="box1_1">box1_1</div>
    </div>
</body>

　　解决办法就是父子标签间的间隔建议用padding，兄弟标签间用margin。

　　九、假设两块div，第一块浮动而第二块没有浮动，IE6下第二块就会跑到第一块边上，而且两者之间还留有间距，但标准浏览器中是第二块重合于第一块。测试代码：

<body>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            border:1px solid #CCC;
        }
        .one{
            float:left;
            height:50px;
        }
    </style>
    <div class="one">One</div>
    <div class="two">Two</div>
</body>

　　解决办法是改变设计思路，若是真有两个div重合的需求，能够用下面的代码实现：

<body>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            border:1px solid #CCC;
        }
        .parent{
            position:relative;
        }
        .one{
            position:absolute;
            left:0;
            top:0;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
        <div class="one">Two</div>
    </div>
</body>

　　十、父子关系的标签，子标签浮动致使父标签再也不包裹子标签。测试代码：

<body>
    <style type="text/css">
        .parent{
            background:#888;
            border:5px solid #888;
        }
        .one{
            float:left;
            width:100px;
            height:100px;
            background:#F60;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
    </div>
</body>

　　在IE、Chrome、Firefox下都是下面的效果：

　　能够看到父元素并无包裹子元素，这是由于float形成的，解决方案是清除浮动就好了，用下面的代码能够解决：

<body>
    <style type="text/css">
        .parent{
            background:#888;
            border:5px solid #888;
            zoom:1;/*--for IE--*/
        }
        .parent:after{ /*--for other broswer--*/
            content:".";
            display:block;
            line-height:0;
            clear:both;
            visibility:hidden;
        }
        .one{
            float:left;
            width:100px;
            height:100px;
            background:#F60;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
    </div>
</body>

　　如今效果是：

如何居中一个浮动元素?

　　父元素和子元素同时左浮动，而后父元素相对左移动50%，再而后子元素相对右移动50%，或者子元素相对左移动-50%也就能够了。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        .p{
            position:relative;
            left:50%;
            float:left;
        }
        .c{
            position:relative;
            float:left;
            right:50%;
        }
    </style>
</head>
<body>
    <div class="p">
        <h1 class="c">Test Float Element Center</h1>
    </div>
</body>
</html>

你如何管理CSS文件、JS与图片？

　　一、对各个项目中CSS，JS里的稳定的通用代码进行提取，造成公共文件，而后利用CDN等资源进行缓存，减轻服务器压力。

　　二、去掉JS、CSS里的冗余代码，对代码进行精减。

　　三、对JS、CSS进行压缩合并，减小请求次数。

　　四、对页面上的小图标，背景等图片进行合并，减小请求次数。

　　五、JS、CSS、图片均用版本控制工具进行管理，方便修改与恢复。

行内元素和块级元素各有哪些？

　　行内元素会再一条直线上，是在同一行的。如我是行内元素span 我是行内元素a

　　块级元素会各占一行。如

我是块级元素div

我是块级元素p

　　行内元素主要有：<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>

　　块级元素主要有：<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>

　　行内元素能够经过display:block转为块级元素。另外块级元素的margin和padding都正常，行内元素左右maring和左右padding正常，上下不识别，也就是说不能经过margin-top和padding-top来改变行高。

CSS引入的方式有哪些?

　　CSS与HTML文档结合的4中方法：
　　一、使用<link>元素连接到外部的样式文件
　　二、在<head>元素中使用"style"元素来指定
　　三、使用CSS "@import"标记来导入样式表单
　　四、在<body>内部的元素中使用"style"属性来定义样式

　　Demo:

<html>
<head>
      <title>css demo</title>
      <link rel=stylesheet type="text/css" href="css/name.css" title="cool">
      <style type="text/css">
            @import url(css/name2.css);
            h1 {color:red}
      </style>
</head>
<body>
      <h1>CSS demo</h1>
      <p style="color:blue">Test</p>
</body>
</html>

link和@import的区别是?

　　本质上，这两种方式都是为了加载CSS文件，但仍是存在着细微的差异。

　　一、老祖宗的差异。link属于XHTML标签，而@import彻底是CSS提供的一种方式。link标签除了能够加载CSS外，还能够作不少其它的事情，好比定义RSS，定义rel链接属性等，@import就只能加载CSS了。

　　二、加载顺序的差异。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面所有被下载完再被加载。

　　三、兼容性的差异。因为@import是CSS2.1提出的因此老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

　　四、使用dom控制样式时的差异。当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import不是dom能够控制的。

浮动真正的意义在哪里呢？要知道这个问题的答案很简单，假设如今CSS中没有浮动(float)属性，那么会变成一个什么样子。咱们会发现，目前流行采用浮动方法实现的不管是分栏布局，仍是列表排列咱们均可以用其余一些CSS属性（不考虑table）代替实现，惟一一个实现不了的就是“文字环绕图片”，我是想不出来能有什么方法可让文字环绕图片显示。好，这个替代不了的做用才是float真正的意义所在。此做用相似于word中的版式，很基础的原始的做用：

例如左边这张word截图就含有左浮动属性(float:left)，这才是浮动应该作的事情。这是很是重要的结论，这是深刻理解浮动属性的基础，咱们后面探讨的一些浮动相关的问题均可以由这里引伸出来，因此，请记住，浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。而咱们目前用浮动实现页面布局本不是浮动该干的事情。

4、浮动的本质是什么？

我将浮动的本质定义为“包裹与破坏”！

1. 浮动的“包裹性”
先说句您应该没有见过的结论：撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性。

display:inline-block某种意义上的做用就是包裹(wrap)，而浮动也有相似的效果。举个常见例子，或许您有实现宽度自适应按钮的经验，实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数，这就须要按钮要自动包裹在文字的外面。咱们用什么方法实现呢？一就是display:inline-block；二就是float。例如咱们要实现新浪博客中的“发表文章”之类的宽度自适应按钮（以下图）:

背景图片为：

display:inline-block方法

CSS代码以下：

.btn1{display:inline-block; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代码以下：

<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>

结果以下图：

float:left方法
此方法的CSS代码与上面的inline-block方法惟一不一样之处就在于这里是float:left;

CSS代码以下：

.btn1{float:left; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代码以下：

<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a>

结果以下图：

您能够狠狠地点击这里：按钮宽度自适应demo

上面这个例子旨在说明浮动属性（不管是左浮动仍是右浮动）某种意义上而言与display:inline-block属性的做用是如出一辙的，因此相似于display:block; float:left;的CSS代码超过95%的状况是没有道理的(display:block是多余的)。然而，float没法等同于display:inline-block，其中缘由之一就是浮动的方向性，display:inline-block仅仅一个水平排列方向，就是从左往右，而float能够从右往左排列，这就是二者的差别。然而，咱们又有多少状况须要元素从右往左排列呢？不多，因此，CSS中，没有浮动这一属性不是什么大不了的事情，它其实就那么回事。

2. 浮动的“破坏性”
浮动能够说是全部CSS属性中的“破坏之王”。要理解浮动的破坏性，咱们要从浮动最原始的意义入手。我在上面把浮动的原始意义用粗斜体表示出来了，就是“只是用来让文字环绕图片而已，仅此而已。”

因此，只要您弄明白了为何文字会环绕含浮动属性的图片，您就会知道我所说的浮动的“破坏性”是什么意思了。//下面这部份内容是本文核心，多我的观点，我尽可能表述清楚。您如有兴趣，能够放慢在这里的阅读速度。

先说结论：文字之因此会环绕含有float属性的图片时由于浮动破坏了正常的line boxes。

这里有必要先讲讲line boxes模型。先看下面一段普通的HTML代码：

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

这段HTML代码涉及到4种boxes：
一、首先是p标签所在的containing box，此box包含了其余的boxes；

二、而后就是inline boxes，以下图标注，

inline boxes不会让内容成块显示，而是排成一行，若是外部含inline属性的标签(span,a,cite等)，则属于inline boxes，若是是个光秃秃的文字，则属于匿名inline boxes。

三、line boxes，见下图的标注：

在containing boxes里，一个一个的inline boxes组成了line boxes。这是浮动影响布局的关键box类型，下面会详细阐述。

四、content area，见下图标注：

content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关。

正常的图文混排
默认状况下，图片与文字混排应该是这个样子：图片与文字基线对齐，图片与文字在同一行上，以下图所示：

上图中，图片为一个inline boxes，两边的文字也是inline boxes。因为line boxes的高度是由其内部最高的inline boxes的高度决定的，因此这里line boxes的高度就是图片的高度。此时图片与文字是同一box类型的元素（都是inline boxes），是在同一行上的，因此，默认状态下，一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐，您惟一能作的就是破坏正常的line boxes模型。

含有浮动属性的图片与文字
先看一下图片添加了float:left样式后的表现，见下图：

刚才说过，正常状况下，图片自身就是个inline boxes，与两侧的文字inline boxes共同组成了line boxes，可是，一旦图片加入了浮动，状况就彻底变了。我认为是浮动完全破坏了img图片的inline boxes特性，至少有一点我能够确定，图片的inline boxes不存在了，被恶魔附体，变身了，而这个恶魔就是浮动。一旦图片失去了inline boxes特性就没法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列。这种状态跟限制性内切酶起做用几乎一致，一条基因链上(line boxes)有不少的基因(inline boxes)，而后限制性内切酶(float)会切除特定的DNA序列，此序列(float元素)就会从基因链上脱离出来。

这个从line boxes上脱离的浮动元素其实就是一个躯体，一个空壳子，表象。由于其没有inline boxes。有人可能会问，没有inline boxes就没有呗，有什么大不了的？非也非也！这个inline boxes很个很重要的概念。我曾在“css行高line-height的一些深刻理解及应用”一文中提到太高度的本质，这里有必要再讲一遍。

在目前的CSS的世界中，全部的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为”height+padding+margin”，另一个是line box模型，对应样式为”line-height”。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起做用，即便您看不到”height”这个词。然后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height做用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个缘由），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠造成了containing box的高度，也就是咱们见到的div或是p标签之类的高度了。因此，对于line box模型的元素而言，没有inline boxes，就没有高度了，而浮动却偏偏作了这么龌龊的事情，其直接将元素的inline boxes也破坏了，因而这些元素也就没有了高度。

咱们所处的这个世界时须要坏人来维持平衡的。武侠世界里不是常有要消灭某个超牛叉的大魔头时，会有人修炼魔功与之抗衡嘛。浮动彷佛就是这样的一个角色，在网页最初的时候就是显示一些图片的文字啊什么的，所须要的布局也就那么几个，其中之一就是文字环绕图片显示了，但是怎么实现这样的效果呢？聪明的CSS开发者就创造了一个修炼“魔功”的float属性，其做用就是破坏line boxes模型好让文字环绕图片显示，最后实现了吗？确实实现了。还记得我屡次说到的浮动的意义吗——只是用来让文字环绕图片而已，而要实现这个就须要用到浮动的“破坏性”。

沿用上面图片的例子。浮动破坏了图片的inline box，产生了两个结果：一是图片没法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -> 无line box -> 无高度）。而这些结果偏偏是文字环绕图片显示所必须的。

文字环绕图片显示的缘由
先看下面的flash动画演示（点击按钮开始）：

动画所演示的关键点其实就是上面的一系列分析与讲解，即“包裹与破坏”！包裹是让标签占据的空间水平收缩，破坏是破坏的inline box。正如上面讲解的，inline boxes是高度造成的基础，浮动破坏了inline boxes也就没有高度可言了。真是因为浮动元素没有了inline boxes，没有了inline boxes高度，才能让其余inline boxes元素从新整合，环绕浮动元素排列。

咱们如今假设浮动没有破坏inline boxes，那么虽然图片会靠左显示，可是其会与文字造成新的高度包络线（同类聚合），且只能与一行文字造成line box，没法实现文字环绕效果，因此浮动破坏inline boxes是必须的。

咱们能够拿浮动元素与绝对定位元素作对比或许能够帮助理解。与浮动元素同样，绝对定位元素也具备“包裹性”，此“包裹性”适用于任何元素。那么，浮动元素与绝对定位元素的差异在哪里呢？我以为最主要的差异在于：绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中；而这形成的显示上的差别就是：同处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。这就是文字环绕显示的重要缘由之一：虽然图片实际占据的高度为0，可是因为其宽度实体存在（包裹性），一样是content area 实体的文字不会与之重叠（外部的容器盒子containing box(p,div,ul,li)会重叠），这就比如篮球场上站了个植物人，虽然其几乎不可能得分，运球之类，可是他的实体在那里，它能够阻挡同一水平空间上的同一类型的个体（即人）直接穿过去，要经过，得绕道。可是其没法阻挡整个球队的向前推动。见下图（firebug显示截图）：

5、浮动的非本职工做

浮动的本职工做是让匿名inline boxes性质的文字环绕图片显示，而其余全部用浮动实现的效果都不是浮动应该作的事情，我称之为“非本职工做”。

或许咱们并无过多的深思，把一些实际上不是浮动该干的事情看成“这必须用浮动来实现”。举个常见的例子，列表显示，见下面的图，截自淘宝新版首页：

我不看代码就知道是用浮动实现的，我用firebug一看，果真是，不只浮动，并且定宽。ps:要是在几个月之前，我会以为这实在有待改进，不过如今个人心态宽了，布局思想不一样而已，没有孰对孰错之分。

我能够确信，浮动这个属性诞生的那天压根没有想到本身会要作这样的事情，原本它觉得本身就让文字环绕显示就OK了，功德圆满了，结果，在web2.0的时代，其却在页面布局中被滥用。可能有人会反驳，你何处此言，有何证据？

咱们只要静下心来好好想一想浮动的本质，实现的原理，就能够知道为何浮动本不该该用来对页面进行布局。还记得上一部分所说的浮动的本质吗？即“包裹与破坏”。咱们能够用这个（“包裹与破坏”）解释为何浮动可让li这类block水平的元素水平排列。

单个无浮动的li元素

看下面的HTML代码：

<ul style="width:440px;">
    <li style="border:4px solid #ff6633; background:#ffffc0;"><img src="../image/border.png" /></li>
</ul>

结果以下图（截自Firefox浏览器，无其余样式干扰，下同）：

这里的li元素为何会有高度？若是您认真读过前半部份内容关于line boxes模型与高度的关系的内容，应该知道，因为图片没有应用float属性，其自己有一个正常的inline box，这个inline box高度等于图片的height，在这行元素中，图片这个inline box的高度最高，因而传递给了line box，line box是个真正意义上的高度，直接做用于containing box（就是这里的li元素，使li元素有一个高度）。理解了这个您就会明白为何要是这里的图片添加了float属性，li高度会塌陷了：浮动破坏了inline box。这个后面会详细讲解。

这里的li没有添加float属性，能够见到li宽度100%自适应于父ul标签。一切显得那么的和谐！

单个左浮动的li元素

看下面的HTML代码：

<ul style="width:440px;">
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
</ul>

结果以下图：

相比上面而言，这里多了个float:left;，浮动的“包裹性”一目了然：水平方向上，li宽度紧贴内部元素。我在前文曾说过这么句结论性的话：“撇开浮动的‘破坏性’，浮动就是个带有方位的display:inline-block属性”。这不难理解，您能够讲这里的float:left;改为display:inline-block;最后实现的效果基本上就是同样的。display:inline-block将对象呈递为内联对象，可是对象的内容做为块对象呈递。所谓对象呈递为内敛对象就是元素呈递为inline box，因此浮动“包裹性”所产生的结果就是使得元素转为了line box模型中的inline box元素。

浮动的“包裹性”让元素变成相似于inline box的元素，而浮动的“破坏性”正是破坏inline box元素的，这其中岂不有矛盾。其实非也，对于block水平的这类块状元素须要先让其变成相似效果的内联元素，而后再破坏之，实乃先诱拐再奸杀的生动实例啊！

又是我反复提到的，浮动破坏了inline box，也就是破坏了高度，因此这里含有浮动属性的li元素其实是没有高度的。因此呢，要是后面还有一样的li标签的话，就会水平对齐排列的。以下：

多个左浮动的li元素

看下面的HTML代码：

<ul style="width:440px;">
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
</ul>

结果以下图：

左浮动的li元素和无浮动的li元素

看下面的HTML代码：

<ul style="width:440px;">
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
    <li style="border:4px solid #ff6633; background:#ffffc0;"><img src="../image/border.png" /></li>
</ul>

结果以下图：

后面一个li无float属性，直接无视前面的float li元素，宽度100%显示，并且与float属性的li同一水平线排列，为什么？由于浮动破坏了li的实际高度（缘由我讲得太屡次了），只是图片是个实体，没法与一样实体的同一文档流的图片重合，因此图片靠在一块儿。

6、证据

1. 首要证据

前文是着重分析了浮动的“本职工做”：文字环绕显示；本文着重分析了浮动的“非本职工做”：列表布局；二者都是用的一样的原理解释的，那么有什么证据能够证实“页面布局”不是浮动的“本职工做”呢。答案关键字就是：高度塌陷。

我在多个地方浓墨重彩的讲浮动与高度的关系，浮动使高度塌陷的缘由，本身都以为唠叨的太多了，这里再也不讲。直接讲些实际的东西。

您是否发现，浮动布局会让父标签高度缺失，可是实现文字环绕图片效果的时候父标签无需清除浮动。仍是上面的例子，咱们看看多li元素浮动时ul标签高度在哪里，咱们能够给ul加个边框属性作测试，测试代码以下：

<ul style="width:440px; border-top:4px solid #a0b3d6; border-bottom:4px solid #34538b;">
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
</ul>

结果以下图：

上图显示ul高度为0，这是必然的，正常的，应该的。您要是在IE下看到ul有高度，认为这是Firefox等浏览器有问题就错了，您把ul的width属性去掉，看看，会发现IE下ul高度也为0，这是IE的layout做祟。至于为何ul高度为0，我前面不少地方都已经讲了，再也不说了。可是，从中咱们能够看到，浮动本不是用来列表布局的，而是用来使元素环绕显示的，由于元素环绕（例如文字），其自身是含有inline boxes高度的，这是inline水平的元素造成高度的基础，因此，虽然浮动元素没有高度，可是其周围环绕的元素是有高度的，只要环绕元素比浮动元素高度高，父标签无高度的问题天然也就没有了，可是纯粹一堆浮动元素会有高度吗？没有。因此浮动元素塌陷的问题根本就不是浏览器的bug，而是咱们没有正确地深刻地了解浮动，是咱们本身使用不当，由于浮动本不该该用在这里的。

2. 其余证据

为何说浮动的本职工做不是页面布局而应该是是元素环绕呢。还有其余些证据。

历史

CSS刚诞生的时候，那时候的网页仍是表格布局的时代，能显示几张图片就不错了，复杂的列表显示，布局啊这些概念仍是很淡薄的，浮动出现的意义就是让文字可以环绕图片显示而已，就如word般。

现象

Google是目前互联网领域的老大，技术很牛叉，毋庸置疑，可是，当我发现它全部的页面几乎都是表格布局的时候，很诧异；还有twitter，也是表格布局的；

为何这些顶尖的web网站使用表格布局，而不跟随潮流呢，起初我是百思不得其解。如今，我是明白了，这么作是有他的道理的，难道要用一堆浮动的元素去布局吗？这不是浮动该干的事情。并且，浮动是个很很差惹的魔鬼。

7、浮动是个魔鬼、混球

浮动的存在就是个破坏。浮动效果的实现就是先破坏自身（挥刀自宫），而后影响别人。页面中只要出现一个浮动，势必有其余元素受其影响。这是开发和维护中的一个定时炸蛋(敏感词)。咱们想一想浮动的意义，只是让文字环绕图片显示而已，因此其必须破坏自身模型和高度。可是，不知道幸运仍是不幸，浮动的这种置之死地然后生的特性竟然可让元素布局，加上其表面意思很好理解，兼容性还不错，使用方便，因而在舍弃了table布局的这个web时代里，浮动成为当前页面布局的主流。想一想，真是一件可怕的事情。

有些人可能没有意识到浮动实际上是个很糟糕的东西，是CSS中的一个魔鬼。为何，或许由于用浮动布局页面发现还行，即便偶尔出现些小bug，打打补丁也能够解决。或许是由于没有体会到非浮动元素和浮动元素在开发和维护上所消耗的成本精力的差异。有些人可能知道浮动这个属性能不用就不用，可是因为找不到更好的替代方法，因此仍是有不少地方使用了浮动布局，例如选项卡，列表显示等。

理论上而言，除了浮动的环绕效果以外，咱们使用浮动作的其余工做均可以使用别的CSS属性实现，并且大部分状况是比浮动的效果好：首先没有了清楚浮动一说，二是有关浮动的一堆bug也不会出现，三是元素间独立了，不会像浮动同样改变一个会影响其余。可是，考虑到大多数人对CSS掌握的程度，以及浏览器的一些兼容性问题等，不少时候，咱们不得不使用看上去使用方面但潜在问题较大的浮动属性。因此，有关浮动的一些特性的研究仍是颇有必要的，这就是下面的重点。

8、解决高度塌陷的问题 – 清除浮动

CSS中有个讨论较多的话题就是如何清除浮动，清除浮动其实就一个目的，就是解决高度塌陷的问题。为何会高度塌陷？何时会高度塌陷？塌陷缘由是：元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。何时会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。因此呢，并非只要有浮动元素就会坍塌，就要清除的，CSS水平高低衡量的标准之一就是改用什么样式就用什么样式，很少用也很多用。

下面就来说讲如何清除浮动，zxx:写到这儿，一会儿轻松了。
IE下清除浮动准则很简单，使元素haslayout就能够了。如宽度值，高度值，绝对定位，zoom，浮动自己均可以让元素haslayout。显然，首选zoom:1;不会干扰任何样式。非IE浏览器经常使用的是overflow属性，overflow:hidden;或是overflow:scroll均可以，不过因为后者常常一不当心出现滚动条，因此前者用的更多些。因为现代浏览器都支持after伪类，因此经常也会用after写入一个clear属性的元素清除浮动。固然，最投机取巧的方法就是直接一个<div style="clear:both;"></div>放到看成最后一个子标签放到父标签那儿。下面小结这几个方法。

1. 投机取巧法

就是直接一个 <div style="clear:both;"></div>放到看成最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强，使用方便，是初学时使用的上佳之选。可是我历来不用，由于我看到的是个巨大的浪费，浪费了一个标签，并且只能使用一次，我我的是没法容忍的，因此这个方法不推荐。并且有时候一不留神中间多了个空格会产生一段空白高度的。

2. overflow + zoom方法

.fix{overflow:hidden; zoom:1;}

此方法优势在于代码简洁，涵盖全部浏览器，可谓不错的选择啊。不过也是有问题的，就是这个overflow:hidden;是个小炸蛋，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，因此此方法是有不小的局限性的。我通常不用这个方法，只是有时候顺便去除浮动时用用。

3. after + zoom方法

先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面。因而呢，咱们能够用CSS代码生成一个具备clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，我了不少次，貌似随便写什么东西都没有问题，好比 content:'clear both';没问题，或是 content:'张鑫旭'也是ok的。因而有：

.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

这里的line-height:0写成height:0也是能够的。此方法能够说是综合起来最好的方法了，我都是用这个样式清除浮动的，不会影响任何其余样式，通用性强，覆盖面广，我很推荐哦。

9、float与JavaScript

JavaScript能够改变CSS的属性，其余些属性还好，可是这个float值得一说，为什么呢，由于float貌似是JavaScript中的一个关键字，不能使用obj.style.float="left";这样的句子。得使用其余写法。

IE浏览器：

obj.style.styleFloat = "left";

其余浏览器：

obj.style.cssFloat = "left";

清除浮动的各类技巧是什么？

Float是很普便的。众所周知，可使用他制做布局和网格系统，而且兼容全部浏览器。你们都知道，浮动会让元素塌陷。即被浮动元素的父元素不具备高度。例如一个父元素包含了浮动元素，它将塌陷具备零高度。你能够按下面的方法处理：

使用clearfix(知道Micro clearfix能够加分)
父元素浮动也是一种方法
父元素使用overflow属性并设置visible值

建立一个BFC能够加分。可能要嵌套一些东西，如：<br style="clear: both;">。

做为奖励的问题，你能够向他们问比较使用inline-block仍是float建立一个网格。好的答案：不管哪一种方式有问题。使用inline-block，你须要处理空白问题，使用float你须要清除浮动。

Sprites是什么和为何要使用他们？你是如何建立他们？有可能替代Sprites的方法是什么？

Sprites本质是多张图片拼成一张图片。为了提升性能的缘由，使用它们。通常来讲，最慢一个网站能够作的是请求一个资源。一个网站的请求须要越少，速度越快。快就等于好。多个请求合成一个请求就是好。

问他们如何让Sprites就搞定，他们其实很是熟悉他们。手动建立Sprites固然是一种可能性，但它并非很是高效的。有一些工具能够提升效率，例如：SpriteCow、SpriteMe、Spriting with Compass或者Grunticon。听到这些部是很是有趣的。

Sprites是栅格图像。当问到替代品时，好的答案可能都是与事实相关，Sprites一般为Icons和Icons不是须要光栅。SVG图标，字体图标，字符编码等等。

原文：http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html

http://www.cnblogs.com/jscode/archive/2012/07/08/2581779.html

http://www.cnblogs.com/leejersey/p/3393283.html

http://www.zhangxinxu.com/wordpress/?p=583

http://www.zhangxinxu.com/wordpress/?p=594

1. 2015第11周五
2. 实训第五周（2）
3. 2015第6周二
4. 2015第50周二
5. 2015第23周六
6. 2015第22周日
7. 三周第五次课（4月10日）
8. 2015第6周一网摘
9. Java学习第五周(2)--集合
10. 第 10 周
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用Rxjava计算圆周率
• RxJava操作符（五）Error Handling