学习笔记之自适应布局

最新推荐文章于 2024-06-24 04:51:54 发布

glt__18

最新推荐文章于 2024-06-24 04:51:54 发布

阅读量280

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/glt__18/article/details/51541477

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习笔记之自适应布局

这个只是我学习过程中从各处找资料整理的笔记，如果有不对的或者不准确的说法还希望各路大神能帮我指正，在此谢过！

尺寸
1. 百分比 (相对于父对象)
2. auto(块级水平方向的auto，块级元素的margin border padding content宽度之和等于父元素width)
3. 包裹性(元素被设定为浮动，width变成内容的宽度，此时width：auto不管用)

浮动

* 元素脱离文档流
* 使用width/height，margin/padding将元素定位

example圣杯布局

  1. left:宽度固定，高度可固定也可由内容撑开
  2. right：宽度固定，高度可固定也可由内容撑开 
  3. center：可以自适应浏览器宽度，高度可固定也可由内容撑开

DOM

<div class="con">
    <div class="center">centeer</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

样式

<style>
    body{padding:0;margin:0}
    .con{
        padding-left:150px;
        padding-right:190px;
    }
    .left{
        background: #E79F6D;
        width:150px;
        float:left;
        margin-left:-100%;
        position: relative;
        left:-150px;
    }
    .center{
        background: #D6D6D6;
        width:100%;
        float:left;
    }
    .right{
        background: #77BBDD;
        width:190px;
        float:left;
        margin-left:-190px;
        position:relative;
        right:-190px;
    }
</style>

左右侧栏定宽并浮动，中部内容区放最前不浮动width：100%并设置父对象内边距,让左右侧边栏浮动到上面，再将其相对定位出去

注意
子元素设置为浮动之后，父对象的高度会坍塌，需要设置父对象后的元素清除浮动，这样父对象的高度才能被浮动子元素撑起来。
撑起方法：

1. 让父对象也脱离文档流，浮动(但是这样就不能实现宽度自适应)
2. 将浮动元素的边框边界拉下来，就是在后面的元素里加clear语句（clear与BFC）

example双飞翼布局

DOM

<div class="con">
    <div class="center">
        <div class="inner">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

css样式

<style>
    body{padding:0;margin:0}
    .left{
        background: #E79F6D;
        width:150px;
        float:left;
        margin-left:-100%;
    }
    .center{
        background: #D6D6D6;
        width:100%;
        float:left;
    }
    .right{
        background: #77BBDD;
        width:190px;
        float:left;
        margin-left:-190px;
    }
    .inner{
        margin-left:150px;
        margin-right:190px;
    }
</style>

其中：

1. html中要让center放前面，然而left要跑到center的前面，所以center必须浮动否则由于他们都是块元素会分两行
2. 浮动之后要让center宽度自适应，则width：100%，在父对象中设width：auto；也就是说，让父对象宽度自适应，center只是继承con的宽度
3. 对left、right使用负的margin让它们浮动到上面

总结

使用浮动进行布局时清除浮动可以用伪类after来清除；
在元素较多而且元素高度尺寸不一的情况下，单纯使用浮动只能实现上端对齐，对于适应多种设备的布局不太好用。

普通流布局

display:inline-block;

ps : inline-block元素会有4px左右的空隙，这是因为写代码时的换行符所致

解决办法：
1. 在inline-block的父元素设置样式font-size：0；letter-spacing：-4px；
2. 设置inline-block的所有兄弟元素 font-size：值；letter-spacing：值px；
3. 恢复正常的显示
inline-block默认是基线对齐的，而inline-block基线又跟文本基线一致，所以在内容不同的时候不能水平对齐。只需要用vertical-align显示声明一下top/bottom/middle对齐即可。

基线：
1. 无文字：容器的margin-bottom下边缘，与容器内部的元素无关；
2. 有文字：最后一行文字的下边缘，和文字块(即p/h等)的margin、padding无关
问题：

为什么内联元素的层叠顺序要比浮动元素和块状元素要高？

答：浮动元素和块状元素都用作布局，但是内联元素都是内容，而网页中内容的层叠顺序一定要高，这样重要的文字图片什么的才能优先出现在屏幕上。

总结

相比浮动inline-block更加容易理解，对于元素高度不同的情况，目前浮动布局的做法都是将元素做成等高元素进行展现；但是inline-block有vertical-align属性，可以解决元素高度不同而带来的布局问题。