布局中的css要素_html/css_WEB-ITnose

为何寻找布局的圣杯

优良的布局可以使网页的组织更合理，适应力更加健壮，最重要的是实现内容层与表现层的分离，实现前端开发的渐进增强以及代码的内容优先。这就是前端程序员追寻圣杯布局的原因。

1 relative & absolute

相对定位和绝对定位本质上讲已经脱离了文档的正常流，只是相对定位依旧保留原先存在于文档流的空间，也就意味着依旧会影响着文档流的布局，而绝对定位删除了在文档流的空间，脱离文档流并覆盖在其上，顽固如狗皮膏药。正常文档流中的元素改变z轴坐标也无济于事。绝对定位总的来讲，共有4个特性，一是删除了原先在文档流中的位置，二是覆盖在正常文档流之上，三是定位的基点（即(0,0)）默认是包含块，当其父元素的定位也不是默认值时，基点则在父元素，否则继续往上查，一直查到初始包含块body为止，而若是没有给left，top赋值，则默认为原先在文档流中的值，四是定义以后元素默认为块级框。相对定位的话，就简单多了，是相对于原先位置的偏移。一下是绝对定位在布局中的实现，它有其缺点，当边栏的高度未知时，为覆盖footer。

我们还可以通过绝对定位，使页面的主要内容放在body的最前面，进一步实现内容至上的布局。

2 float & clear

设置浮动的元素，会进入浮动流，它们也已脱离了原先的文档流。浮动是相对于父元素的，在其后的元素会进入它们原先的位置空间，从而很大可能被浮动的元素遮盖而不可见。而我们很多时候并不想让div顶上浮动的div们原先的为止，因此就有了清除浮动clear。

css1和css2中并没有这个属性，那时我们是用margin处理的，而css2.1出现了clear,它的作用就是腾出一个清除空间，若是左边有div浮动则在上部多出一个清楚空间，以达到之前margin-top想要的效果。

3 margin : -100%

负边距可以改变文档流和浮动流中的布局，使排在后面的元素可以排在前，由此可以让html的结构可以更加合理化。它使主要内容div可以排在最前面。而左右边栏可以放在后面。如下

这是负边距布局的简单示例，负边距布局在思路上让人们看见了内容层与表现层解耦的曙光。但是在IE老版本浏览器中兼容真的不好，试了一下display:inline以后也会有诸如闪烁或是在视窗宽度在某一值时extra排到下面的情况，不知道是不是电脑浏览器问题。

4 min-width & max-width

这是两个非常好用的属性，min-width使百分比布局不会崩溃，比如width:100%。而max-width可以使页面的宽度不会因为无限扩大而变得杂乱。兼容性是个问题，IE浏览器7+才兼容。它们的值除了继承，有数值和百分比两种形式。

min-width示例：第一种布局将三个div都放进一个div#main中，父元素没有简单的width:100%，就会出现

这在很多网站中是无法忍受的，而给父元素定了min-width以后

5.双飞翼布局

双飞翼布局是在综合负边距，浮动，定位之后产生的一种兼容性强，变化快捷（三栏位置的变换），满足内容优先原则的优秀布局

参考文章： http://www.cnblogs.com/mofish/archive/2011/01/18/1938543.html

参考网站： W3C

学生党一枚，有什么错误欢迎指正。语言不调皮纯粹是因为这原本是给自己看的一份总结，也懒得修改了。大家将就着看吧。