css定位指南

前置知识

1. 了解html各个标签
2. 对css各种属性有一些了解
3. 理解盒子模型

正文

对于网页制作的新手来说, 了解了html各种标签的含义, 并不能够制作出像网上那些绚丽的网页.
一个网页的制作过程, 要经过一下几个阶段:

1. 设计
2. 布局分析
3. 编写html, 并用css布局
4. css来进行各个布局区块内部的样式编写
5. js来编写动态效果和其他功能脚本

我们这里研究的是第三部分: 当我们确定了布局, 如何用html和css把布局描述出来

1. html编写

   html是用来表达文档结构的,当看到一个h1标签, 不应该去想这一标签让文字放大加粗, 而应该想这个标签引用的文字, 是一个一级标题, 这才是html的初衷. html中不应该出现描述样式的属性如width, sytle等.

   html不应该去思考样式.

2. 文档流

   怎么定位? 很多人直接就开始讲定位的属性和方法. 其实, 要真正理解定位, 就要先了解文档流.

   什么是文档流? 写出来的html文档的顺序, 就是文档流的顺序. 当不加任何修饰的时候, 页面上显示出来的时候, 和你html代码是很相像. 也就是说, 所写的html文档的各个元素, 是按这个默认顺序排列下来的.

3. 定位
   有了这个基础,再来看定位:定位有两种方式.

   1. float定位

      float有两个值:left, right. 分别表示向左向右浮动. 一旦一个元素采用了float进行定位, 那么这个元素将脱离文档流. 意思是这个元素虽然在页面上还看得到, 但是已经不据占位置了, 后面的元素会补上来.

      那么它会到哪呢? 飘走了… 一个较为明确的说法是: 因为任何一个元素可以成为一个盒子模型, 那么这个元素有个边框, 浮动的框可以根据float的值是left还是right进行向左或向右移动, 直到它的外边缘碰到父元素的边框或另一个同级元素的边框为止.

      float的块级元素将不占一正行, 宽度为内容实际宽度.

      在这个元素后面的文档流部分会顶上来, 取代这个元素的位置. 但是后面那个元素里的内容, 比如说文字, 会围绕在上面那个浮动元素周围. 这个效果不是很好表达,大家可以自己做个试验. 定义两个div, 里面都写上文字, 注意第二个div里的文字要比第一个多(这样才能环绕), 让后给第一个加CSS属性:float:left. 然后就看到效果了.

   2. position定位

    position有四个值:```absolute```, ```relative```, ```fix```, ```static```.

    先说static,这个是默认值,每个元素如果没有定义position属性,就等于是这个值.所以,不解释了,可以说就是没有定位方式.

    关键是其他的三种.选择其中任何一个后,就可以按自己需求布局了.这时候你可以用CSS中的四个属性:```top```, ```right```, ```bottom```, ```left```. 比如```top:100px```, 表示相对于”相对元素”(稍后解释这个相对元素)的顶部有```100px```的距离.其他以此类推.

    相对元素是什么? ```absolute```, ```relative```, ```fix```这三个值决定了这个相对元素:

    1. relative

        元素会相对于自身原来在文档流的位置进行偏移. 这时定义```top:100px```就表示相对它本来应该在的位置向下偏移了```100px```.



    2. absolute

        元素框从文档流完全删除, 并相对于其包含块定位.

        包含块定义:

        这个包含块并不一定是直接父元素, 一个元素可能被包在好几层块之内. 距离最近的,postion属性为absolute relative fixed 三者之一的祖先元素.


    3. fixed

        元素框的表现类似于将 position 设置为 ```absolute```，不过其包含块是视窗本身。

练习与参考

以上是定位的理论, css的学习是一个不断熟练的过程, 写的时候可以参照成熟网站的类似布局, 通过chrome开发者模式来研究别人的页面写法很有裨益.

另外[CSS禅意花园]这本书值得一看, 虽然比较老, 但是里面的一些基础知识, 基本css写法是值得学习的.