布局中的css要素

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

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.双飞翼布局
     双飞翼布局是在综合负边距,浮动,定位之后产生的一种兼容性强,变化快捷(三栏位置的变换),满足内容优先原则的优秀布局
参考网站:W3C
学生党一枚,有什么错误欢迎指正。语言不调皮纯粹是因为这原本是给自己看的一份总结,也懒得修改了。大家将就着看吧。

布局中的css要素,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。