总结随笔

---

网页布局

- 单列布局

- 双列布局

- 三列布局

- 混合布局

单列布局

其中单列布局最为简单，一般应用于搜索引擎主页。 单列布局在于设置块状元素居中，只需设置margin:0 auto;(前面的0是上下外面局，可任意设置)。

双列布局

两列布局在于设置中间主体并排分布，在左边的块设置float:left，在右边的块设置float:right即可，当然要使两者的width之和等于某一设定值。

三列布局

在两列布局的基础上再将中间块进行二次分割，方法一致

混合布局

由于中间主体设置了float，最后的footer需要通过清除浮动来正确显示在主体下方，clear:both。

---

元素定位

Value (position属性)Description

static默认值。没有定位，元素出现在正常的流中。

absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

relative生成相对定位的元素，相对于其正常位置进行定位。

fixed生成绝对定位的元素，相对于浏览器窗口进行定位。

inherit规定应该从父元素继承 position 属性的值。

sticky基于用户的滚动位置来定位。

relative

相对于自身的定位，可以通过调节top，bottom，left right给定一定的数值完成不同方向的移动定位。再给元素添加定位之后，该元素层级会提高。

absolute

给一个元素设定absolute属性后，该元素会相对于祖元素中第一个定位元素定位（不包括static）

fixed

fixed是一种特殊的absolute，fixed总是以body为定位对象的，按照浏览器的窗口进行定位。一般网页中的小广告都是通过fixed定位实现的。

sticky

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。一般网页的导航栏会使用这样的定位。

---

选择器

id选择器（#加id名）

class选择器（.加class名）

style选择器（内敛属性，直接在相对应的元素添加style设置属性）

标签选择器（使用标签名选择）

后代选择器（通过一级一级向下选择，通过空格键或者>号连接）

群组选择器（具有相同属性的不同类或者不同元素是，可以在选择器之间以英文格式的逗号隔开选择）

优先级

内敛 > ID > class > 标签选择器