《CSS设计彻底研究》读书笔记 第03章 深入理解盒子模型
2012-11-26 00:34
666 查看
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.csdn.net/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为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。
一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。在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.csdn.net/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为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入理解盒子——模型文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
- CSS 设计彻底研究（三）深入理解盒子模型
- [网页基础]DIV+CSS学习笔记(二)深入理解盒子模型
- 深入理解CSS系列（一）：理解CSS的盒子模型
- 深入理解盒子模型(1)
- 深入理解盒子模型(2)
- 陈力：传智播客古代 珍宝币 泡泡龙游戏开发第十讲：深入理解盒子模型
- 《css设计彻底研究》读书笔记之 盒子模型
- 深入理解视频编解码技术----基于H.264标准及参考模型 读书笔记
- 深入理解盒子模型,计算各个元素之间的距离
- 深入理解盒子模型
- 深入理解盒子模型——CSS之BFC详解
- 深入理解C++对象模型-成员函数的本质以及虚函数的实现(非虚继承)
- 【Todo】深入理解Java虚拟机 读书笔记
- 通过内存模型深入理解参数传递方式
- JavaScript 盒模型 尺寸深入理解
- WPF: 深入理解 Weak Event 模型
- [李景山php] 20170505深入理解PHP内核[读书笔记]--第二章：用户代码执行-1
- 深入理解 Java 虚拟机--Java 内存模型与线程
- 【读书笔记::深入理解linux内核】内存寻址