web布局方式小结

对于前端布局的方式，总结了一下，我自己常用的有这么几个：

1.最常用的就是float:left

float:left直接这样用的话，外层的div是没有高度的，这样要自己设置高度，不然下面的内容会插到它的下面，就像下面的效果一下，绿色块插到红色块下面去了。

但是添加高度的方式实现不是很好，不一定每次布局都是写死高度的，这时我们只要用一下css的clear:both和display:table就可以很好的解决这个问题了。我们直接看代码和效果更直观些。

float是最常见的用来布局页面方式，一般的需求都可以通过它来解决。但是有时也有特殊的情况，那么就可以选择下面的方式来解决。

2.采用display:inline-block来进行布局。

关于display:inline-block我们首先要知道display:block可以设置宽高度，但是会占满整行，而display:inline不能设置宽高度，但是不会占满整行，可以依次排列。那么我们可以从字面看出display:inline-block在block和inline之间，可以设置宽高度，又不会占满整行，所以我们就可以利用它的特性来进行布局。看代码：

【注】但是要注意的一点是display:inline-block布局块与块之间会有间距存在。

3.利用table的display:table-cell来进行布局。

关于table布局可以用来解决很多自适应和居中的问题，是一种很不错的布局方式，而且兼容性也很好。但是table布局在宽高度的设置上会很麻烦。
这里我们只说一下table布局来解决块与块之间高度自动等高。打个比方，我左边是一个颜色块，右边是一个文字块。两边等高，但是我们右边的文字数量是不一定的，且浏览器大小变化时，文字的块的高度也会产生变化，这时左边的块高度也要跟着变化，如果左边使用height:100%，但是它的父级是没有设置高度，所以是不起作用的，这时table布局就可以很好的解决问题。我们看代码：

display-cell我推荐可以看一下这个博客这里

4.在手机端或是PC端高本版的浏览器，可以使用flex布局。

关于flex布局是有点类似于table布局，都是很不错的自适应的布局的选择的方式，但是关于flex的兼容性上会有些限制，但是手机端web用flex是一个挺不错的选择。它和table布局都有一个很繁琐的问题，这也是源于它的自适应，在它里面的子元素可以自适应的布局，但是不管有多少子元素，他都是占据一行，不会换行。这让在进行数据绑定的时候很是麻烦，不能像float布局那样，写一个for循环就搞定了。

我们直接看布局的代码：

.web_ui_box {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.web_ui_box.center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.web_ui_item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

关于center就是是否垂直居中显示，它还有left，right，但是平时默认left，我们布局一般这样三个样式代码就足够解决大部分问题了。