《CSS3秘籍》（第三版）-读书笔记
Posted 浅岸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《CSS3秘籍》（第三版）-读书笔记相关的知识，希望对你有一定的参考价值。
第12章 CSS页面布局
网页布局的类型：
- 固定宽度。不管浏览器窗口的宽度多大，网页内容的宽度始终保持不变。
- 流式。流式设计采用百分比，它会根据浏览器的宽度（无论有多宽）自动进行调整。网页会随着访问者调整浏览器窗口的大小而变宽或变窄。
- 响应式Web设计（Responsive Web Degin，RWD）。RWD不是只给所有设备设计一种布局，而是会根据不同的浏览器宽度，来改变它的展现效果。
第14章 响应式Web设计
响应式Web设计结合了三大理念：
- 用于布局的弹性网络
- 用于图片和视频的弹性媒体
- 为不同屏幕宽度创建不同样式的CSS媒体查询
为了忽略响应式网站在手机浏览器上缩小屏幕的这种行为，可以在网页的<head>中添加以下代码：
<meta name="viewport" content="width=device-width">
另外还有一种方法可以确保手机不会试图缩小网页，而只在100%的尺寸下显示网页。在主样式表中添加@viewport规则（并非在所有浏览器中都可用，有些需要添加供应商前缀才能支持），像这样：
@viewport {width: device-width; }
1、 媒体查询
媒体查询（media queries），它可以让你根据目标浏览器的宽度和高度给网页分配样式。
以下这些常见的设计变更一般都是媒体查询的目标：
n 调整列
n 弹性宽度
n 缩紧空白空间
n 调整字号
n 修改导航菜单
n 在手持设备上隐藏内容
n 使用背景图片
响应式设计时，应该指定不同的宽度值作为断点，以给网页运用不同的样式。一般，设计开始变得难看的那个点就是一个很好的断点；换句话说，断点是一个最佳尺寸，在这里可以定义一个新的媒体查询，并载入一些新的样式，删除掉一两个列。
一般来说，通常会给3个不同的断点创建3组媒体查询，一个针对智能手机，另一个针对平板电脑，还有一个针对桌面型显示器。
创建媒体查询：
1）在标准样式表链接中新增media属性，设定条件，符合这些条件的浏览器才能使用某一个特殊的样式表。
选项max-width和min-width可以决定浏览器的最大或最小宽度。例，
<link href="css/medium.css" rel="stylesheet" media="(min
-width:481px) and (max-width:768px)"
浏览器的屏幕宽度至少必须 为481px,但不超过768px
2）将查询包含在样式表中
u 可以直接在样式表中添加@ import指令，例
@import url(css/small.css) (min-width:320px);
u 在样式表中嵌入媒体查询，例
@media (max-width:480px) {
body {
/*style properties go here*/
}
.style1 {
/*style properties go here*/
}
}
2、 弹性网络
布局设计中的每一列都应该以百分比为单位，而不是以pixel或者em为单位的固定宽度。
在给桌面型显示器设计多列布局之前，要注意html的顺序。查明情况的最容易方式是预览没有应用任何样式的网页。
当你利用百分比设置宽度的时候，有可能遭遇浮动下落的危险。解决方式之一是，使用一个通用选择器，以便重置网页中内个元素上的盒模型。
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
3、 流式图片
弹性设计中的列会随着浏览器窗口变小而收缩，但图片不会。这样就可能导致图片溢出边界，而不能适应列的宽度。
使图片也变成具有弹性的方式：
1）首先，在样式表中添加以下样式：
img { max-width: 100%; }
2）找到网页中的每一个<img>标签，删除其中的height和width属性。
流式图片的不足之处：
- 图片可能被拉伸至超出它的自然宽度而变形失真。
- 图片在屏幕上进行收缩，虽然图片质量不受影响，但却迫使手机用户下载比真正所需大得多的图片文件。
如果你使用了HTML5的video标签，或者嵌入了含Flash的内容，那么嗨可以利用max-width方法，使那些元素也随着它们的容器进行缩放。只需添加下列样式：
img, video, embed,object {
max-width: 100%;
}
不过，这样的样式对于利用iframes嵌入的视频却没有任何帮助。
第15章定位网页上的元素
CSS提供了4种类型的定位：
- 绝对定位。
绝对定位通过以pixel、em或percentage为单位设定元素的左、右、上或下方的位置对它进行定位。
此外，绝对定位的元素甚至可以完全脱离HTML代码确定的文档流。
- 相对定位。
相对定位的元素是相对于它在HTML流中的当前位置进行定位的。
其他网页元素不会占据相对定位元素原来在HTML中所处的位置。
相对定位的最大好处不是移动元素，而是给它内部的绝对定位元素设定一个新的参照点。
- 固定定位。
固定定位元素会被锁定在屏幕的某个位置上。
当访问者滚动网页时，固定元素会在屏幕上保持不动，比如段落和标题，而照片则会在浏览器窗口的上方逐渐消失。
- 静态定位（默认的定位方式）
只是表示网页内容将遵循正常从上到下的HTML流。
要想改变任何一个元素的定位，都可以利用position属性，它的可能值为以下4个关键字之一：static、absolute、relative和fixed。
事实上，绝对定位的元素实际上是被相对地放在了离它最近的定位祖先元素的边界上。
如果一个标签的位置是绝对定位的，且它又不在其他任何设定了absolute、relative或fixed定位的标签里面，那它就是相对于浏览器的窗口进行定位。
如果一个标签处在另一个设定了absolute、relative或fixed定位的标签里面，那它就是相对于另一个元素的边沿进行定位。
一般来说，定位元素的堆叠顺序是按照它们在网页HTML代码只的顺序来进行的。但可以利用CSS的z-index属性来控制定位元素的顺序。这个属性的值为数字，数值越大，元素就会出现在越接近堆叠顶部的地方。
z-index可以为负数。但IE 7 及其更早的版本还是不支持的。
第16章 设计打印页面的CSS技术
1、Media样式表的作用
为了适应不同的上网方式，CSS可以帮助你创建专门针对特殊媒体类型的样式和样式表。CSS支持的10种不同的媒体类型：
all、braille、embossed、handheld、print、projection、screen、speech、tty和tv。
只有当相应媒体类型被激活时，浏览器才能应用其样式表。
其中，应该特别注意这3种媒体类型：
- all样式适用于每一种设备（默认）
- screen样式只适用于显示器
- print样式只适用于打印网页
2、如何添加Media样式表
- 给外部样式表指定媒体类型
如果需要链接只用于打印的样式表，则可以给网站添加下面这行HTML：
<link href="css/medium.css" rel="stylesheet" media="print">
此外，还可以指定多个媒体类型，各类型之间用逗号隔开即可。
- 在样式表中指定媒体类型
也可以利用@media指令直接在样式表中定义特定媒体的样式，像这样：
@media print {
/* put your styles for the printer in here */
}
3、创建打印样式表
- 用!important覆盖屏幕样式
- 重写文本样式
- 定义打印背景
- 隐藏不需要的页面区域
- 给打印添加分页符
page-break-before是让Web浏览器在一个指定样式之前插入一个分页符。page-break-after是在一个指定样式之后插入一个分页符，只要设置成关键字always。
第17章 改正CSS设计习惯
1、添加注释
CSS注释是一条用“/*”和“/*”包围起来的注释
样式命名规范
2、组织样式和样式表
（1）样式命名要清晰
- 要根据用途而不是外观来命名
- 不要根据位置命名
- 不要使用含义模糊的名称
（2）将样式分组，两种常用的方法：
- 把网页上相关部位所采用的样式集中在一起
- 把用途相关的样式集中在一起
3、消除浏览器样式的冲突（在样式表的开头处创建一些基础样式，以删除那些不协调的格式化设置）
- 删除padding和margin
- 使用统一的字号
- 确保让HTML5元素以快级元素显示
- 设置统一的行高
- 删除表格边框线，创建外观一致的单元格。
- 删除链接图片周围的边框线
- 设置统一的列表缩进方式和列表符号
- 删除摘要资料的引号
4、给Internet Explorer尝试不同的CSS
条件注释允许你指定样式表要应用给那个版本的Internet Explorer。如，可以在网页的head中添加以下条件注释：
<!--[if IE 7]>
<link href="IE_styles.css" rel="stylesheet">
<![endif]-->
以上是关于《CSS3秘籍》（第三版）-读书笔记的主要内容，如果未能解决你的问题，请参考以下文章