CSS盒子模型详解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框,这个框由元素的内容(content)、内边距(padding)、边框和外边距(margin)组成。
内边距出现在内容区域的周围。如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起。添加边框会在内边距区域外边增加一条线。这些线可以有不同的样式和宽度,如实线、虚线、点画线。在边框外边的是外边距,外边距是透明的,一般使用它控制元素之间的间隔。
关于盒子css的设置
内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边,如:
1
2
3
4
5
6
7
8 |
padding-top:20px; //为元素单独设置上内边距 padding:15px; //元素的所有内边距都为15px padding:1px 2px 3px 4px; //分别为每个边设置内边距,顺序为 上 右 下 左 /*外边距margin用法同内边距padding*/ border-top:1px solid
#ccc; //为元素单独设置上边框 border:2px dashed
#000; //为所有边设置边框 |
标准模式与混杂模式下的盒模型
当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式。在标准模式下浏览器按照规范呈现页面;在混杂模式下,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。浏览器根据DOCTYPE(文档声明)是否存在以及使用那种DTD来选择要使用的呈现方式。如果XHTML和HTML文档保航形式完整的DOCTYPE,那么它一般以标准模式呈现。相反,如果文档的DOCTYPE不存在或者形式不正确则导致HTML和XHTML以混杂模式呈现。如下图所示:
现在确定了IE6及后续版本都会遵循标准兼容模式,那现在唯一要关注的事情就是如何令IE5.5及更早版本中的网页和其在更现代的浏览器中呈现出的是一致的。解决方案很多,大概有以下几种:
- 这么做最安全的方式就是使用条件注释判断语句,这些内容只能在IE/Win中被解析,下面的代码只有在IE6以下的版本中被执行:
123
<!--[
if
lt IE 6]>
//stylesheet
<![endif]-->
- 利用CSS3的box-sizing属性。box-sizing默认值为content-box(标准盒子模型)如果替换为border-box 浏览器会给该元素应用IE盒子模型。
- 给元素加多一个上级div。如:
1234
<div id=
"div1"
>
<div id=“div2”>
</div>
</div>
要想设置div2的width为100px,border为10px,padding为20px,可以这么设置:
12345#div1 {<br> width:130px;<br>}
#div2 {
border:10px solid;
padding:20px;
}
- 使用CSS hacks
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。