今天这篇文章我想和大家谈一谈通过CSS对页面进行布局中关于定位的内容。布局涉及的内容是很多的，其中大方向很多，细节也很多，为此我们甚至需要使用一整个技术即CSS去完成，作为我的读书笔记我自然是不准备一次就写完，毕竟我自己也只是稍有了解吧。
这里我就把其基础部定位提出来讲一下
在我们考虑实现一个页面时，首先需要考虑的是我们那个模块该放在哪里，这就是定位了。如果CSS中未做操作，则会按照HTML结构直接定位。在CSS中元素定位的方法主要为三个，分别是position，float和flex。其中flex布局我已经在前面的文章中写过了，在这篇文章中我想谈一谈另外两个。
1，position 定位
在CSS中我们可以为元素设置position属性，其取值为一下5个：
- absolute //绝对定位
- relative //相对定位
- fixed //相对于浏览器定位
- static //默认值，无定位，即元素出现在正常的流中
- inherit //继承 ，即继承父类元素的position属性
接下来我就谈一谈这5个值吧。
1）absolute 绝对定位
以父类元素为基准，即父类元素的左上角为坐标原点（0,0）位置来放置，脱离正常流。
2）relative 相对定位
以自己为基准，即以自己的左上角为坐标原点（0,0）位置来放置，不脱离正常流。
3）fixed 相对于浏览器
以浏览器为基准，即以浏览器串口的左上角为坐标原点（0,0）位置来放置，脱离正常流。
4）statuc 和 inherit
这两个就比较直接了，就是上面注释中所写的内容了，这里我就不多提了。
而position属性只是决定了定位的方式，具体的定位还需要配合上另外几个特定的定位属性：
- left //相较于基准左边界的偏离位置。
- top //相较于基准上边界的偏离位置。
- right //相较于基准右边界的偏离位置。
- bottom //相较于基准下边界的偏离位置。
最后再说三个细节，第一，所有的定位方式都是去定位元素的左上角那个点，就是定了你那个角，别的内容就照常显示的；第二，上面说的left、top等定位属性，一般选择left和top的组合，right和bottom的组合也可以但少有使用；第三这里的left看清楚了，是距离左边边界的距离，不是向左移动的距离。
2，float 浮动定位
在CSS这我们还提供了float属性，通过浮动的方式进行定位。这时候就摇先理解什么是浮动呢？就我个人理解就是把元素具体化，两个浮动元素就像两个具体的盒子，就不能交叉，摆放是自然的分开放置，从而实现布局。float属性类似于上面提到的position属性一样，是个单独的CSS属性，有一下四个值：
- left //元素向左浮动
- right //元素向右浮动
- none //元素不浮动
- inherit //继承，继承父类元素的float属性
其实float中没什么特别可说的，意思也十分的直接，直接写两个就都明白了。这里有个细节说一下浮动布局的元素也是脱离在正常流之外的，这也会导致一些问题，但今天就不多说，在以后的文章中我会一起谈一下。
网友评论