“#”的作用

• 用于页内导航链接

• UI伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。

• 结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中第一个：first-child或最后一个:last-child），为响应元素应用CSS样式.

伪元素

文档中若有实无的元素，以“::”区分伪类。

盒模型

每一个元素都会在页面上生成一个盒子。因此，HTML 页面实际上就是由一堆盒子组成的。

• 没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父 元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量 等于水平边框、内边距和外边距的和。

• 为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展 得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占 据的水平宽度。

定位position

CSS 布局的核心是 position 属性，有 4 个值:static、relative、absolute、 fixed，默认值为 static。在静态定位的情况下，每个元素在处在常规文档流中。

static

在静态定位的情况下，每个元素在处在常规文档流中。它们都是块级元素，所以就会在页面中自上而下地堆叠起来。没有应用样式的HTML布局，就是默认的 static 文档流。 要想突破 static 定位提供的这种按顺序布局元素的方式，必须把盒子的 position 属性改为其他三个值。

relative

相对的是它原来在文档流中的位置(或者默认位置) 接下来，可以使用 top、right、 bottom 和 left 属性来改变它的位置了(往往只用top 和 left 就可以实现 我们想要的效果)
要注意，相对定位的元素自己相对于原始位置挪动了一下之外，这个元素原来占据的空间没有动，其他元素也不会动。

absolute

绝对定位下，元素从文档流中被“连根拔起”，然后再相对于其他元素（指相应祖先元素的 position 设定为非 static 的）定位 。

fixed

从完全移出文档流的角度说，固定定位与绝对定位类似。 但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏 幕），因此它不会随页面滚动而移动。
常见应用：网页中的小广告、不随页面滚动而移动的导航元素等。

display:none与visibility:hidden

把元素的 display 设定为 none， 该元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被“回收”，就好像相关的标记根本不存在一样。与此相对的是 visibility 属性，这个属性常用的两个相对的值是 visible（默认值）和 hidden。把元素的 visibility 设定为 hidden，元素会隐藏，但它占据的页面空间仍然“虚位以待”。