《CSS设计彻底研究》读书笔记第03章深入理解盒子模型

最新推荐文章于 2025-08-15 23:02:20 发布

原创最新推荐文章于 2025-08-15 23:02:20 发布 · 694 阅读

1 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

5 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文详细介绍了CSS中的盒子模型，包括内容、边框、内边距和外边距等组成部分。探讨了不同浏览器对边框和背景色应用的区别，并讲解了内边距、外边距在布局中的作用及标准文档流的概念。

部署运行你感兴趣的模型镜像

1.在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成，如下图所示：

一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小。(Chrome和Firefox中是这样，但IE中并不是)

2.边框(border)
           border的属性主要有3个，分别是color、width和style。在使用CSS设置边框的时候，可以分别使用border-color、border-width和border-style设置它们。可以通过给border-color、border-width和border-style 1-4个属性值为不同的边框设置不同的属性值。
           例如：
          border-color: red                    #四条边框都是红色
          border-color: red green          #上下边框红色，左右边框绿色
          border-width:1px 2px 3px       # 上边框1px，左右边框2px，下边框3px
          border-style: dotted dashed solid double #上右下左
          也可以对某一条边框设置属性
          border:2px green dashed         # 将所有边框设置为2px宽，绿色，虚线
          border-left: 1px red solid         # 将左边框设置为1px 红色实线
          也可以对某个边框的某个属性设置值
          border-left-color:red

3.当有多条规则作用域同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。

4.在设置边框时，在给元素设置background-color背景色时，IE作用的区域为content+padding，而Chrome、Firefox则是content + padding + border。
<style type="text/css">
#outerBox {
     width:128px;
     height:128px;
     border:10px black dashed;
     background: silver;
}
</style>

<body>
<div id="outerBox"></div>
</body>
如下所示，分别是是IE9、Chrome和Firefox的执行效果

图1：IE9 图2：Chrome 图3：Firefox
另外，IE和Firefox都是以padding为设置背景的基准点的。区别为边框所占据的面积中，IE并不显示图像的内容，Firefox显示背景图像的内容（假设边框的宽度为10px，边框显示的是图像最下面的10px的内容，如此类推）

--------------------------------------------------
author: cs_cjl
website: http://blog.youkuaiyun.com/cs_cjl
--------------------------------------------------

5. 内边距（padding）
padding用于控制内容与边框之间的距离。padding属性可以设置1-4个属性值，和边框属性的设置类似。
当为盒子设置背景图片时，默认情况下，背景图像覆盖的范围是padding+cotent组成的范围

6. 外边距（marign）
         margin指的是元素与元素之间的距离。
         body是一个特殊的盒子，它的背景色会延伸到margin的部分。

7. 标准文档流
         所谓标准文档流，就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。
         （1）块级元素(block level)
                 它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
         （2）行内元素(inline)
                 对于这类文字元素，各个字母之间横向排列，到最右端自动折行。

8. div与span的区别在于，<div>是一个块级元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素，在它的前后不会换行。此外<div>可以包含<span>，而<span>不可以包含<div>。

9. 盒子在标准流中的定位原则
          (1). 行内元素的水平距离为左边盒子的margin-left+右边盒子的margin-right
          (2). 块级元素之间的竖直距离为上面盒子的margin-bottom和下面盒子的margin-top中的较大值
          (3). 对于嵌套的盒子，子盒子的marign将以父块的content为参考

                   当父块的高度值小于子块的高度加上margin的值时IE浏览器会自动扩大，保存子元素的margin-bottom的空间以及父元素自身的padding-bottom。而Firefox就不会，它会保证父元素的height高度完全吻合，而这时子元素将超过父元素的范围。
                   另外，margin也可以设置为负值，当margin为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。