Category Archives: MBA wiki

博百优很久没介绍CSS知识了，上次推荐完CSS书籍之后呢，今天给大家带来的的弹性布局。弹性布局是相对于字号而不是浏览器宽度来设置元素的宽度。通过以em为单位设置宽度，可以确保在字号增加时候整个布局随之扩大。这可以将行长保持在可阅读的范围，对于视力弱或有认知障碍的人尤其有用。

博百优认为，要学好CSS必须要看好书，一般技术书籍我们都是推荐买国外的，因为国内的技术书籍很多哦都不值得看或者是直接抄袭国外的知识。所以今天博百优CSS给大家推荐的几本书几本书都是国外的，希望大家喜欢。

经历了两天的博百优网赚系列（链接类和广告联盟类）之后，今天要回归主题，博百优CSS的学习当中。今天大家一起来学习行框与清理，这是继上次的CSS定位的绝对相对定位和浮动定位之后的新的知识点。 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像。如博百优给出的下图：

昨天博百优提及CSS定位中忘记了提及浮动定位模式，浮动的框可以左右移动，直到它的外边缘碰到包含框或另外一个浮动框的边缘。因为浮动框不在文档的普通流中，所以博百优认为文档的普通流中的块狂表现得就像浮动框不存在一样。 如博百优图2-13所示，当把框1向右浮动的时候，它就会脱离文档并且向右移动，直到它的右边缘碰到包含框的右边缘位置，下面看看博百优图：

视觉格式化模型和今天介绍的相对定位，绝对定位都属于我们定位概述的内容范畴里面。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。下面博百优CSS给大家举一个例子： 比如，将top设置为20像素，那么框将出现在原位置顶部下面20像素的地方。如果将left设置为20像素，那么元素左边创建了20像素的空间，这个应该很容易理解的。

很悲哀，IE5 和IE6都是在怪异模式中使用自己的非标准框模型。这些浏览器的width属性不是内容的宽度，而是内容、填充和边框的综合。这实际上有一定的意义，因为在现实世界中框具有固定的尺寸,而且填充是放在框里面的。添加的填充越多，给内容留下的空间就越少，尽快符合逻辑，但是这些IEb按本不符合规范，博百优虽然不是一个设计师，但是平时修改网站，自己布局的时候也会有同样头疼的问题，国内就是TMD多用户还在迷恋IE6，这是一种何等悲壮的盛况。 在前面的例子当中，我们说过IE5.x中框的总宽度只有90像素，这是因为IE5认为每个边上5像素的填充是70像素的宽度的一部分，而不是宽度意外附加的。