浅谈HTML+CSS布局，做一个上的了厅堂下得了厨房的网页

如何利用html和css写好一个页面？怎么去布局排版？什么是文档流？对于新手来说利用html和css布局好一个页面至关重要，因为这是我们写好一个交互的基础。

为什么写这篇文章？

1. 一直以来，很多同学，尤其是入门不久的同学都会认为html和css是前端课程中最简单的语言了，以至于没有给于它们足够多的关照，在之后项目开发中，常常由于布局的问题，没有给js留足够多的发挥空间，而导致逻辑层无法入手，回过头又去更改布局，使开发效率不能有效的提高。

2. 浏览器的兼容问题一直是一个让大多数前端同学头冷的问题，其实，当我们做的足够多的时候，我们会发现，这些大多数的兼容问题的产生其实都是由于我们在布局的时候不够严谨所导致的，你要说IE清除浮动和标准浏览器的清除浮动不是一种方式，这可以理解，我们使用兼容的语法去写就可以，并且代码量不大，但是，我们常常因为布局而导致不同浏览器上的展示不同，而去采用大量的相对定位等强搬硬套的方式处理，这显然不是一个正确的处理方式

在正文开始之前，我们先简单了解一下什么是文档流

什么是文档流？

1. 当看到文档流这三个字的时候，相信很多同学都会楞一下吧，那么到底是什么是文档流呢，我们不妨就拿流这个字来掰扯掰扯，流我们就理解为水流，假如有一个水桶，本身里面没有水，打开水龙头之后，水会一下就充满这个桶呢还是会慢慢的变满？答案肯定是慢慢的，一点一点的直到水桶中的水满为止，那么文档流也是如此，本身你的页面是一个空白的窗户纸，就和水桶一样，你呢，就是相当于水龙头，把水装到它里面，而这些水也就是我们平常使用到的各种各样的元素，比如div、img等，一点一点充满我们整个屏幕，这时候配合css等等，一个页面也就形成了，而元素按照一定的规则在页面里排列的过程就是文档流

2. 正常流情况下，水桶中的水自下而上的满，而我们的页面是自上而下，自左往右的排列，如果也自下而上，那真的就反人类了，排一个页面还得反着排，我们都知道块级元素独占一行，行内元素根据上下文会和其他行内元素并列一行排列，浮动脱离文档流也只是脱离它父元素的，定位脱离文档流的范围也是根据父元素或其他因素来决定的，这个不在这里过多解释

啰嗦了这么多，我们来正式聊一聊布局的问题

我们都知道布局简单，又没有那么简单，因为我们为了让那些冰冷的砖头（元素）能够按照我们的蓝图（UI设计图）变成一栋漂亮的大别墅（网页），我们除了合理的搭建，还需要配合css！

1.看下图，第一眼看到这个页面的时候，我们应该如何去设计布局呢？

图片 1.png

实在不知道从何下手？那么我们先简单划分一下

图片 1.png

其实我们写布局也就是盒子套盒子，和盖房子其实是一个道理，需要承重墙，组成客厅、卧室的主结构，我们不能把所有东西不经区分放在一个盒子中，就像你的客厅和卧室需要一栋墙来划分一样，然后客厅有客厅的风格，卧室有卧室的韵味，都是在两个大结构下，然后细分，这样你才能知道哪些是客厅的东西，哪些是卧室的东西，各司其职！

我们来分析一下上面的结构：

1. 红色框线的盒子
   a) 这个为最大的盒子，也就是相当于你院子的围墙一样，用来装你的房子，花园等，证明是你独有的，或这个大模块独有的主体结构，就像我们写js，习惯把一个模块定义为一个类一样
2. 左边蓝色框的盒子和右边绿色线的盒子
   a) 我们为什么要这么分呢？我们能够清楚的看到左边是一整块贯穿而下，因此我们认为它是一个整体，并且它和右边的盒子有一个明显的间距，但是为什么以第一条间隔来分而不是第二个间隔来分呢 ，我们可以看到下面三张图是一样的样式，明显是一个整体，因此我们不能把他们分开，我们分盒子，也是分类的过程，布局其实先是从宏观的角度整体去看
   b) 这样我们左边一个大盒子，用来承载左边的内容，右边一个用来承载右边的内容，一个浮动即可搞定，也就是让两个盒子变为一行，有很多种方式，这里不赘述
3. 右边盒子中的灰色盒子和黄色盒子
   a) 我们在前面提到最下面三张图片明显可以看出来是一种样式结构，我们则认为他是一个整体，所以我们需要把它放在一个盒子中，而不是分开，就比如我们不能让客厅的一部分延伸到卧室一样
   b) 因此，下面是一个整体，下面承载图片的整体和上面的块之间有一个明显的间距，因此我们就分为上下两块
4. 总结，从宏观角度看设计图，先划分好模块，写出承载子类的大模块，在往这些模块中填写东西，这样我们的页面就不会乱，很有条理，并且便于维护

接下来，来个复杂的

图片 1.png

1. 红色部分我们已经讨论过了，就是用来划分大区域，先划分主要区域

2. 我们对每个大区域下的小区域又进行了细分，那么为什么还要套这么多盒子呢？
   我们来举个栗子：
   军队中有司、军、师、旅、团、营、连、排、班...等等，我们清楚，是为了便于管理，一旦有问题，可以快速定位，也可以明确分工，那么我们布局也是一样的，都是为了方便管理和维护，每一个模块都有一个盒子来存放，一旦需要改，我们只需要改一块就可以，而不会影响到其他的部分

3. 那么到底怎么划分呢？
   a) 布局位置间距等具有统一性，用盒子包裹
   b) 内容（元素）样式具有相似性，我们就划分为一类
   c) 内容（元素）超过一个以上，我们用大盒子包裹

建议：

1. 细分模块方便管理，能够快速定位问题以及修改，而尽可能小的影响其他元素
2. 通过修改父级盒子就可影响子元素位置间距等，而无需调整子元素
3. 定位少，引起的浏览器展示问题少
4. 尽量把行变为列，减少浮动，盒子塌陷问题少，浮动必须解决父元素高度塌陷问题等，解决高度塌陷问题的方法至少有四五种以上，这里不赘述
5. 盒子嵌套尽量使用多的标签元素，不要一味使用div或者单独一个元素，合理嵌套，比如段落用<p>标签，加上h5新增的语义化标签<nav>、<header>等，增加代码的可读性、可维护性
6. 开发完成后多浏览器预览，比如mac下的chrome、firefox、safari等等，windows下的 chrome、firefox、IE等等，然后进行适当微调，因为每个浏览器对dom树和css规则树的解析有所区别，但是当我们布局严谨的时候，发生问题可能性则可以尽量减少，最不济也只是有的模块由于宽度不够而掉下去，我们只需要调整几个像素的间距就可以完成所有浏览器展示统一了

以上就是我对布局的一些理解，文字很多，感谢阅度，如有不合理的地方，请一定一定赐教！