CSS最为常见的两种分布栏布局方法

前言

在使用CSS进行页面布局时，不同的需求需要用到不同的技术。尤其是互联网这一块，产品好不好，实不实用除了看技术团队以及产品本身的架构之外，还要看界面，好的界面效果是具有说服力的，因为当它被批评时也是一针见血的。那么问题来了我们在开发过程中，怎样设计出具有说服力的界面呢？好的界面一定不仅限于配色，文字，图案等，还有一个比较重要的点，它就是我们接下来要说的——布局。

示例网页布局图

分布栏布局中的两种主要的方法

绝对定位（position）

• 基本属性

/* 基本属性值及使用方法*/
position: absolute; //局部绝对定位。根据其上级是relative的元素进行布局，可给元素指定 "left", "top", "right" 和 "bottom" 的值，以此来固定该元素在父级元素中的精确位置
position: fixed;//全局绝对定位，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
position: relative;//相对定位，相对于其正常位置进行定位。
position: static;//默认值。不会定位，元素出现在正常的流中（将会忽略 top, bottom, left, right 或者 z-index 声明）。
position: inherit;//规定应该从父元素继承 position 属性的值。

• 作用如下
  元素使用position或positioning后会不再占据一开始的位置，也就是说该元素会在原基础上重新定位（到你预想的地方）。

• 优点
  精确并不留痕迹的控制元素的位置到自己预想的地方。

浮动

• 基本属性（position）

float: left;//向左浮动
float: right;//向右浮动
float: none;//不需要浮动
float: inherit;//继承父级元素的float的效果

• 作用
  为元素分配空间。

• 优点
  元素仍然保留文档流之中，适当地使用float能够让我们充分地利用页面空间。

• 缺点
  不同地浏览器对float有着不同地支持程度。

总结

世界不是非黑即白的，还有一种颜色——灰色。说这句话不是为了补充大道理，界面布局中我们不会只单一地选择某一个元素进行使用，像position和float，它们既可以单一使用，也可以同时使用，具体需要看自身的需求而定。为什么要使用布局？无非就是为了使界面更加实用，更加引人注目，发挥它本身需要具有的功能。

需要详细学习基本知识的同学可以参考网站:https://www.w3school.com.cn/cssref/pr_class_float.asp
想要深入了解的同学可以参考网站：https://www.w3.org/TR/CSS/#css

喜欢我的话你也可以关注我的公众号:周小年

(本文适合初学者，如果您是大佬级别人物，欢迎指教！)