CSS基础——margin负值实际运用

qq_28695495

已于 2022-10-23 22:53:07 修改

阅读量284

点赞数

文章标签： css 前端 css3

于 2022-10-23 22:36:23 首次发布

本文链接：https://blog.csdn.net/qq_28695495/article/details/127482542

版权

关键要点：

元素的margin-left/margin-top为负值，元素会向左或者向上移动。

元素的margin-right/margin-bottom为负值，元素右边或者下边的元素会向左或者向上移动，同时对于左边或者上边的元素来说，此元素的宽度或者高度缩小了。

实际运用：实现圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fl {
            float: left;
        }
        .clearfix::after {
            display: table;
            content: ' ';
            clear: both;
        }
        .wrap {
            padding-left: 200px;
            padding-right: 300px;
        }
        .middle {
            background-color: red;
            width: 100%;
        }
        .left {
            width: 200px;
            margin-left: -200px;
            background-color: yellow;
            position: relative;
            left: -100%;
        }
        .right {
            width: 300px;
            background-color: blue;
            margin-right: -300px;
        }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div class="middle fl">header</div>
        <div class="left fl">left</div>
        <div class="right fl">right</div>
    </div>
</body>
</html>

知识点提炼：

1、使用float与清楚浮动。

2、使用margin负值。

3、子元素宽度设置100%，相当于父元素内容宽度的100%。

4、使用position:relative。

一段话总结：

布局上一个容器包裹三个元素，依次是中左右，假设容器的padding-left设置200px，padding-right设置300px。则左边的子元素的宽度与右边子元素的宽度要与padding-left和padding-right一致。

中间的元素宽度设置为100%，意味着父容器内容的宽度。左边的元素使用margin-left:-200px，width设置200px，然后position:relative：left：-100%。右边的元素使用margin-right:-300px，宽度设置300px。