第八章内边距、边框与外边距

1.基本元素框

所有文档元素都生成一个矩形框，这称为元素框（element box）

1.宽度与高度

width：从左内边界到右内边界的距离
height：从上内边界到下内边界的距离
*这两个元素不能应用到行内非替换元素（例如链接），只能应用块级元素和替换元素；且均无继承性。一般，元素的高度由其内容决定。

2.外边距与内边距

元素的背景会延伸到内边距中，而不会延伸到外边距。因此，为元素指定的内边距和外边距会影响元素的背景何时结束。

2.外边距

margin默认值为0

1.长度值与外边距

margin属性可以在内容区周围增加空白（因为背景不会延伸到外边距）
*上右下左 TRBL

2.百分数和外边距

百分数是相对于父元素的width计算的。如果没有为元素声明width，则元素的外边距会扩大或缩小以适应父元素（或显示画布）的实际大小。

3.值复制

如果希望除了左外边距以外所有其他外边距都是auto，则：

h2{margin:auto auto auto 3em;}

无法简写

4.单元外边距属性

margin-left/right/top/bottom

5.负外边距和合并外边距

正常流中垂直相邻外边距会合并

6.外边距和行内元素

非替换元素

外边距可以应用到行内元素，不过如果向一个行内非替换元素应用外边距，它对行高没有任何影响；因为外边距是透明的，所以这个声明没有任何视觉效果。
*对于只包含文本的行，能改变行间距离的属性只有line-height、font-size、vertical-align

但只对行内非替换元素的上下边成立，左右两边不同，如果设置了左/右外边距值，它们是可见的，例如：

还有一种情况：

如果行内非替换元素应用负外边距，元素的上下外边距不受影响，行高也不受影响，不过元素左右两端可能与其他内容重叠。例如：

替换元素

为替换元素设置外边距确实影响行高，这取决于上下外边距的值；左右外边距与非替换元素的作用一样

3.边框

元素的背景会在外边框边界处停止，所以背景不会延伸到外边距以内。
边框有三个方面：宽度/粗细，样式/外观，颜色
宽度默认值为medium；
边框样式默认为none；
颜色默认为元素本身的前景色。如果一个元素没有文本，假设一个表内只有图像，那么该表的边框颜色就是其父元素的文本颜色。

1.边框与背景

边框绘制在“元素的背景之上”，CSS2.1明确指出元素的背景为内容，内边距和边框区的背景

2.有样式的边框

1)多种样式

可以为给定边框定义多个样式，按上右下左规则，例如：

p.aside{border-style:solid dashed dotted solid:}

2)单边样式

border-top-style、border-right-style、border-bottom-style、border-left-style

假如想在标题的三个边上设置边框，但左边没有边框，则：

h1{border-style:solid solid solid none;}
或者
h1{border-style:solid;border-left-style:none;}

方法二中，单边属性要放在简写属性之后，不然会覆盖。

3.边框宽度

1)根本没有边框

样式为none的边框并不存在，如果希望边框存在，一定要声明边框样式

4.边框颜色

1)透明边框

想创建不可见的边框，可引入边框颜色值transparent

5.简写边框属性

具体值的顺序并不重要，而且还可以忽略某些值。

6.全局边框

这个属性的值会应用到四个边，如果希望元素有不同的边框，可以利用层叠。

7.边框和行内元素

不论为行内元素的边框指定怎么样的宽度，元素的行高都不会改变。
对于上下边框，例如：

对于左右边框：

4.内边距

默认的，元素没有内边距。如果没有它，元素的边框会与元素本身的内容非常接近。而且内边距不合并。

1.百分数值和内边距

百分数值相对于其父元素的width计算（不论是上下内边距还是左右内边距）

2.单边内边距

3.内边距和行内元素

对于行内元素，外边距和内边距有很大区别。
左右内边距：如果为其设值，则其可见，如图：

内边距不会应用到各行的左右两边，对于替换元素也是这样，当然这种元素不会跨行。

上下内边距：

4.内边距和替换元素

还可以向图像应用内边距，例如：

img{background:silver;padding:1em;}

《CSS权威指南》读书笔记4相关推荐

mysql数据库权威指南_MySQL_MySQL权威指南读书笔记(三)，第二章：MYSQL数据库里面的数 - phpStudy...
MySQL权威指南读书笔记(三) 第二章:MYSQL数据库里面的数据用想用好MYSQL,就必须透彻理解MYSQL是如何看待和处理数据的.本章主要讨论了两个问题:一是SQL所能处理的数据值的类型:二是 ...
MongoDB权威指南读书笔记——CRUD
插入并保存文档插入是向MongoDB中添加数据的基本方法.可以使用Insert方法向目标集合插入一个文档:db.foo.insert({"bar" : "baz&quo ...
HTTP权威指南读书笔记
<<HTTP权威指南>>读书笔记第一部分:Web的基础第1章:HTTP概述主要内容 1.什么是HTTP 2.HTTP的基本组件 HTTP HTTP:HTTP(Hypert ...
HTML5权威指南----读书笔记
<!DOCTYPE html> <html> <head><meta name = 'keywords' content="HTML5权威指南--- ...
计算机网络和http权威指南读书笔记
计算机网络笔记网络层网络层向上提供无连接的,尽最大努力交付的数据报服务网络层不提供数据质量承诺物理层使用的中间设备叫转发器repeater 数据链路层叫网桥bridge 网络层叫路由器rout ...
MapReduce总结 + 相关Hadoop权威指南读书笔记（未完......欢迎补充，互相学习）
文章目录 MapReduce概述 MapReduce优缺点 MapReduce核心思想 MapReduce进程 MapReduce编程规范 WordCount 案例实操本地测试集群测试 Hadoo ...
android开发读书笔记,android开发权威指南读书笔记
第17章 Fragment 1.在res目录下增加 layout-sw600dp 目录,用于存放7英寸及以上尺寸屏幕的布局文件.10英寸以上平板用 sw720dp.如果是更小的屏幕,如 480*800 ...
java性能权威指南中文_Java性能权威指南读书笔记--之一
JIT(即时编译) 解释型代码:程序可移植,相同的代码在任何有适当解释器的机器上,都能运行,但是速度慢. 编译型代码:速度快,电视不同CPU平台的代码无法兼容. java则是使用java的编译器先将其 ...
javascript权威指南读书笔记之二——词法结构
本章讲述的内容,用通俗的语言来说,就是应该注意的地方,这些也许和我们所学的其他语言类似,也许完全不同,比如一开始就介绍说javascript程序中的每个字符都是用两个字节表示的,但有些程序设计者习惯于 ...
HTTP权威指南读书笔记（一）HTTP概述、URL和资源及报文详解
一.HTTP概述 1.WEB客户端和服务器. 2.资源:资源可以是各种格式的静态文件,也可以是应用程序. 3.媒体类型 4.URI:统一资源标识符 URL:统一资源定位符. URL的第一部分称为方案: ...

《CSS权威指南》读书笔记4