我知道我们需要另外一种语言来保护HTML，这就是我们创造CSS的直接原因
——Bert Bos(CSS创始人之一)

第五章布局

5.1 布局的基本概念

多栏布局有三种基本的实现方案：固定宽度，流动，弹性

5.2 三栏-固定宽度布局

使用“子-星选择符”要注意两点。第一，在为子元素设定垂直外边距时，只能使用margin-top和margin-bottom，不能使用简写的margin,否则会抵消用“子-星选择符”应用给这些元素的水平外边距。

CSS3:box-sizing:border-box;:将border和padding计算入width之内

5.3 三栏-中栏流动布局

人造栏：给包围栏的外包装元素应用与各栏同宽的背景图片和背景色。

2015.8.27更新：

今天遇到个布局问题再来翻了一下书觉得有些地方可以补上：

翻到这里有一个附注栏里提到了关于表现性标记的思考：对于div或span这种中性的元素，对默认样式没有影响，除非给它们应用样式，否则它们就跟不存在一样。所以，我认为添加这种元素达到表现性的目的是完全可以接受的。对此表示赞同。

看到这句：要动，就把内容放在内部div里，动这个div。由于最近遇到的问题对此也深表赞同(手动点赞)。

预防过大的元素：一个简单的预防措施就是添加一条.inner img{max-width:100%;}声明，以便限制图片的宽度不超过其父元素。

通过CSS把布局中的栏设定为table-cell有三个好处：

单元格(table-cell)需要浮动就可以并排显示；
直接为它们应用内边距也不会破坏布局。
默认情况下，一行中的所有单元格高度相同，因而也不需要人造的等高栏效果了。

任何没有明确设定宽度的栏都是流动的。

5.4 多行多栏布局

给标记中每个主要区域的顶级元素添加一个ID作为hook

第六章界面组件

6.1 导航菜单

为了保证用户体验，所有视觉样式——内边距，背景，边框，等等，都要应用给链接a，而不要应用给ul或li,以便热区(可点击区域)最大化，

background-clip:pading-box;声明可以阻止链接的背景(像常规状态下一样)延伸到边框后面。

通过将定边位置(top)设定为100%(相对于其相对定位的父元素li)，其定边会与父元素底边恰好对齐。

为了让用户明确地指导自己是怎么一路选择下来的，还需要让每一级菜单中被选择的元素突出显示。而:hover事件会沿着元素的结构层次“向上冒泡”。这个改进能极大地提高菜单的易用性。

6.2 菜单

其它元素是把服务器发过来的内容显示给用户，而表单则是把用户的信息发送给服务器。

HTML5为input元素新增了13种新类型(type属性)，也对表单进行了大幅增强，包括特别特别棒的placeholder属性。

如果像前面那样没有用label包含控件，那么label的for属性与控件的id属性必须匹配，以便把两者关联起来。这种关联对于屏幕阅读器等辅助技术解读表单非常关键。

控件类型：文本框，复选框，单选按钮等的背后都是input元素，区别在于它们的type属性。

有一个文本控件不是input元素的变体，那就是多行文本区textarea元素。

表单标记策略：因为HTML没有规定专门包含控件及其标注的元素，所以我就用块级section元素来充当这个角色。

设计搜索表单：运用CSS3过渡。通过transition:2s width;声明，字段不会突然扩展到新宽度，而是会用两秒钟时间平滑地延伸到200像素。CSS3过渡可以让CSS属性产生动画效果。
有五个过渡属性。

6.3 弹出层

在页面有限的情况下，弹出层是为了用户提供更多信息的一种有效手段。

HTML5新增了figure和figcaption元素，如果要使用figcaption，必须确保它在figure中是唯一的。而且它要么是第一个子元素，要么是最后一个子元素。

同辈元素后构造一个堆叠上下文，在这个上下文中，它们讷的子元素会上下堆叠起来，这个时候就要用z-index来控制元素的在堆叠上下文中的次序。

不过要注意的是z-index只对那些position值为static之外的元素有效

用CSS创建三角形：这涉及利用盒子三角形对接的边框来创建三角形。代码如下所示：

	div{
		border:12px solid;
		border-color:transparent red transparent transparent;
		height:0px;
		width:0px;
	}

::before和::after这两个伪元素是用于添加文本或图标等少量内容的。不过，完全可以为它们生成的内容设定任何样式。甚至可以用伪元素来达到居中效果。

6.4 小结

第七章 CSS3实战

7.1 规划页面结构

实现规划页面结构非常必要。记住两条：代码结构要符合逻辑，规划组织要考虑层次。

选择HTML元素时，一定要考虑它的语义。然后再有了结构以后，再一步一步为页面的结构化元素添加内容，同时设定样式。

7.2 页眉

弧形角：最简单语法形式如下：border-radius:10px;另外，也可以像这样分别设定水平和垂直半径:border-radius:10px/20px;

盒阴影：box-shadow:4px 4px 5px 8px #aaa inset;

7.3 专题区

从HTML5开始，a元素可以包含任何元素，这当然为把任何元素转换成可以点击的链接提供了方便。

文本阴影：text-shadow:4px 4px 5px #aaa;

7.4 图书区

	transform:rotate(-90deg);
	/* 旋转文字需要使用带厂商前缀的属性 */
	transform-orgin:left bottom;
	/* 设定旋转中心点 */

CSS3为变换规定了两个属性:transform和transform-origin

7.5 页脚

7.6 小结

第八章响应式设计

使用一项叫媒体查询的CSS功能，很容易检测出用户设备的屏幕大小。然后，据以提供替代或额外的CSS，可针对相应屏幕实现更加优化的体验。使用这种方式创建对设备有感知力的网站，被称为响应式设计。

8.1 小设备上的大布局

响应式设计包含三个重要的方面：

媒体查询
流式布局
弹性图片

8.2 媒体查询

媒体查询是CSS代码的容器。媒体查询可以用两种方式来写:@media规则和标签的media属性。

媒体特性：媒体特性也就是媒体某一方面的特征，一般带有min-或max-前缀。

8.3 针对平板优化布局

百分比宽度体现了响应式设计的第二个要素————流动布局

8.4 针对智能手机优化布局

img{max-width:100%;}

这条规则体现了响应式设计的第三个要素：弹性图片

8.5 最后两个问题

一个是有详细文档说明的ios设备上的重绘和缩放的bug;
另一个是让下拉菜单也支持触摸

第五章 布局