页面结构：
浏览器会构建一个页面的树状分支结构.
HTML会对内容进行分类，它会告诉浏览器哪些是文本？哪些是图片？但浏览器如何将这些页面转化为实际的页面？（如何安排图片位置等等）
更多网页页面结构的例子可以自行到浏览器查看，元素审查（element-inspector）
HTML：网络标准语言，具有特定的语法和规则，最基本概念为标记（tag），浏览器将标记转换为树状的元素，转换的依据的“文档转换模型”简称DOM.
在元素审查时看到的结构也就是DOM树，每个HTML 标记对应DOM树中的一个元素，浏览器根据DOM元素来显示页面，元素的涵盖范围从起始标记到结束标记，中间的就是内容，可以为空 文本 或其他元素，每个标记都有名称 类型，决定了将要创建的元素的种类，是一个图片还是文本，每个标记还可以有属性和值，用HTML编写的文档定义了页面的结构和内容，要定义样式，就要用到CSS了（字体大小 颜色 背景 位置）
方框无处不在
在网站上，有些内容看起来像三角形或圆形或是更不规则的。
那么图形是如何出现的呢，实际上是一些样式规则制定的。just like this ↓
方框网格和规则（网站上的一切
植入这个概念很重要.
由于网页上的一切都是由方框组成的，考虑切割出将使用的方框。首先是整个页面的最大方框，然后逐片切割网页上的内容，从大到小，小元素放到后面处理。
1.使用 div 标记来定义方框，从标题开始
如何将样式应用到这些方框，他们大小不同，位置也不同，最好的方式是为每个元素指定一个“class”（类）属性，可以将这些属性想象成盒子上的标签.
CSS（层叠样式表）：HTML代码中可以引用多个CSS文件/样式表，所有文件共同确定了最终的外观样式，使用CSS时每个元素都会采用最具体的规则，这就是层叠一词的含义，在规则层级中逐层深入
最终形成了最终规则
在 CSS 中首先编写所谓的选择符，用来指定页面中的元素采用哪种样式
1.选择一个HTML标记，该规则适用于页面中的所有标记，例如如果想要将样式应用于一个页面的所有段落，还有种方法是按类选择元素，以description类的样式为例 .
更改元素的视觉属性，只会影响该元素的显示方式，不会影响该元素的类型， 一定要根据元素的用途， 为页面的特定部分选择正确的元素类型
CSS样式 ： box-sizing；border-box；它会让系统在计算元素大小时将边框和内边距也考虑在内。（不含外边距）
只需设定方框的总宽度，然后不管如何调整边框和内边距的大小，方框的大小始终不变。
这种样式面世不久，确保它在旧浏览器上也能正常显示，需添加所谓的浏览器专属前缀这些前缀包括webkit和ms，只需将其添加到样式定义的前面。
方框大小的单位：
像素和百分比。
设置为像素则固定不变，无论屏幕大小，屏幕缩小时，将会消失不见。
如果设置为百分比，则方框的大小会根据屏幕的大小或者方框内包含的内容而变
还可设置方框最大宽度，在需要时将会变小，但反之不会超过所设最大宽度，
放置方框：
即使定义了 div 的宽度，每行仍会只显示一个 div 看起来就像占据了整个页面宽度一样。
你需要对方框进行定位，CSS中有许多定位元素的工具
弹性方框布局
允许你高效的在容器或 div 中布局 对齐元素 在各元素中间分配空白
将父级容器的显示属性值改为 flex 父级 div类“app”，让子级元素尝试彼此对齐，
添加图片:
要使用图片，你需要将其储存到页面能够访问的位置
编码、调试、优化
更多关于开发者工具的信息：
开发者工具还能帮你完成代码测试改进的日常工作，你能够即时进行测试 观察其对页面的影响 无需更改 HTML和CSS文件
与设计原型比较：
设置外边距大小，页眉背景颜色
验证HTML/CSS：
负空间
溢出
特定媒体
持续改进
仍然要在CSS中做相应修改，才可实际使用这个字体 浏览器会下载这个字体，并将其应用到页面的所有文本
编码 测试 优化
文件的缩小版本放到网站上以便更快的下载 重新编辑时 使用未缩小版本
所有行都必须放置一个容器内或一个流体容器内 这样可以获取该页面的正确对齐方式和内边距
使用这些行来创建水平列祖 彼此紧邻的列
容器必须位于一列中 一列必须位于一行中
75 imag-responce类
76 对齐与大小写问题
82 交互式初探
贰
响应式设计 Skinny Tree