自适应布局小结

来源：互联网发布：linux java 短信猫编辑：程序博客网时间：2024/06/05 07:16

1、浮动布局（PC用的多）
浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。
left，宽度固定,高度可固定也可由内容撑开
right，宽度固定，高度可固定也可由内容撑开
center，可以自适应浏览器宽度，高度可固定也可由内容撑开。
HTML & CSS：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>宽度自适应布局</title>        <style>            .wrap {                background-color: #FBD570;                margin-left: 100px;                margin-right: 150px;            }            .clearfix:after {                content: "";                clear: both;                display: block;            }            .left {                float: left;                width: 100px;                background: #00f;                height: 180px;                margin-left: calc(-100% - 100px);             }            .right {                float: right;                width: 150px;                background: #0f0;                height: 200px;                margin-right: -150px;            }            .center {                background: #B373DA;                height: 150px;                float: left;                width: 100%;            }        </style>    </head>    <body>        <div class="wrap clearfix">            <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>            <div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>            <div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>        </div>    </body></html>

思路：
1)既然HTML里面要让center放前面，为了让left跑到center前面，那center也必须浮动了，否则因为都是块元素他们会分两行。
2)浮动之后还要让center宽度自适应，那明显width只能100%，然后在父元素中设width:auto，还有两侧margin，其实也就是父对象宽度自适应，center只是继承content的宽度。
3)对left使用负的margin让他们浮动到上方去。
代码里面我用到了一个calc()，本例里如果不使用calc函数，那么就需要wrap左边距为0，left左边距-100%，然后center多加一层子块DIV设置margin-left：100px，可以达到同样的效果！calc函数与百分比配合就足以实现自适应的要求！目前所有的自适应布局都在利用浏览器来为我们计算尺寸，但是有了calc之后我们就可以自己制定规则！
总结：使用浮动来进行布局，一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动，难以把握。在元素较多而且元素高度尺寸不一的情况下，单纯使用浮动只能实现上端对齐，这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容，将元素做成等高排列，从美观上看也当然也是极好的，比参差不齐的排列要美观。
2.普通流布局
普通流布局：display : inline-block！这是一个传说中取代float布局的存在。看了一些网站，PC端浮动为主，移动端的也用的不多啊，已经有些使用flex的了，说好的inline-block一统江湖呢？
使用inline-block之前先处理点小障碍：inline-block元素会有4px左右的空隙，这个是因为我们写代码时候的换行符所致。
4px间隙
解决办法很简单：在inline-block的父元素中设置样式font-size：0；letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px; 恢复正常的显示。
消除4px间隙
另外还有一点需要注意的是inline-block默认是基线对齐的，而inline-block的基线又跟文本基线一致，所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。这里补充一下基线的内容，没你想的那么简单哦。分有文字和无文字两种情况：
1）无文字：容器的margin-bottom下边缘。与容器内部的元素没一毛钱关系。
2）有文字：最后一行文字的下边缘，跟文字块（p,h等）的margin、padding没关系！注意是最后一行，无论文字在什么子对象容器内在什么位置都没关系，浏览器会找到最后一行文字对齐底部。
你们感受一下：
警示：inline-block的基线是最后一行文字的底部，flex里面的基线是第一行文字的底部

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>宽度自适应布局</title>        <style>            .wrap {                background-color: #FBD570;                font-size: 0;                letter-spacing: -4px;  /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/                margin-right: 150px;            }            .wrap * {                font-size: 1rem;                letter-spacing: normal;            }            .left {                display: inline-block;                vertical-align: top;                width: 100px;                background: #00f;                height: 180px;                margin-left: -100%;            }            .right {                display: inline-block;                vertical-align: top;                   width: 150px;                background: #0f0;                height: 200px;                margin-right: -150px;            }            .center {                display: inline-block;                vertical-align: top;                background: #B373DA;                height: 150px;                min-width: 150px;                width: 100%;                box-sizing: border-box;                padding-left: 100px;                background-origin: content-box;                background-clip: content-box;            }        </style>    </head>    <body>        <div class="wrap">            <div class="center">                center，可以自适应浏览器宽度，高度固定。            </div>            <div class="right">right，宽度高度固定</div>            <div class="left">left，宽度高度固定</div>        </div>    </body></html>

总结：相比浮动inline-block更加容易理解，也更符合我们的认知，结合盒子模型的几个控制属性就可以进行布局了。对于元素高度不同的情况，目前浮动布局的做法都是将元素做成等高元素进行展现，这从美学上看也符合整齐的要求，不过牺牲了一部分内容。但inline-block有vertical-align属性，可以很好地解决元素高度不同而带来的布局问题。
3.绝对定位
使用绝对定位（特指absolute）做自适应布局跟前面两种方式没太大差别，宽度自适应还是在auto和100%上做文章，而位置则由top/bottom/left/right等控制。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>宽度自适应布局</title>        <style>            .wrap {                position: relative;                background-color: #FBD570;                margin-left: 100px;                margin-right: 150px;                height: 250px;            }            .left {                position: absolute;                top: 0;                left: -100px;                width: 100px;                background: #00f;                height: 180px;            }            .right {                position: absolute;                top: 0;                right: 0;                   width: 150px;                background: #0f0;                height: 200px;                margin-right: -150px;            }            .center {                position: absolute;                top: 0;                left: 0;                background: #B373DA;                height: 150px;                min-width: 150px;                width: 100%;            }        </style>    </head>    <body>        <div class="wrap">            <div class="center">                center，可以自适应浏览器宽度，高度固定。            </div>            <div class="left">left，宽度高度固定</div>            <div class="right">right，宽度高度固定</div>        </div>    </body></html>

总结：单纯使用绝对定位进行自适应布局的情况很少，一般绝对定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低，因为它会频繁触发浏览器的重排。另外提一点：CSS3的transform会对绝对定位产生影响
4.弹性盒子
CSS3中对布局影响最大的莫过于弹性盒子模块了，这是一套区别于以往盒子模型布局的全新方案。上面几种方法你可以看到，为了实现自适应我们用的都是width：auto和100%的嵌套以及各种边距的移动定位，这套规则并不符合我们的认知。为什么不能开拓出一块区域，横竖排列都可以，内部所有元素的尺寸可以按照一个规则和这个区域的大小联系起来？终于CSS3做出了改变，引入了flex弹性布局方案，弹性盒布局有如下优势：
1.独立的高度控制与对齐。
2.独立的元素顺序。
3.指定元素之间的关系。
4.灵活的尺寸与对齐方式。
详见上一篇分享

阅读全文

0 0