自适应布局

第一种方式



    
        
        宽度自适应布局
        
    
    
        
"wrap clearfix">
"left">left,宽度固定,高度可固定也可以由内容撑开。
"right">right,宽度固定,高度可固定也可以由内容撑开。
"center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。

自适应布局_第1张图片

第二种方法



    
        
        宽度自适应布局
        
    
    
        
"wrap clearfix">
"center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。
"left">left,宽度固定,高度可固定也可以由内容撑开
"right">right,宽度固定,高度可固定也可以由内容撑开

自适应布局_第2张图片

1)既然HTML里面要让center放前面,为了让left跑到center前面,那center也必须浮动了,否则因为都是块元素他们会分两行。

2)浮动之后还要让center宽度自适应,那明显width只能100%,然后在父元素中设width:auto,还有两侧margin,其实也就是父对象宽度自适应,center只是继承content的宽度。

3)对left使用负的margin让他们浮动到上方去

代码里面我用到了一个calc(),这个CSS3带来的计算函数简直酷毙了!本例里如果不使用calc函数,那么就需要wrap左边距为0,left左边距-100%,然后center多加一层子块DIV设置margin-left:100px,可以达到同样的效果!calc函数与百分比配合就足以实现自适应的要求!目前所有的自适应布局都在利用浏览器来为我们计算尺寸,但是有了calc之后我们就可以自己制定规则!

总结:使用浮动来进行布局,一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动,难以把握。在元素较多而且元素高度尺寸不一的情况下,单纯使用浮动只能实现上端对齐,这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容,将元素做成等高排列,从美观上看也当然也是极好的,比参差不齐的排列要美观。

第三种方法 inline-block进行圣杯布局



    
        
        宽度自适应布局
        
    
    
        
"wrap">
"left">left,宽度高度固定
"center">center,可以自适应浏览器宽度,高度固定。
"right">right,宽度高度固定

自适应布局_第3张图片

这里也没什么好说的,用到的也是width:auto和width:100%这两点,简单知识点的简单用法。
双飞的话,代码跟圣杯的基本相同,注意在html的顺序变为center>right>left,只改左栏移动的margin-left: calc(-100% - 100px)到预定位置即可。不能用calc的话可以在center里面再加一层,跟浮动一样的处理方式。更简单的方法是使用CSS3带给我们的box-sizing属性

第四种:使用绝对定位(特指absolute)做自适应布局跟前面两种方式没太大差别,宽度自适应还是在auto和100%上做文章,而位置则由top/bottom/left/right等控制。还是以圣杯布局来举例:



    
        
        宽度自适应布局
        
    
    
        
"wrap">
"center"> center,可以自适应浏览器宽度,高度固定。
"left">left,宽度高度固定
"right">right,宽度高度固定

自适应布局_第4张图片

父元素为relative,子元素为absolute,这样的话,又会出现跟浮动一样的问题:父对象高度坍塌,子元素不能撑起父对象。原因也跟浮动一样,解决办法的话目前我知道的只有给父对象指定一个确定height值。
总结:单纯使用绝对定位进行自适应布局的情况很少,一般绝对定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低,因为它会频繁触发浏览器的重排。另外提一点:CSS3的transform会对绝对定位产生影响哦~比如说让fixed定位不再固定在浏览器视窗的黑魔法

你可能感兴趣的:(自适应布局)