一格 » CSS

两种box model

Tiejun — Mon, 24 Jan 2011 14:15:20 +0000

box model是指元素计算尺寸的模型，具体的说就是height、padding、border、margin与元素实际尺寸的计算关系，如题所述有两种box model：

1.w3c的标准box model：元素的实际空间=height/width+padding+border+margin

2.ie 的传统box model：元素的实际空间=height/width+margin,（height/width包含border，padding box）

目前浏览器，大部分元素都是基于w3c model的，但对于表单元素有些是基于传统 box model的，包括：input[type='submit'],input[type="reset"],button和 select，这就意味着我们只需设置最终的高宽，里面的padding，border只会向内延伸。

另外，css3引进的新属性 box-sizing可以改变box model，这是非常有用的，如我们需要设置div高度为屏幕100%，但又想设置其padding为一个绝对值，传统做法就是里面再嵌套一个div来设置padding，这时使用box-sizing：border-box，使用传统box model渲染就很容易解决了。

目前兼容写法：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

相关阅读：
Form elements and box model

establish a new block formatting context

Tiejun — Thu, 24 Jul 2008 10:39:37 +0000

vertical margins of in–flow children do not collapse with the (vertical) margins of the parent box that has established a new block formatting context.

Clear Floats

Tiejun — Tue, 22 Jul 2008 21:42:46 +0000

清除浮动的若干问题：

.clearfix:after { content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } /*fix for ie/mac;now fix for ie7 ,too*/.clearfix { display: inline-block; } /* Holly Hack Targets IE Win only(get form ie/mac,下面的hack ie7不再能识别) */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End Holly Hack,通过上面两次定义display已触发layout */

So this is why the Aslett method is still working, both of the
ingredients for the "trip switch" are present ~ in PIE’s demo anyway.
And Tony’s method of containing floats may still only work for you if you are serendipitously using the later IE/Mac "fix" of display:inline-block;rule and subsequently overriding it with the display:block; rule.

I was asked if that meant the Holly Hack wasn’t required any more,
and the answer is it’s up to you.. IE5.0 does not have support for
inline-block, it’s only good for IE5.5+. So if it is important that you
still support IE5 (Mac and/or Windows) then I would suggest leaving it
place, though write yourself some notes in the CSS that the Mac fix is
no longer just a Mac fix, it’s likely an IE7 fix too. Obviously if you
no longer need to/or never had to support IE/Mac, you still need the
two rules but you would not need to hide the second one.

一个css布局的问题

Tiejun — Tue, 22 Jul 2008 08:10:47 +0000

讨论

1.firefox 中设置float属性，可以让box 建立新的块级格式化范围

+设置display:inline-block，table，table-cell，inline-table；position:absolute.参考min-width

2.ie6中float的3pxbug。ie7.0未定义dtd时有

解决方法：相邻元素也设置float属性，或者，让那个元素margin-left：-3px;

3.ie和ff中float元素的不同

ie中float会float到最上面：






这是一个标题



 
  地址：
似效果，发现真的很头疼。尤其两个图的很头疼。。尤其两个图

  电话：
251453655

  联系人：
251453655

 







这是一个标题



 
  地址：
似效果，发现真的很头疼。尤其两个图的很头疼。。尤其两个图

  电话：
251453655

  联系人：
251453655

 







这是一个标题



 
  地址：
似效果，发现真的很头疼。尤其两个图的很头疼。。尤其两个图

  电话：
251453655

  联系人：
251453655

4.ie中float元素，设置padding以后，似乎父级中，多了一个padding -left。









这是一个标题






 

  地址：
似效果，发现真的很头疼。尤其两个图的很头疼。。尤其两个图


  电话：
251453655


  联系人：
251453655


 














这是一个标题






 

  地址：
似效果，发现真的很头疼。尤其两个图的很头疼。。尤其两个图


  电话：
251453655


  联系人：
251453655


 














这是一个标题






 

  地址：
似效果，发现真的很头疼。尤其两个图的很头疼。。尤其两个图


  电话：
251453655


  联系人：
251453655

5.ie6中并不支持li>dl>dt种定位。

