HTML & CSS

文档流(FLOW)

在设计页面时，一般先用块级元素构建基本布局，再用内联元素完善各模块内容。尽量使用与内容含义最接近的元素。

块级元素(block)：块级元素在文档流中以行的方式存在，就好像前后有换行符，如div、p之类的元素。此类元素通常用来构建模块。
内联元素(inline)：内联元素在文档流中总是出现在行内，多个放在一起的内联元素会存在同一个块中，如span可以嵌套在p元素中。此类元素通常用来标记模块中的部分内容。

盒模型(BOX MODEL)

CSS将每个元素当做一个盒子表示。利用CSS可以对盒子的所有方面进行控制。盒子由内容区和可选的内边距、边框、外边距组成。

内容区(content)：每个元素都有一个内容区，如图像和元素。盒子的大小正好能包含所有的元素，内容区与盒子边缘之间没有空间。
内边距(padding)：盒子在内容区周围可以有一层内边距，内边距大小是可以设置，是透明的，没有颜色和样式。在默认情况下，有的元素有内边距，有的元素没有。
边框(border)：元素周围可以有一个边框，这个边框会包围内边距。边框可以设置不同的样式、颜色、宽度。提供了从视觉上分离内容的一种手段。
外边距(margin)：外边距包含着边框，同样是可选的。如果两个盒子紧挨着，那么外边距就相当于它们之间的距离。

内边距和外边距不能指定样式，只能进行大小设置，但对元素设置背景颜色或背景图片会延伸到内边距部分。边框除了颜色和宽度还有8种样式。此外，还能对边框设置圆角的半径。对于并排放置的两个内联元素，两个元素之间的距离是两个外边距之和。而对于上下放置的两个块元素，两个外边距会折叠在一起，最后形成的外边距是较大的那个外边距。另外，对于两个嵌套的元素外边距也会进行折叠。

浮动(FLOAT) && 清除浮动(CLEAR)

Float属性设置一个元素向左或者向右进行浮动。浮动元素必须设置宽度。浮动的元素会从正常流中删除。浮动元素下面的内联元素会尽可能的绕着它进行流动，块级元素则按照删除该浮动元素之后继续摆放。可以理解为：内联元素直到浮动元素的存在，所以会绕着浮动元素流动，不让浮动元素覆盖自己；而块级元素会忽略浮动元素的存在，则按照浮动元素不存在的方式继续放置。
Clear熟悉用来清除浮动。对于设置了clear属性的元素，浏览器在摆放该元素时会查看元素对应位置是否有浮动元素，如果有则将此元素下移直到没有浮动元素覆盖它为止。可以理解为：设置了clear元素后的块级元素不能忽略浮动元素，需要防止浮动元素覆盖自己。

元素定位(Element Position)

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

Positio可以有以前几种值：

absolute: 生成绝对定位元素，相对于除static以外的第一个父元素进行定位
fixed: 生成绝对定位元素，相对于浏览器进行定位
relative: 生成相对定位元素，相对于其正常位置进行定位
static: 默认值，没有定位，元素在正常的文档流中
inherit: 从父元素继承position值

绝对定位(Absolute Positioning)

要将一个元素进行绝对定位需要设置position熟悉为absolute。一个元素绝对定位时，浏览器要将其从文档流中删除，然后将这个元素按照指定的位置放置。对其他元素不产生任何影响。此外元素有一个z-index属性，此属性指定元素叠放位置，值越大的叠放在上面。

固定定位(Fixed Positioning)

固定定位的元素是相对浏览器进行位置设定，不管页面滚动与否都会停留在指定位置。

相对定位(Relative Positioning)

相对定位的元素相对相对它原来在文档流中的位置进行定位。

静态定位(Static Positioning)

位置设置为static的元素，它始终会处于页面流给予的位置，static元素会忽略任何top、bottom、left或right声明。

语义(Semantic)

HTML的元素、属性和属性值都定义了某种含义，我们不能以它们本身合理的语义之外的方式来使用它们。语义合理的页面具有逻辑性结构、容易维护，并且对数据挖掘服务更加友好。