常见的CSS布局

各种常见的CSS布局

在工作中会经常用到很多的布局方式，这里总结一下所遇到的布局，会持续更新。

悬挂布局

这里写图片描述

实现这种布局的方式有很多，这边主要挑两个，如下：

方式一：使用浮动和块级格式化上下文特性

这种方式好处是左右两部分都会自适应。

<style type="text/css">
*{margin: 0;padding: 0;
}
.title{float: left;
}
.con{overflow: hidden;display: block;
}
</style>
<body><p><span class="title">标题</span><span class="con">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span></p> 
</body>

方式二：利用父元素压缩自身内容区域

这里写图片描述
该方式并不能自适应左边的部分，也就是说左边部分必须要是一个已知的宽度，但是也有好处，好处是少使用一个DOM元素。

<style type="text/css">
*{margin: 0;padding: 0;
}
.title{float: left;
}
.con{overflow: hidden;display: block;
}
</style>
<p class="wrap1"><span class="title1">标题</span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>

原理就是父元素给了一个内边距，将自身的内容压缩，然后让title1**脱离文档流**，给title1一个负外边距定位在父元素的边框处，这样也是一个实现方式。

而对于怎么脱离文档流除了使用浮动，还可以绝对定位。为什么要脱离文档流？这个和行内格式化上下文有关，行内元素是一个接着一个排布的，如果需要左负边距的元素没有脱离文档流，那么父元素的左内边距并不能真正的挤压内容的空间，跟在title1后面的元素还是会跟在title1后面，即使父元素有了左内边距。

总结：其实这个悬挂布局从本质上来说也是一个两列布局。

双飞翼布局和圣杯布局

这里写图片描述

圣杯和双飞翼布局解决的问题是相同的只是实现方式不同，都是左右两列宽度固定的三列布局的解决方案，并且保持中间一列的元素在三列中的最前方，确保浏览器能够尽量早的解析这部分内容。

圣杯布局

圣杯布局很早就被提出，下面参考的文章就是2006年写的，可以说相当古老，实现思路相对于双飞翼要难懂一点。其中有一个知识点是 margin（无论垂直还是水平方向）百分比值是相对于父元素的width来计算的，同时padding（无论垂直还是水平方向）其实也是。

<style type="text/css">
.header{height: 50px;background: #ccc;
}
.container{overflow: hidden;padding: 0 100px; /*父元素上挤出了左右两列的空间*/
}
.center{float: left; /*必须要脱离文档流块元素才能在一样显示，三列都浮动了*/height: 200px;width: 100%;background: #999;
}
.left{float: left;margin-left: -100%; /*是相对于父元素的width的，所以是在父元素的padding-left边界处*/position: relative;right: 100px; /*在边界处还是不够的，还遮住了center，还需要向左移动自身的宽度大小的距离，这里的手段是相对定位*/width: 100px;height: 200px;background: #666;
}
.right{float: left;margin-left: -100px; /*这里应该是在父元素padding-right的边界处*/position: relative; left: 100px; /*同上还是不够，需要向右移动自身的宽度大小的距离*/width: 100px;height: 200px;background: #333;
}
.footer{height: 50px;background: #ccc;
}
</style>
<div class="header"></div>
<div class="container"><div class="center"></div><div class="left"></div><div class="right"></div>
</div>
<div class="footer"></div>

双飞翼布局

双飞翼的来历相信不介绍大家也都有所耳闻。在学习双飞翼布局的时候在网上找了很多的资料，但是也是这些资料给我造成了很大的困惑，在不明白双飞翼是什么的情况下，我看到很多文章中center部分只有一个元素（DOM结构居然和圣杯布局一样）也实现了看上去正确的三列布局，这真的很神奇。（PS：可能我写的也是不知所云，如有谬误感谢指正）

<style type="text/css">
.header{height: 50px;background: #ccc;
}
.container{overflow: hidden;  /*块级格式化上下文，来清除浮动，真正要用的时候需要.clearfix*/
}
.center{float: left;width: 100%; /*浮动之后会失去自己的宽度，所以要显示的设置宽度为100%*/height: 200px;background: #999;
}
.center-content{margin: 0 100px; /*我自身是没有浮动的宽度会充满父元素，同时父元素是100%宽，然后使用水平margin挤出左右两栏的空间，防止自身内容被覆盖*/height: 200px;
}
.left{float: left;margin-left: -100%;width: 100px;height: 200px;background: #666;
}
.right{float: left;margin-left: -100px;width: 100px;height: 200px;background: #333;
}
.footer{height: 50px;background: #ccc;
}
</style>
<div class="header"></div>
<div class="container"><div class="center"><div class="center-content"></div></div><div class="left"></div><div class="right"></div>
</div>
<div class="footer"></div>