HTML 与 CSS 常用的属性

变量名风格

在 CSS 文件中，样式属性名是 font-size 类似的，组合词组时，单词之间使用中划线连接。
其它时候使用的变量名，我们建议的风格是 lower_word_again 这种类型。这在本课程的第一部分内容已经阐述过原因。
如果有自己的偏好，或者遵从某个编码规范，也无妨，按照自己的偏好对应即可。

HTML

HTML 是页面的骨架。

Block & Inline

一般来说，HTML 构建的 DOM 元素分为两种类型，block(块级) 与 inline(行内)，block 可以简单理解为一个容器的存在，在其前后都会自动换行。一般我们会将 DIV 作为常用的 DOM 元素，它是 block 类型的；而像 SPAN 则是 inline 类型，比如多个 SPAN 连在一起，其前后是不产生换行的。
但事无绝对，block 还是 inline，只是不同 DOM 元素的默认属性而已，我们可以设定其样式属性 display: block 或 display: inline 进行改变。

DOM 元素的常用属性

<div id="my_dom" class="my_class_1" style="color:red"> Hello World.</div>
<div id="my_dom_2" class="my_class_1 my_class_2" style="color:red"> Hello World Again.</div>

一个 HTML 的 DOM 元素经常会用到的属性:
1，id: ID 应该是当前页面内唯一的。
2，class: 一个 DOM 可以有多个 class (空格隔开)，它对应的是 CSS 上的规则名。
3，style: 其实就是 CSS 的样式规则。样式一般不直接写在 HTML 中，而是单独写到 CSS 文件中，这样容易管理，代码也会整洁很多；但临时对应、或者局部微调，也可以直接写到 HTML 源码中，它的样式优先级一般是最高的。

其它属性，常用或者不常用，以后自己慢慢接触下去，自然会明白的。

构建 HTML 骨架

回顾一下，我们在最开始的时候介绍过 HTML 源码的基本结构，我们用 Jade 语法重写一遍，这样看起来更加简洁一些:

html
    head
    body
            div.here_is_real_body

body 内的源码，才是真正核心的内容呈现，由各种 DOM 元素按需嵌套起来。

DIV 是最常用的 DOM 元素。
有时候一个 DIV 包裹另一个 DIV，共同作为一个局部的结构，以方便完成视觉上的布局。

<div class="wrap">
    <div class="content">
        <p> hello world. </p>
    </div>
<div>

H1~H6，是 1~6 级的标题。

P 表示段落，一般是有大段文字时使用，当然这里用 DIV 也没有问题。而 SPAN 更像算是(同一行内)一些文字的拼接，其本身不产生换行与段落。

IMG 是图片元素，但有些时候，我们呈现图片元素的时候，并不用 IMG，而是用 DIV，给它一个 backgroud-image 的样式属性。相信在未来实践的过程中，使用 background 的样式来呈现图片的场景，你会遇到不少次，多见几次面，就熟悉了。

我们利用各种类型的 DOM 元素，进行组合、嵌套，来实现页面的基本结构，在没有任何 CSS 样式之前，骨架应该看起来是清晰的，并且赋予 DOM 合适的 class、id，接下来再写具体 CSS 样式的时候，就会便利很多。

CSS 常用属性

本段只做简单介绍，不特别展开，有更多疑问，多使用搜索引擎就可以了。

font-size: 文字大小
color: 文字颜色
font-family: 文字字体，可由多个组成，, 分割
line-height: 行高
letter-spacing: 字间距
background: 背景(可以是背景色、背景图)，具体的写法参考往上的文档
display: inline/block/hidden

CSS 与 布局

padding 与 margin (要自己动手画画了)

一般情况，一个 DOM 元素在实现自动布局时，基本且主要的属性是 margin & padding 了。 margin 和 padding 都是由 上、右、下、左 四个维度组成的，所以会有 padding: 10px 20px 10px 20px 这样空格分开四个数值的语法。

拿出笔，在纸上画一个长方形 A，然后长方形外面再画一个长方形 B 完全包住 A，那么 B 与 A 边框间的距离就是 padding 了。此时，A+B 是一个 DOM 元素。
这里有意思的是会引入一个 盒子模型的概念，就是画的 A、B 两个长方形(组合在一起)代表了(同)一个 DOM 元素，这个 DOM 元素的 content-size(真实内容尺寸) 算 A 的尺寸还是 B 的尺寸呢？

