《CSS设计彻底研究》读书笔记 第03章 深入理解盒子模型
来源:互联网 发布:java子类重写父类权限 编辑:程序博客网 时间:2024/06/06 01:00
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设计彻底研究》读书笔记 第03章 深入理解盒子模型
- 《CSS设计彻底研究》读书笔记 第04章 盒子的浮动与定位
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 《CSS设计彻底研究》读书笔记 第01章 (X)HTML和CSS核心基础
- 《CSS设计彻底研究》读书笔记 第05章 文字与图像
- 《CSS设计彻底研究》读书笔记 第06章 链接与导航
- 【原创翻译】深入理解CSS盒子模型
- 深入理解盒子模型
- 深入理解CSS盒子模型 - The CSS Box Model
- 理解CSS盒子模型
- CSS盒子模型理解
- css盒子模型理解
- Eclipse中如何查看Java自带函数的源代码?
- HDU1075 字典树
- #.NET中子窗体刷新(调用)父窗体
- 优化java代码性能
- 执笔 为她的笑容
- 《CSS设计彻底研究》读书笔记 第03章 深入理解盒子模型
- 好博客、好文章、好网页,收藏并学习
- poj3667
- 2012.11.25
- 快速排序
- webservice Server Error in '/' Application 本地调试没错,服务器上就错误的解决方法
- 基于XMPP的IM研究
- Ruby Net::HTTP cheat sheet
- UVa 443 - Humble Numbers