第十二章 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{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-480px)”>），另一个针对平板电脑（大于480px，小于768px，<link href=”css/medium.css” rel=”stylesheet” media=”(min-481px)and(max-768px)”>），还有一个针对桌面型显示器（大于768px，<link href=”css/large.css” rel=”stylesheet” media=”(min-769px)”>）
4、将媒体查询包含在样式表中
1）使用@import指令：@import url(css/small.css) (max-480px);
2）在样式中嵌入媒体查询：@media (max-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]-->）