CSS定位学习

嘿嘿嘿：

http://zh.learnlayout.com/display.html

1. css中position属性有四种：static（正常文档流）、relative（相对定位）、absoulute(绝对定位)、fixed（固定定位）。

2. 定位机制大体上分三种：流、浮动、层。

3. 三大类：盒子模型，流模型，层模型；

   流模型：标准文档流、浮动流；

   层模型：相对、绝对、固定、正常；

   绝对定位 与 浮动流 会将元素变为inline-block

4. position属性有四个值：relative（相对定位），absolute（绝对定位），fixed（固定定位），默认值为static（正常文档流）；其中fixed与absolute同属于绝对定位机制。

5. <span> 在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被 <span> 划分成好几个区域，从而实现某种特定效果。 <span> 本身没有任何属性。 <div> 在CSS定义中属于一个块级元素 <div> 可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用 <div> 会自动换行，使用 <span> 就会保持同行。

“`
6.
Margin(外边距)属性定义元素周围的空间
margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性

    margin:25px 50px 75px 100px;
    上边距为25px
    右边距为50px
    下边距为75px
    左边距为100px

    margin:25px 50px 75px;
    上边距为25px
    左右边距为50px
    下边距为75px

    margin:25px 50px;
    上下边距为25px
    左右边距为50px

    margin:25px;
    所有的4个边距都是25px

7.
Padding（填充）属性定义元素边框与元素内容之间的空间。
当元素的 Padding（填充）（内边距）被清除时，所”释放”的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

---

pading, margin, border

---

盒子3D模型

8. 设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案…

1. 9.