七彩课堂[网页设计CSS教程系列]
CSS2盒模型是设计排版定位的关键
CSS2盒模型

CSS2中的盒模型是截系到设计中排版定位的关键,任何一个选择符都遵循盒模型规范,例如<div>、<p>、<a>……盒模型包含
(外补丁)margin,(背景颜色)background-color,(背景图片)background-image,(内补丁)padding ,(内容)content,(边框)border。
需要说明的是:
IE5.x 和 IE 6.0在quirks模式下使用自己的错误的和模型解释,box的宽度等于width的值,比如你定义一个div
[Copy to clipboard]CODE:
div{width:90px; padding:10px;margin:10px;border:10px;}
正常的div的宽度应该为90px+10px*2+10px*2+10px*2=150px
而他们认为是90px。width的值包含了padding margin border的值
解决这个问题的方法:
[Copy to clipboard]CODE:
#content {
width:90px;
voice-family: "\"}\"";
voice-family:inherit;
width:120px; /* For IE 5.x/Win */
}
html>body #content {
width:90pxpx;
}

[Copy to clipboard]CODE:
#content {
width:90px !important;/* For all */
width /**/:120px;/* for IE 5.x/win */
}

html>body #content {
width:90px;
}

而支持标准的浏览器正常的解析了盒模型,认为宽度是120px,比如现在的 Firefox 1.0+ Opera 7.0+ IE6.0的标准模式。

信息推荐
资讯中心 | 电子商务 | 搜索营销 | 设计学院 | 中医养生 | 养生保健 | 节日祝福 | 民俗文化 | 奇闻趣事
建站知识 | 人世百态 | 网站导航 | 传统节日 | 搜索热点 | 星座运势 | 趣闻轶事 | 祝福的话 | 短信大全
© 2023 QicaiSpace.Com