css布局的基本思想,网页布局(一)-基本布局思想

网页布局涉及到内容包含CSS,JavaScript,HTML

最基本的原理类似于"原子论",即掌握两栏、三栏横向布局，我们就掌握了N栏横向布局。掌握了两栏、三栏纵向布局，我们就掌握了N栏纵向布局。灵活对一些盒子进行拆分，我们可以得到一个公正的布局。

从table布局到div布局，再到grid布局。我们基本上能给出大多数网站的布局，例如事业单位的网站，一些论坛的网站等。这类的网站有一个特点，就是公正的布局，但在不同设备(显示分辨率不同)上的显示也一致。

进而我们引入了相应式布局，即在不同设备(显示分辨率不同)上显示也不一致，例如星巴克的官网，Vue的官网等。

其次还有瀑布式布局，其原理即N栏横向布局，等宽不等高。也可以以把瀑布式布局看做是基本布局的延伸，即在N栏横向时，让若干个盒子的高度不一致。

那么，综上所述，网页布局可以分为两大类。

第一类是基本局部，即利用最基本的纵横两栏布局来进行灵活组合，对原子盒子的高度进行调整，从而引出了瀑布流布局。

第二类是相应式布局，即利用CSS的媒体相应查询，不同分辨率的屏幕写不同的CSS语言。

那么对网页布局的学习，应该从最基本的原子盒子开始，即掌握纵横两栏、三栏布局。在此基础上去在任一的原子盒子上进行子盒子的增加。

查了一下网上的资料，给出了两栏、三栏布局的一些基本方法：

两栏布局-自身浮动法、margin负值法、

三栏布局-绝对定位法、margin负值法、自身浮动法

之后我会根据实际的编程，来总结每一种方法的核心思路，以及之间的联系关系，进而我会引出grid布局，结合bootstrap来对grid布局进行说明。

两栏布局的自身浮动法:

效果-右侧定宽，左侧自适应

实现-右边盒子float:right;

两栏布局的margin负值法:

效果-右侧定宽，左侧自适应

实现-外部盒子左浮动，右侧盒子定宽，margin左正右负

三栏布局的绝对定位法:

效果left块和mid块有一定的间隙

三栏布局的margin负值法:

待续...