CSS3秘笈复习:第七章

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3秘笈复习:第七章相关的知识,希望对你有一定的参考价值。

1.边距冲突:

  当元素的bottom margin碰到另一个元素的top margin可能会产生一些怪异的计算,浏览器会忽略小的那个值而使用大的值。

2.边距折叠:

  假设要在警告框里插入一个标题,并且要在它与div的顶部和底部之间各留出一点空间,浴室设置标题的margin为10px。但是设置的边距反而出现在了div的上方,这种现象叫做边距折叠,意味着两个边距变成了一个。解决的方法有两种:(1)在<div>标签周围添加少量的padding;(2)给<div>添加一条border。

  水平边距不会和浮动元素之间的边距发生折叠,绝对定位和相对定位的元素也不会发生折叠。

3.行内元素:

  行内元素只有left/right的margin值,例如<img>与<a>。

4.背景颜色:

  使用background-color和border时,如果边框样式为圆点或者虚线,在圆点或虚线之间的空白处就会显示出背景色。换句话说,web浏览器实际上是把背景色显示在边框线的下方。

5.border-radius:

  border-radius有四个值时,顺序为:左上角、右上角、右下角、左下角。

6.设置盒模型高度与宽度:

(1)content-box:宽度与高度包括内容部分。

(2)padding-box:宽度与高度包括padding部分。

(3)border-box:宽度与高度包括border部分。

7.overflow:

(1)visible:把内容显示在任何地方。

(2)scroll和auto:会添加滚动条。

(3)hidden不现实超过的那部分内容。

8.float:

  源代码的顺序对浮动元素的显示有很大影响。浮动标签的html代码必须出现在任何包围浮动元素的内容之前,假设你已经创建了这样一个网页,它包含一个<h1>标签,后面是一个<p>标签。在<p>标签的末端,又用一个<img>标签插入了一张图片,假设你把这张图片浮动到右边,那么<h1>标签和<p>标签里面的内容仍然出现在照片的上方,只有<img>标签后面的内容会包围图片的左侧。

以上是关于CSS3秘笈复习:第七章的主要内容,如果未能解决你的问题,请参考以下文章

CSS3秘笈复习:第十一章

CSS3秘笈复习:第九章&第十章

CSS3秘笈复习:第一章&第二章&第三章

JS复习:第七章

《通信原理》复习笔记7----第七章二进制数字调制(重点)

《信息与编码》考试复习笔记7----第七章信息率失真函数相关例题