CSS盒模型详细讲解
CSS 盒模型
网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图:
如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。
注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影响盒子本身的大小,但是它会
影响和盒子有关的其他内容,因此 margin 是盒模型的一个重要的组成部分。
盒子本身的大小是这样计算的:
宽度 = 自身宽度+左内边距+右内边距+左边框+右边框
高度 = 自身高度+上内边距+下内边距+上边框+下边框
值未声明的情况
如果未声明 padding 或者 border,那他们或者值为零(使用 css reset 时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)
块级盒的默认宽度
如果未声明宽度,并且盒子是静态或者相对定位的,宽度会保持 100%的 宽度,padding 和 border 会向内推动,而不是向外扩展。
但是,如果明确设置盒子的宽度为 100%,那么 padding 就会向外延展。
The lesson here being that the default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
要注意的是,盒子的默认宽度并不真的是 100%,而是剩下的可能值(应该是说,剩余真实存在的宽度 - 糖伴西红柿)。应该了解这个特殊值,因为很多情况下,它对于设置/不设置宽度都是非常有用的。
我遇到的最大的麻烦就是 textarea(文本框) 元素了,它们需要设为宽度为所需的”cols”属性,并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%,但有 padding 时,就会延展 textarea 的宽度。固定宽度环境下,通常可以设置为合适的像素值宽度,但是变宽情况就没那么幸运了。
http://www.csswang.com/css/61.html
相关文档:
什么情况下会出现换行:
当元素设置了固定高度,并且文本长度大于标签元素的宽度时,文本会自动换行。
css强制换行使用样式:white-space:nowrap;该样式从效果上是没有浏览器差异,使用该样式后所有文字在ie和firefox下都在一行内显示。但是在IE下使用该属性值后标签元素宽度会被撑大,从而可能导致原来页面布局被破坏。
......
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
#1 { color: #33 ......
首先一点需要知道,
每个浏览器都有自己默认的默认样式,为了让页面内容显示在浏览器中所希望的位置,而不是继承默认样式,就需要在body选择器中重新设定margin和padding的属性值。
如下所示:
body
{
margin:0;
border:0;
}
其次,练习时用这个例子:
html内容:
<body >
&nbs ......
/*控制图片的大小*/
.contentimg{
max-width:600px;
/*max-height:100px;*/
}
*html.contentimg{
width:expression(this.width>50&&this.width>this.height?60:auto);
/*height:expresion(this.height>50?50:auto);
*/
}
调用
$("#"+id.substring(0,id.length-5)+"arCon"). ......
样式选择符命名
选择符以类型分,同类放一起,类的定义顺序以HTML中实际的顺序为参考,以方便查找为主, 使用类似下面的规则:
[模块前缀 | 类型 | 作用]_[名称]_[状态 | 位置]
约定模块、类型、状态、位置等的所使用的单词或其缩写,保持上面的顺序,尽量保持在两到三个单词说清用途。
通用名词缩写
设置
set
......