网页的布局其实在我理解起来，就类似于排版的问题。有点像平面设计中的内容排版。只不过平面设计中的排版是在photoshop里做的，而网页的排版却要通过写代码来实现。排版的意思，把这块东西放在网页的哪个地方，和别的东西怎么协调起来排版。布局要搞明白的意思大概就是这个。
布局会涉及到的几个CSS属性大致有这么一些。display，主要是用来设置元素的显示方式，position主要是用来给元素定位的，你可以用这个属性任意给元素定位到网页的任何一个地方。float也是用来定位的，只不过它的定位方式跟position有点不同，他只有两个方向，就是让元素左浮动或者又浮动。flex是很新鲜的一种流式布局方法，可以用它来做一些不是很复杂的响应式布局。下面我们来详细介绍下这几个属性。
01.display：设置元素的显示方式
它的值有很多，看下面我收集到的表格。
（1）display的值有哪些？
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素。 |
| inline | 默认，此元素会被显示为内联元素。 |
| inline-block | 行内块元素 |
| list-item | 此元素会作为列表显示 |
| table | 此元素会作为块级表格来显示（类似<table>） |
| inline-table | 此元素会作为内联表格来显示(类似<table>) |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似<tbody>） |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似<thead>） |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似<tfoot>） |
| table-row | 此元素会作为一个表格行显示（类似<tr>） |
| table-column-group | 此元素会会作为一个或多个列的分组来显示（类似<colgroup>） |
| table-column | 此元素会作为一个单元格列显示（类似<col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似<td>和<th>） |
| table-caption | 此元素会作为一个表格标题显示（类似<caption>） |
其中display最主要的三个值我下面再简单介绍下，其他的值不是很常用，不过我上面列出来的display的值只是其中的大部分，还算比较常用，如果有能力都要尝试下，当然除了我下面重点介绍的三个最常用的值之外，其他的值浏览器支持的不是很好。
（2）display最常用的三个值介绍
| display | 默认宽度 | 可设置宽高 | 起始位置 | 代表元素有哪些 |
|---|---|---|---|---|
| block | 父元素宽度 | 是 | 换行 | div\p\h1~h6\ol\ul\dl\table\address\blockquot\form |
| inline | 内容宽度 | 否 | 同行 | a\span\br\i\em\strong\label\q\var\cite\code |
| inline-block | 内容宽度 | 是 | 同行 | input\textarea\select\button |
-
block:默认宽度为父元素的宽度，可设置宽高，换行显示。
-
inline：默认宽度为内容宽度，也就是说，如果给这个元素设置了display:inline；元素的宽度就会变成它里面内容的宽度。不可以设置宽高，与别的前后元素之间同行显示。如果遇到宽度不够一行要换行的话，inline的元素是会内容拆开来换行的，相对来说，inline-block的元素反而是个整体，不拆开来换行，是整块换行的。
-
inline-block：默认宽度为内容宽度，可设置宽高，同行显示。如何遇到内容不够一行，是会整块作为一个整体，整块换行。inline-block和block的区别是inline-block对内是block属性，对外显示是inline属性，所以block的话，居中可以用margin:auto，但是inline-block用margin:auto就没用了，不能做到居中，inline-block和block的时候margin:auto的浏览器计算方法是不一样的。
display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，那么在IE6、IE7下，怎么实现块级元素的inline-block属性值设置呢？
E6、IE7支持对html行内元素设置inline-block。实际上只是看起来支持而已，IE6、IE7并不识别inline-block这个属性值，只是触发了layout，让行内元素有了inline-block的表征，比如说：行内显示且可设置宽高等等。
而对html块级元素设置inline-block，也只是触发了layout，对块级元素设置行内块级属性的目的没有达到。那么在IE6、IE7下，怎么实现块级元素的inline-block属性值设置呢？
常见有2种方法：
1.先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为行内对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失），代码如下：
div {display:inline-block;}
div {display:inline;}
2.直接让块元素设置为行内对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等），代码如下：
div { display:inline-block; _zoom:1;_display:inline;}/*推荐IE6*/
div { display:inline-block; *zoom:1;*display:inline;}/*推荐IE6或IE7*/
（3）display:none与visibility:hidden的区别
给元素设置了display:none以后，元素就消失了，在元素下面的元素会取代那个消失的元素的位置，而visibility：hidden设置的元素，是显示隐藏，但是在文档流中，它原先的位置还在，只是那个位置是空白的，在该元素下面的元素不会窜上来取代它的位置。
02.position:设置定位方式
设置定位方式最重要的是设置参照物。且要配合别的属性一起使用，有这些属性：top、right、bottom、left、z-index。
left等方向值代表的意思
position定位工作原理是先通过设定position：absolute/relative/fixed来确定要定位的参照物。然后通过left\right\top\bottom来设置元素与参照物之间的距离可以从图中看出，left\right\top\bottom表示元素边缘与参照物之间的距离。
然后再来讲讲position：absolute/relative/fixed的意思。relative相对定位，absolute绝对定位，fixed固定定位。三个定位各有自己的特色。
相对定位relative
如果给中间的那个橘黄小块设置了相对定位，它的位置是不会有变化的。仍然在文档流中。而且它的参照物是元素自己本身。所以一旦给这个元素再追加设置方向值topleft，意思就是相对于元素本身这个参照物原来的位置，左边距偏移了20px，上边距偏移了10px。
这个相对定位的属性，由于是以元素本身作为参照物的，而且如果单纯只是给元素设置相对定位的话，元素本身的位置是不发生变化的，因此，它常常用来作为下面要讲的绝对定位元素的参照物来设置。
绝对定位absolute
如果给图片中位于中间的那个深橘色的小块设置了绝对定位。那么按照绝对定位的特点，这个小块会脱离文档流，这样一来，位于下面的浅色橘黄小块就会窜上来，取代原先那个深色橘黄小块的位置。而且由于设置了绝对定位的关系，深色橘黄小块的宽度会缩小，变成内容宽度。
如果再给这个深色橘黄小块追加方向值top\left，绝对定位的小块的参照物如果不设置的话就是html的根元素，如果设置了的话，一般要看它祖先元素是不是设置了相对定位的，设置了的话，就按照那个相对定位的元素为参照物进行位置的偏移。
fixed固定定位
如果给位于中间的深橘色小块设置了position:fixed;那么这个小块会根据固定定位的特色，宽度会收缩成内容宽度，并且脱离文档流，而位于它下方的浅橘色小块会窜上来取代它的位置。而固定定位的参照物是浏览器视窗，所以一旦给这个深橘色小块追加方向值left\bottom，那么它位置的偏移就会按照浏览器的视窗作为参照物。偏移的结果就看上图的样子了。position:fixed 在ie6及以下不支持
03.float
float浮动
如果给这个深橘色的小块添加float:right;那么这个小块的宽度会收缩成内容宽度，并且脱离文档流，设置了右浮动，就会向右边一直移动，直到碰到边界。左浮动就向左边。
另外，值得注意的是，float对于元素来说是脱离文档流的，但是对于元素的内容来说是占据文档流的。这句话怎么理解呢，看下面的图：
float半脱离文档流
其实对于上图中的那个浅橘色的小块来说，它的大小是包括了那个深橘色的小块的，只不过它左边的地方被深橘色小块覆盖掉了，所以对于浅橘色小块这个元素来说，深橘色这个float元素是脱离文档流的。但是奇怪的是浅橘色小块的内容，确实如图中这样显示的，说明，对内容来说，float元素还是在文档流占据位置的。
关于清除浮动的方法有两个，一个是在浮动元素后面加一个空白的元素，给这个空白的元素添加样式{clear:both;}就好了。比如在浮动元素后面加一个
<br class="cb"/>
.cb{clear:both;height:0;overflow:hidden;visibility:hidden;}
另一种办法就是clearfix。给浮动元素的父元素添加一个clearfix的类。
.clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}
另外关于为什么要加zoom:1的原因，zoom的作用可以看看这篇文章《CSS中zoom:1的作用 ，小标签大作用》
04.flex
从缺，有空补~~
网友评论