我们再在 B 这个长方形上描边，这就是 border(边框)了，border 可以是很粗的，也可以只有 1px(1 像素)的尺寸。这个时候，border 的尺寸算不算当前 DOM (A) 的 content-size 呢？

然后，我们继续在 B 的外围再画一个长方形虚线框，就叫它 C，它能完全包裹住 B。这个时候，B 与 C 之间的边距，就叫 margin 了。此时可以肯定的是，C 肯定不会影响到当前 DOM 的 content-size，border 也不会绘制到 C 的边缘上；padding 则会干扰到 content-size 以及 border，这也就是 margin 和 padding 的区别了。

对了，不要思维定势，B 包住 A，C 包住 B 的时候，不需左右完全对称，可以不对称。
还有，margin 的值也能是负数，比如 margin: 0 -20px 或 margin-bottom: -30px，可以用来缩减上下段(block)之间排版的空隙。
当一个元素的 display 是 inline 时，相当于当前元素是没有换行的，此时，它垂直方向的 margin 不生效，这也符合(自然)逻辑。

至于盒子模型，简单来说，就是 CSS 的属性 box-sizing 这个属性是取 content-box (A 代表的 content-size) 还是 border-box (B 代表的 content-size)，具体的自己再了解，也可以就此听闻便罢了，不是大的问题。
但如果立志成为前端开发者的，请务必进一步了解，这是基础知识。

position 属性

如果在某个局部进行绝对的布局 (也就是手工设定 top、left 这类属性)，一般来说，将这个局部的 DOM，其 position: relative，然后内部的子元素采用 position:absolute的方式进行布局。

在采用绝对布局的时候，z-index (整数)这个属性就会起到作用，比如两个 DOM 的位置刚好堆叠在一起，肯定有一个上面，一个下面，这时候，z-index 值 (可以是负数) 越高的，就堆叠在越上面。
绝对布局时候，一般我们会声明 top & left 两个属性，top 相当于 Y 轴的坐标(垂直方向)，left 相当于 X 轴的坐标(水平方向)。当然，如果右对齐的，要用 right + top 或者 right + bottom，具体视情况而定。

auto 值

有一个值 auto，在特定场合下，也是蛮有用的。
比如我们一般会限定页面的最大宽度，然后，在这个宽度内，左右两边均匀的产生边距。
比如下图:

一般的 CSS 规则如下所示，先确定一个最大的宽度， 然后 margin: 0 auto，也就是 margin: 0 auto 0 auto 的意思，意思为: 顶部不margin, 右边自动margin，底部不margin，左侧自动margin。

body{
    max-width: 960px;
    margin: 0 auto;
}

题外话，我们在前面讲到过 padding、marging 的写法，它们完整的 4 个值，实际上是从顶部开始顺时针给定的值；我忘记因为是什么技术栈留下的痕迹，对这个坐标系总是弄混掉。如何克服？有时直接在 Debug 里，重新看下 margin 的逻辑；还有就是记住 margin:0 auto 的效果，然后反推这个坐标系，也就不用另外特别记忆了。不比少年，东西多了，记不住，如非必要真懒得去记这些枯燥的事情了。

reset 逻辑

DOM 元素都是有自己默认样式属性的， 默认值并不总是我们期望的，这里有会产生一个 重置 (reset) 的逻辑，比如对 body 的 padding、margin 进行一次重置：

body {
    padding: 0;
    margin: 0;
}

还有比如超级链接默认是有下划线的，大多数情况下是需要重写这个样式规则，一定程度上也算 reset，这部分 reset 算是 CSS 全局性的，所以一般也会放在 CSS 文件的头部，类似:

body { /*具体样式规则*/}
div { /*具体样式规则*/ }
a { /*链接相关的具体样式规则*/ }

对了，超级链接的下划线如何去掉？
搜索引擎，搜 html a 下划线，或者 html 超级链接 下划线……
这些知识，不需要特别说明，大量的基础知识，存在于互联网之中。