论述css布局之定位特点

一、css的三大布局有哪些

示例：可简单分为这三个：标准流，浮动，定位

二、解读

1.标准流

简单的说标准流就是所写的内容按自身的特性进行排列的一种布局，这种布局一般是起草稿的，后面需要搭配其他的布局方式一起使用。

2.浮动

简单的说浮动就是可以改变一些元素自身的特性，并可以随意改变他的排列方向，这种布局虽然好用但是他不适合对单个元素操作。

3.定位

定位，与浮动很类似，但是定位更偏向于对单个元素进行操作，特别是某些元素需要在一个位置固定的时候就不得不用定位去解决了。定位又可细分为四大定位：

• 静态定位
  静态定位，当元素本身没有给任何定位属性时就是自带了这个静态定位的，当添加其他定位属性后这个静态定位就会被覆盖掉。静态定位虽然不具有其他定位属性的位偏移但是它也是元素自身的一个特性（注意：静态定位即使给了位偏移依旧是无效的）
  
• 相对定位
  相对定位，字面意思，相对的一个定位属性，他的相对对象就是元素自身，或者就是相对于静态定位时的一个位置变化，当给具体的值时位偏移都会生效，但是，当给百分比时位偏移就只有左右能生效，而上下就没有了，这是因为相对定位的元素父级（如果是body）默认宽度是占据百分百的，高度却是由子元素顶起来的（自己本身并没有高度），这就会导致元素进行上下位偏移时会失效。试想一下：本来在一个瘪的盒子内是没有空间的，突然来了个正方体的物品，瘪的盒子被强行撑开了，但此时瘪的盒子虽然被撑开了但是左右还是有空间可以移动的只是上下不能动了
  
• 绝对定位
  绝对定位，绝对定位是依据相对定位给的一个定位，也就是说相对定位在哪绝对定位就会跟着去哪，小技巧：子绝父相 这是对两个元素要做定位处理时安排的位置方式，即当子元素要做绝对定位时一定要给最近的父级元素加上一个相对定位
  
• 固定定位
  固定定位，当需要将某个元素固定在某一个位置且不占据实际位置时就可以给一个固定定位让它定在那个位置表面。固定定位是一个单独的定位属性与之前的相对定位和绝对定位都没有关系。