6.宽度自适应问题。

7.注释语句的书写，见上方代码。

8.少一个border可以使用margin-left：-x；

——————————-

设置垂直居中时，导航栏。可以设置line-height然后overflow：hidden；帖子

火狐实现text-overflow:ellipsis 效果

Tiejun — Mon, 21 Jul 2008 07:01:51 +0000

text-overflow:ellipsis;
-o-text-overflow:ellipsis;

分别为被ie和Opera支持的属性，但是火狐还没有。搜索了一些解决方法。1.Make Text-Overflow work on both IE and Firefox（通过附加一个Xml和js文件，还不会用^_^)2.Hacking text-overflow for Firefox3.CSS:after（这种方法有缺陷）

On having layout

Tiejun — Tue, 15 Jul 2008 21:48:48 +0000

翻译：On having layout

[声明：本文转载自http://old9.blogsome.com/2006/04/11/onhavinglayout/]

译者注：一篇很好的文章，很久以前在blog上就推荐过，这两天断断续续花了点时间翻译了一下，推荐读读。英文原文在此。

文中所有的 layout 这个单词都未作翻译，一来本身这个单词意思就比较多，翻成啥都觉得别扭，二来它也是专有的属性，所以就意会一下吧。水平有限，很多地方都是模模糊糊地意译，发现错误欢迎留言指出。

引用一段来自Dean Edwards的评价：

I
recommend that every CSS designer and DOM scripter read this.
Understanding “layout” gives a huge insight into lots of other IE bugs
and idiosyncrasies.

(Dean Edwards)

4月16日修订的内容：

将quirks模式这一部分单独移动到一篇文章中讲述。
添加：边缘裁切。
添加：收缩包围(shrink-wrapping)现象。

5月17日修订的内容：

重写了了浮动元素旁边的元素这一部分。
部分章节小的修正：属性，有关内联级别元素，CSS hacks。
重新整理了部分章节的语言：定义，数据，问题种种，分析，清除浮动和自动扩展适应高度，绝对定位元素。

10月19日修订的内容：

添加：重置 hasLayout。
相关措辞修改。

07年5月9日修订的内容

添加德语翻译链接。
由于 MSDN 中的一些链接失效，添加了脚注说明。
删除了重置 hasLayout 这部分中一句有争议的话。

On having layout

本文修订中: 当前版本：rev. 7 2007-05-09; 修订历史; 各种语言版本; 目录

介绍

Internet
Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin
把这些问题归类为“尺寸bug(dimensional bugs)”，意思是这些 bug
可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这
个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。

hasLayout — 定义

“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等。

这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有“layout”。

微软的开发者们认为元素都应该可以拥有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了true之时。

术语

当我们说一个元素“得到 layout”，或者说一个元素“拥有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 为此被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。

而“无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个“无layout祖先”。

给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false ，除非把一开始那些触发 hasLayout = true 的 CSS 属性去除或重置。

问题种种

hasLayout 的问题不管新手还是老手，不管设计师或者程序员可能都遇到过。Layout 在显示盒子时有着不同寻常而且难以预料的效果，而且有时甚至会牵连到他们的孩子元素。

一个元素是否具有“layout”可能会引发如下的一些问题：

IE 很多常见的浮动 bug 。
元素本身对一些基本属性的异常处理问题。
容器和其子孙之间的边距重叠(margin collapsing)问题。
使用列表时遇到的诸多问题。
背景图像的定位偏差问题。
使用脚本时遇到的浏览器之间处理不一致的问题。

上面的列表只是列出一个大概，也不完善。下面的文章将尽可能详细彻底的描述有无“layout”所带来的各种问题。

Layout 从何而来

不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有“layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。

默认layout元素

下列元素应该是默认具有 layout 的：

, ,

,	,

一格 » CSS

两种box model

establish a new block formatting context

Clear Floats

一个css布局的问题

火狐实现text-overflow:ellipsis 效果

On having layout

翻译：On having layout

On having layout

目录

介绍

hasLayout — 定义

术语

问题种种

Layout 从何而来

默认layout元素