《CSS3秘籍》第12-17章

第十二章 CSS布局简介

1、网页布局的类型

1）固定宽度

2）流式

3）响应式Web设计

2、CSS布局的策略

1）从内容入手

2）Mobile First

第十三章 构建基于浮动的布局

1、简单的两列浮动布局的设计步骤

1）在每一列都包在一个带有ID或class属性的<div>标签里面

2）把侧边栏<div>浮到右侧或左侧：浮动元素的HTML必须处在要包围它的元素的HTML之前

3）给浮动的侧边栏设定一个宽度

4）给正文添加一个left/right margin

2、在非浮动的外围标签如<div>中浮动一个或多个元素时，可能会发生溢出。解决办法如下：

1）在外围标签如<div>的底部添加一个清除元素：<div> <br class=”clear”/> </div>  br.clear{clear:both;}，问题在于会产生额外的HTML代码

2）浮动外围元素：一定要在浮动容器后面的任何元素中添加一个clear属性，确保浮动元素落到容器的下方

3）利用overflow:hidden：如果浮动容器中有人格绝对定位的元素，可能会显示不出来

4）使用Micro Clear Fix：在外部样式表中设置.clear:after{content:” “; display:table; clear:both;} .clear{zoom:1;}

3、多列布局：在外围标签如<div>中设置.multicol{column-count:3; column:1em; column-rule:1px dotted black;}，IE9及其更早的版本不支持多列，需要给Chrome和Safari以及Firefox使用供应商前缀 

4、box-sizing

1)content-box：包含width属性值

2)padding-box：包含left/right padding以及width属性值的总和

3)border-box：包含left/right border、left/right padding以及width属性值的总和

Firefox需要使用供应商前缀

第十四章 响应式Web设计

1、使浏览器的屏幕与手机的显示屏幕相匹配

1）<meta name=”Viewport” content=”width=device-width”>

2）@viewport{width:device-width;}

2、媒体查询的策略

1）调整列

2）弹性宽度：对于手机和平板电脑最好将<div>的宽度设为auto或100%

3）缩紧空白空间：缩小margin和padding值

4）调整字号

5）修改导航菜单

6）在手持设备上隐藏内容

7）使用背景图片

3、设置断点：通常会给3个不同的断点创建3组媒体查询，一个是针对智能手机（小于480px，<link href=”css/small.css” rel=”stylesheet” media=”(max-width:480px)”>），另一个针对平板电脑（大于480px，小于768px，<link href=”css/medium.css” rel=”stylesheet” media=”(min-width:481px)and(max-width:768px)”>），还有一个针对桌面型显示器（大于768px，<link href=”css/large.css” rel=”stylesheet” media=”(min-width:769px)”>）

4、将媒体查询包含在样式表中

1）使用@import指令：@import url(css/small.css) (max-width:480px);

2）在样式中嵌入媒体查询：@media (max-width:480px){.style{}}

5、流式图片：设置max-width：100%，删除height和width属性

第十五章 定位网页上的元素

1、绝对定位：absolute，以pixel、em或percentage为单位设定元素的左右上下方的位置为其进行定位

2、相对定位：relative，相对于它在HTML流中的当前位置进行定位的，其他的网页元素不会占据相对定位元素原来在HTML中所处的位置

3、固定定位：fixed

4、静态定位：static，默认

5、定位的注意事项

1）如果一个定位是绝对定位，且它又不在其他任何设定了absolute、relative或fixed定位的标签里面，那它就是相对于浏览器的窗口进行定位

2）如果一个标签处在另一个设定了absolute、relative或fixed定位的标签里面，那它就是相对于另一个元素的边沿进行定位

6、堆叠元素：z-index，值越大，元素就会出现在越接近堆叠顶部的地方，值为负，元素就出现在其父元素或者其任意一个祖先元素之下。

7、隐藏部分网页

1）visibility:hidden/visible

2）display:none，会在该元素原来所处的位置上留下空白，但是对于已经脱离页面流的绝对定位元素而言则不然

3）opacity:0/1

第十六章 设计打印页面的CSS技术

1、Media样式表

1）all样式：适用于每一种设备

2）screen样式：只适用于显示器

3）print样式：只适用于打印网页

4）其他样式：braille、embossed、handheld、projection、speech、tty和tv

2、添加Media样式表

1）给外部样式表指定媒体类型：<link rel=”stylesheet” href=”print.css” media=”print”/>

2）在样式表中指定媒体类型：@media print{.style{}}

3、在打印中显示链接：a[href^=”http://”]:after{content:”(“attr(href)”)”}

4、隐藏不需要的页面区域：在主样式表中创建一个类样式，并将display属性值设为none；然后在打印样式表对应的类样式中将display属性值设为block

5、给打印添加分页符：要使某一元素显示在打印页面的最顶部，则要设置page-break-before:always;要使某一元素显示在打印页面的最底部，则要设置page-break-after:always

第十七章 改正CSS设计习惯

1、添加注释：/* */

2、组织样式和样式表：样式命名要清晰，要根据用途而不是外观来命名样式，不要根据位置命名，不要使用含义模糊的名称

3、使用多个类可以节省时间

4、将样式分组：把网页上相关部位所采用的样式集中在一起，把用途相关的样式集中起来，，用注释分隔样式组

5、消除浏览器的样式冲突：删除padding和margin，使用统一的字号、确保让HTML5元素以块级元素显示，设置统一的行高，删除表格的边框线、创建外观一致的单元格，删除链接图片周围的边框线，设置统一的列表缩进方式和列表符号，删除摘要材料的引号

6、使用派生选择器

7、给Internet Explorer尝试不同的CSS

<!-- [if IE 7]>

<link href=”IE7_styles.css” rel=”stylesheet”>

<![endif]-->

（<!-- [if IE 8]>

<style>

@import url(”IE8_styles.css” )

</style>

<![endif]-->）