《CSS设计指南》章节试读

《CSS设计指南》的笔记-第4页 - 块级标签与行内标签

##块级标签
- <h1>-<h6> 标题
- <p> 段落
- <ol> 有序列表
- <li> 列表项
- <blockquote> 独立引用
##行内标签
* <a> 链接
* <img> 图片
* <em> 斜体
* <strong> 重要
* <abbr> 简写
* <cite> 引证
* <q> 文本内引用

《CSS设计指南》的笔记-CSS3单元格 - CSS3单元格

单元格（table-cell)不需要浮动就可以并排显示，而且直接为它们应用内边距也不会破坏布局。

《CSS设计指南》的笔记-第110页 - 第3章 定位元素

CSS的盒子主要靠内边距、边框、外边距确定。
外边距margin: top, right, bottom, left
如果缺少某一边就使用对边边距，所以为0时一定要显示声明。
border和padding也是一样。
建议默认情况下将margin和padding设置为0，从而获取到相同的效果，然后再根据需要添加。
当然也可以直接用Meyer的CSS Reset文件：http://meyerweb.com/eric/tools/css/reset/
垂直方向外边距叠加：两个对象的的具体取决于垂直外边距较大的那一个。
水平方向就是外边距之和了。这是考虑到段落显示的问题（首段、中段、尾段）。
通常上下边距和字体使用em，从而使字体调整后上下边距可变，而水平使用px。
设定width时，只是设置了对象内容的宽度，除此之外加上padding、border、margin才是所占宽度。
float是为了图文混排，块级元素会平起平坐，想要取消某些元素的这些行为时，使用clear。
非图片元素的float必须设置宽度。
都有float属性的一堆元素在一起，表现出来的和非float的块级元素相似。
强迫父元素包围期浮动子元素的三种方式：
1、为父元素应用overflow:hidden；
2、浮动父元素；
3、为父元素的内容末尾增加非浮动子元素，或者使用clearfix类。
.clearfix:after {
content: ".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
这三种方法的使用要因地制宜。比如，不能在下拉菜单的顶级元素上应用overflow:hidden，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部，而这恰恰是overflow:hidden 所要阻止的。再比如，不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，否则它就不会再居中，而是根据浮动值浮动到左边或右边了。
position：包含relative（相对前一个元素，位置不被回收）和absolute（相对body或具有relative的祖先元素，位置会被回收），相对和绝对定位，通过top、right、bottom和left来定位，通常只使用top和left定位即可。
postion的fixed不会随页面滚动而滚动。
在不声明的情况下，父子div都是共享相同的起点。
某些CSS属性前必须要加VPS即厂商前缀，这是因为标准未定。

《CSS设计指南》的笔记-盒子模型结论 - 盒子模型结论

1.没有（就是没有设置width的）宽度的元素始终会扩展到填满其父元素的宽度为止。
2.为设定了宽度的盒子添加边框，内边距和外边距，会导致盒子扩展得更宽。

《CSS设计指南》的笔记-第212页 - 第6章 界面组件

1、制作导航列表（纵向，横向）。
2、制作下拉菜单。
3、表单制作：
input的各种类型；
要控制legend的样式，可以通过在内加入span元素进行。
4、利用z-index可以控制对象的层叠次序。

《CSS设计指南》的笔记-块级元素和行内元素 - 块级元素和行内元素

说到这，相信你就能理解为什么块级元素始终会占一行了。对了，就是因为它们始终会保持与浏览器窗口同宽。这样一来，一个块级元素旁边也就没有空间容纳另一个块级元素了。
瞎说。块级元素即便设置了宽度，小于浏览器窗口，也是独占一行啊。

《CSS设计指南》的笔记-第154页 - 第4章 字体和文本

字体来源：
1、用户机器上安装的；
2、Typekit和Google上的，使用link；
3、保存在Web服务器上的，使用@font-face（貌似图标字体比较多）。
font-family中最好使用同类型的字体，高度相同，不然替代的时候文本版式会出现变化。
如果你给某个元素设定了相对字体大小，则该元素的字体大小要相对于最近的“被设定过字体大小的”祖先元素来确定。
vertical-align和font-size配合可以作为上标或下标的样式。

《CSS设计指南》的笔记-第285页

footer ul{
display:inline-block;
margin:4px 0 0 ;}改为：
footer ul{
margin:4px 0 0;}
footer li{
display:inline-block;}

《CSS设计指南》的笔记-第241页 - 垂直居中

固定高度的元素内垂直居中一行文本，可以把这一行文本的line－height设定为改元素的高度。
垂直居中其他元素，可以将容器的display属性设定为table-row,在设定（只对单元格有效）vertical-align属性为middle
<代码开始>
display:table-cell;
vertical-align:middle;
text-align:center;
</代码结束>

《CSS设计指南》的笔记-第17页

img 是`inline`元素

《CSS设计指南》的笔记-围住浮动元素的三种方法 - 围住浮动元素的三种方法

1.为父元素添加overflow：hidden
2.同时浮动父元素
3.添加非浮动的清除元素
```
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
```

《CSS设计指南》的笔记-第219页 - 6.2表单

CSS过渡效果：
-webkit-transition:2s width;
input:focus {width:200px;}
参考
http://www.w3.org/TR/css3-transitions/#animatable-properties
http://www.css3.info/preview/css3-transitions

《CSS设计指南》的笔记-第61页 - 常用色相值

+ 红：0
+ 橙：35
+ 黄：60
+ 绿：125
+ 蓝：230
+ 靛：280
+ 紫：305

《CSS设计指南》的笔记-第8章 响应式设计 - 第8章 响应式设计

@media
link的media属性
meta中的media属性
响应式设计最重要的是对各种设备的合理展示，需要更多的测试。

《CSS设计指南》的笔记-第184页 - 第5章 页面布局

三栏-固定宽度布局
为了解决padding、边距和width相互影响的问题：
1、可以使用div嵌套的方式，定义外层宽度，定义内层的padding、border等内容。
2、重设宽度；
3、使用box-sizing: border-box
三栏-中栏流式布局
自适应的时候，max-width和min-width可以避免过小。l
在中栏使用margin-right，在右栏使用负的margin-right可以使中栏自适应缩放。
CSS3也可以使用display: table-cell方式来做。
通过各类定位方式的结合，可以制定某一特定的对象应用CSS央视。

《CSS设计指南》的笔记-第259页 - 第7章 CSS3实战

以首页设计为例，出了使用到之前的内容外，还介绍了：
弧形角的设计；
阴影的设计；
文本旋转。