宝山网站建设,莱芜受欢迎的网站建设,福州公司网站建设_,广西网站制作公司1. 浮动出现的意义其实只是用来让文字环绕图片而已#xff0c;仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情
2. 浮动的包裹性
撇开浮动的“破坏性”#xff0c;浮动就是个带有方位的display:inline-block属性
display:inline-block某种意义上的作用就是包…1. 浮动出现的意义其实只是用来让文字环绕图片而已仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情
2. 浮动的包裹性
撇开浮动的“破坏性”浮动就是个带有方位的display:inline-block属性
display:inline-block某种意义上的作用就是包裹(wrap)而浮动也有类似的效果。举个常见例子或许您有实现宽度自适应按钮的经验实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢一就是display:inline-block二就是float
浮动从某种意义上而言与display:inline-block属性的作用是一模一样的所以类似于display:block; float:left;的CSS代码超过95%的情况是没有道理的(display:block是多余的)。然而float无法等同于display:inline-block其中原因之一就是浮动的方向性display:inline-block仅仅一个水平排列方向就是从左往右而float可以从右往左排列这就是两者的差异。然而我们又有多少情况需要元素从右往左排列呢很少所以CSS中没有浮动这一属性不是什么大不了的事情它其实就那么回事
3. 浮动的破坏性
文字之所以会环绕含有float属性的图片是因为浮动破坏了正常的line boxes
HTML:p这是一行普通的文字这里有个 emem/em 标签/p
这段HTML代码涉及到4种boxes
1. 首先是p标签所在的containing box此box包含了其他的所有boxes
2. 然后就是inline boxes inline boxes不会让内容成块显示而是排成一行如果外部包含inline属性的标签(span,a,cite等)则属于inline boxes如果是个光秃秃的文字则属于匿名inline boxes
3. line boxes 在containing boxes里一个一个的inline boxes组成了line boxes。这是浮动影响布局的关键box类型
4. content area content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关
5. 正常的图文混排
默认情况下图片与文字混排应该是这个样子图片与文字基线对齐图片与文字在同一行上 上图中图片为一个inline boxes两边的文字也是inline boxes。由于line boxes的高度是由其内部最高的inline boxes的高度决定的所以这里line boxes的高度就是图片的高度。此时图片与文字是同一box类型的元素都是inline boxes是在同一行上的所以默认状态下一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐您唯一能做的就是破坏正常的line boxes模型
6. 含有浮动属性的图片与文字 刚才说过正常情况下图片自身就是个inline boxes与两侧的文字inline boxes共同组成了line boxes但是一旦图片加入了浮动情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性至少有一点我可以肯定图片的inline boxes不存在了被恶魔附体变身了而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了其会从line boxes上脱离出来跟随自身的方位属性靠边排列。这种状态跟限制性内切酶起作用几乎一致一条基因链上(line boxes)有很多的基因(inline boxes)然后限制性内切酶(float)会切除特定的DNA序列此序列(float元素)就会从基因链上脱离出来
在目前的CSS的世界中所有的高度都是有两个CSS模型产生的一个是box盒状模型对应CSS为”heightpaddingmargin”另外一个是line box模型对应CSS为”line-height”。前者的height属性分为明显的height值和隐藏的height值所谓隐藏的height值是指图片的高度一旦载入一张图片其内在的height值就会起作用即使您看不到”height”这个词。而后者line box则针对于文字等这类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 - 无高度
我们可以拿浮动元素与绝对定位元素做对比或许可以帮助理解。与浮动元素一样绝对定位元素也具有“包裹性”此“包裹性”适用于任何元素。那么浮动元素与绝对定位元素的差别在哪里呢我觉得最主要的差别在于绝对定位的元素脱离了文档流而浮动元素依旧在文档流中而这造成的显示上的差异就是同处于文档流中的文字实体不会与浮动元素重叠而会与绝对定位元素重叠。这就是文字环绕显示的重要原因之一虽然图片实际占据的高度为0但是由于其宽度实体存在包裹性同样是content area 实体的文字不会与之重叠外部的容器盒子containing box(p,div,ul,li)会重叠这就好比篮球场上站了个植物人虽然其几乎不可能得分运球之类但是他的实体在那里它可以阻挡同一水平空间上的同一类型的个体即人直接穿过去要通过得绕道。但是其无法阻挡整个球队的向前推进。见下图firebug显示截图 总结
1. 浮动元素的破坏性虽然破坏了inline boxes但其内容还是真实存在的(图片占据的高度为0但是因为包裹性的原因其实体还是存在)所以和绝对定位元素不同的就是被破坏掉的元素并没有脱离文档流仍然会占据一定的空间
2. 浮动元素的包裹性是指浮动元素实际就是一个block元素或者带方向的inline-block属性那么等同于是根据内容来决定宽度或者高度的意思
3. 浮动元素的破坏性是指破坏了inline boxes导致的
4. CSS中的高度由2个模型产生一个是盒模型的marginpaddingcontent另一个则是专门用来衡量文字的line boxes文字的高度一般由line-height属性决定
