浮动布局+中间优先加载

最新推荐文章于 2022-02-19 08:29:24 发布

黑芝麻饺子

最新推荐文章于 2022-02-19 08:29:24 发布

阅读量294

点赞数

分类专栏：布局文章标签： css

本文链接：https://blog.csdn.net/weixin_41108537/article/details/106230540

版权

布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

流程

1. 思路
2. 常见事例

1. 思路

优先加载:html是从上往下加载,所以越前面的内容越先加载
浮动:浮动不能超过前一个非浮动元素,所以中间优先加载的容器必须浮动,否则左侧只能在坐下侧,而不是顶对齐的左边,右边也是同理
高度坍塌:浮动之后,浮动元素将不被父元素纳入渲染逻辑,所以可以用伪元素和clear:both;或者低版本兼容的table.clear来处理
元素上移:因为是优先加在的中间元素,所以在浮动布局完成之后,呈现的应该是品,这时候,就需要用到外边距或者定位,移动元素的位置
浮动注意点:浮动不知是容器的表现在浮动,容器的内部也是如此,外边距与(边框+内边距+内容)的标准盒子模型靠浮动方向的叠加

2. 常见事例

圣杯布局
双飞翼布局

2.1 圣杯布局

2.1.1 思路

所有的子元素都左浮动
中间元素100%(必须,浮动之后,元素就失了默认值,变成0*0或者内容撑起,所以100%宽度让布局稳定,高度让内容撑起)
父元素用左右内边距限制中心元素的宽度 100% - 左内边距(左元素的宽度) - 右内边距(右元素的宽度)
左右两元素现在还处在第二行,需要使用margin使元素上移到第一行
左元素m-l:-100%;这时候就是在父元素content的第一行紧贴左边,因为父元素左内边距的关系,左元素距离视图边际还差自身的宽度,所以使用relative和right,移动到视图左边
右元素m-r:>=元素定宽;!!! 这一步是很困惑的渲染效果,到定宽值之后,不管数值多大,元素都不能再向左移动进入父元素内容区域

margin-left: -200px;position: relative;left: 200px;//很容易理解
margin-right: -200px;//容易把自己绕进去
这两个是一样的

2.1.2 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .bk {
            height: 50px;
            background: #ccc;
        }

        .container::after {
            clear: both;
            display: block;
            content: '';
        }

        .container {
            padding: 0 200px 0 150px;
        }

        .left,
        .center,
        .right {
            float: left;
        }

        .left {
            width: 150px;
            background: red;
            margin-left: -100%;
            position: relative;
            right: 150px;   
        }

        .right {
            width: 200px;
            background: rebeccapurple;
            margin-right: -200px;
        }

        .center {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 圣杯布局 -->
    <header class="bk">

    </header>
    <section class="container">
        <div class="center">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat, eum?
        </div>
        <div class="left">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis alias dolorem inventore quam id enim,
            distinctio voluptatem eius ullam rerum!
        </div>
        <div class="right">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis minus in reprehenderit dicta
            dignissimos iusto quaerat culpa? Aut id, quia amet expedita rerum debitis voluptatum molestiae deleniti
            provident magni nemo. Nulla assumenda exercitationem voluptatum.
        </div>
    </section>

    <footer class="bk">

    </footer>
</body>

</html>

2.1.3 总结

在左定宽 + 右定宽到左定宽*2+右定宽的视图宽度下,布局会坍塌,所以最好设置最小视图宽度为左定宽*2+右定宽
嵌套结构简单,书写时需要熟悉css的float浮动带来的影响

2.2 双飞翼

2.2.1 思路

不去修饰父元素,保证子元素都是浮动元素,用中间元素容器的内边距来控制中间元素的宽度
中容器右元素左元素左浮动
设置中间容器的左右内边距和宽度100%和ie盒子模型,这里中间元素不是浮动元素,所以可以不用100%
左m-l:100%;右m-l:自身宽度;

2.2.2 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .bk {
            height: 50px;
            background: #ccc;
        }

        .center-container,
        .left,
        .right {
            float: left;
        }

        .center-container {
            padding-left: 150px;
            padding-right: 200px;
            width: 100%;
            box-sizing: border-box;
        }

        .left {
            width: 150px;
            background-color: rosybrown;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            background-color: salmon;
            margin-left: -200px;
        }

        .clear::after,
        .clear::before {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <header class="bk"></header>
    <section class="clear">
        <div class="center-container">
            <div class="center">Lorem </div>
        </div>
        <div class="left">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, minima asperiores
            tempore commodi excepturi magnam!</div>
        <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis cumque ad excepturi nam
            accusantium atque, unde minima earum, aspernatur sint placeat et blanditiis nesciunt officiis est, maxime
            voluptate? Expedita eligendi, tempore quidem corporis impedit adipisci dolorum vel molestiae iusto
            temporibus, voluptatem, dolores optio officia veniam.</div>
    </section>
    <footer class="bk"></footer>
</body>

</html>

2.2.3 总结

宽度不能小于左+右,中间会被右侧覆盖,左侧会向右移动
稍微的层次嵌套,不需要掌握float,只需了解就可以轻松的布局
思路不饶,书写简单,兼容的屏幕更小

黑芝麻饺子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动布局+中间优先加载

流程1. 思路2. 常见事例2.1 圣杯布局2.1.1 思路2.1.2 代码2.1.3 总结2.2 双飞翼2.2.1 思路2.2.2 代码2.2.3 总结1. 思路优先加载:html是从上往下加载,所以越前面的内容越先加载浮动:浮动不能超过前一个非浮动元素,所以中间优先加载的容器必须浮动,否则左侧只能在坐下侧,而不是顶对齐的左边,右边也是同理高度坍塌:浮动之后,浮动元素将不被父元素纳入渲染逻辑,所以可以用伪元素和clear:both;或者低版本兼容的table.clear来处理元素上移:因为是
复制链接

扫一扫

专栏目录