Udacity前端开发工程师（入门）12 - CSS框架和响应式布局

1. 简介

本章主要讲开发自己的作品集网页，其间，遵循响应式设计原则来开发作品集可以使得作品集在各种设备上面都能得到最好呈现。

2. 基于网格的设计

目光移动轨迹 - 从上到下，从左到右.png

基于目光移动轨迹的特性，在设计网页时也可，即先看标题，再看图片，后看文章标题，最后细节文字。这种设计就是 基于网格（grid-based layout）的设计。

3. 构建一个框架

CSS可以控制元素的宽度，因此网格结构当从 CSS 当中实现。你可以通过各种方式修改CSS从而达到控制布局，但创建可控制布局的 CSS 类被认为是目前最好的做法。这些 CSS 类集被成为框架（framework）。

4. 响应式网页

5. 定义布局

6. 练习：框架

当前许多的网页设计会将屏幕分割为

9. 负空间

凌乱且过于拥挤的文字信息并不利于读者接收；而适当的空白可以改善这个体验。在设计中有一个概念叫负空间（negative space），也就是不包含任何内容的空间。这样的空白区域有助于突出文字，使其更易于阅读，页面更井井有条。

在Inspect Element种：
element.style {
    padding: 10px;
}
内边距（padding）是在元素之间创建负空间的绝佳手段，也可以利用margin去创建负空间。

10. 溢出

如果要在很小的区域内放置大量文本，溢出（overflow）功能就可以派上用场。溢出机制确保用户可以利用滚动浏览所有文本。

.css_class_name {
    overflow: auto;
}

11. 媒体查询（Media Query）

媒体查询随着设备屏幕大小改变CSS。
@media only screen and (max-width: 300px) {}

12. CSS重设 (Resetting)

一些网站在不同的浏览器上看上去和操作起来是不同的。为了确保CSS样式在所有的浏览器上得到相同的诠释