第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秘籍》（第三版）-读书笔记(4)的更多相关文章

  1. Linux设备驱动程序 第三版 读书笔记（一）

    Linux设备驱动程序 第三版 读书笔记(一) Bob Zhang 2017.08.25 编写基本的Hello World模块 #include <linux/init.h> #inclu ...

  2. effective java(第三版)---读书笔记

    第一章 引言 < Effective Java>这本书并不厚,而且并不适合初学者,适合有一定的工作经验的java攻城狮.这本书不是百科全书式的JAVA 手册,而是试图在讲述如何正确.高效地 ...

  3. javaScript高程第三版读书笔记

    看完<dom编程艺术>现在准备读进阶版的js高程了,由于篇幅较长,所以利用刚看完<dom编程艺术>学到的知识写了段JavaScript代码,来折叠各章的内容.并且应用到了< ...

  4. 《ECMAScript6标准入门》第三版--读书笔记

    2015年6月,ECMAScript 6正式通过,成为国际标准.尽管在目前的工作中还没有使用ES6,但是每项新技术出来总是忍不住想尝尝鲜,想知道ES6能为前端开发带来哪些变化?对自己的工作有哪些方面可 ...

  5. JavaScript高级程序设计第三版-读书笔记（1-3章）

    这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript   提供核心语言功能 DOM     提供访问 ...

  6. CSS权威指南-第三版--读书笔记

    第一章:CSS和文档 html是结构化语言,css是样式语言,html主要用来被强大的搜索引擎更好的索引,更好的让一个盲人通过语音浏览器来了解我们的网页,这也就是为什么说html是结构话语言,因为这是 ...

  7. CLR.via.C#第三版 读书笔记

    第一章 CLR的执行模型 1.1将源代码编译成托管代码 决定将.NET Framework作为自己的开发平台之后,第一步是决定要生成什么类型的应用程序或组件.假定你已经完成了这些次要的细节:一切都已经 ...

  8. 9Andrew.S.Tanenbaum计算机网络第三版读书笔记-总体概览

  9. 高性能mysql第三版读书笔记3

    innodb以前不支持高并发,在搞病房下就是悲剧,全部卡在mutex(缓冲池mutex)上,现在通过线程调度器控制线程怎么进入内核访问数据,参数为innodb_thread_concurrency,它 ...

  10. LINUX内核设计与实现第三周读书笔记

    LINUX内核设计与实现第三周读书笔记 第一章 LINUX内核简介 1.1 Unix的历史 1969年的夏天,贝尔实验室的程序员们在一台PDR-7型机上实现了Unix这个全新的操作系统. 1973年, ...

随机推荐

  1. C语言 gets（）和scanf（）函数的区别

    scanf( )函数和gets( )函数都可用于输入字符串,但在功能上有区别.若想从键盘上输入字符串"hi hello",则应该使用 gets 函数. gets可以接收空格:而sc ...

  2. .NET软件工程师面试总结

    1.手写画出系统架构图,系统代码架构,有什么技术难点?  2.手写画出系统部署图 CDN(一般购买别人的服务器会自动CDN,他们自己配置就OK啦) 3.asp.net 的session怎么实现会话共享 ...

  3. 为什么要使用sass

    或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...

  4. SSIS 项目部署模型

    微软 BI 系列随笔 - SSIS 2012 基础 - SSIS 项目部署模型 关于部署 SSIS 2012 支持两种部署模型:项目部署模型和包部署模型. 使用项目部署模型可以将项目部署到 Integ ...

  5. 【uTenux实验】集合点端口

    这个是头一次接触的概念.比较不好理解.内核规范中的说明就要20页! 看了王总写的uTenux内核规范之后,有那么一点明白了但理解不深. 集合点端口就像每次工作前的收集情况会.首长下达收集情况指令,各个 ...

  6. java io流 数据流传输

    java io流 数据流传输 把这段当公式用就可以了 //数据流传输 import java.io.*; public class Index{ public static void main(Str ...

  7. redis shell命令大全

    redis shell命令大全(转自http://blog.mkfree.com/posts/5105432f975ad0eb7d135964) 作者:oyhk   2013-1-28 3:11:35 ...

  8. JVM内存结构之二--新生代及新生代里的两个Survivor区(下一轮S0与S1交换角色，如此循环往复)、常见调优参数

    一.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我 ...

  9. HttpRequest.UserAgent 属性 (System.Web)

    获取客户端浏览器的原始用户代理信息.

  10. Struts2中的异常处理

    因为在Action的execute方法声明时就抛出了Exception异常,所以我们无需再execute方法中捕捉异常,仅需在struts.xml 中配置异常处理. 为了使用Struts2的异常处理机 ...