【CSS】盒子模型以及负边距的使用

最新推荐文章于 2024-09-09 11:03:57 发布

小绵杨Yancy

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量1.3k

点赞数

分类专栏：我好像不会CSS 文章标签： css 盒模型 margin

本文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/124073087

版权

我好像不会CSS 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

一、盒子模型

在“css盒子模型”理论中，页面中所有元素都可以看成一个个盒子，并且占据这一定的页面空间。
一个页面由许多的盒子组成，这些盒子之间也会互相影响，因此我们需要从两方面深入了解盒子模型：

每个盒子的内部结构
多个盒子之间的影响关系

1、盒子内部结构

可以看到，由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。
tips:

border: 0px;和border: none;是有区别的。border: 0px;会被渲染，所以占内存，而boder:none;不会被渲染。
当margin的值为百分比时，是相对于当前元素的父元素。

2、盒子之间的相互影响

主要涉及到BFC的知识：CSS学习 — 一篇文章搞懂块级格式化上下文（BFC）

二、负margin

margin可以为正，也可以为负数，通过设置margin的值，可以使得元素或者周围的元素移动。
其中，负margin对普通文档流（没有脱离文档）元素的影响可以分为两种情况：

margin-top或者margin-left为负数时，元素本身会被拉向指定方向。
margin-bottom或者margin-right为负数时，后续元素会被拉向指定方向。

例如：

1、margin-top为负数（粉色div设置margin-top:-50px）：

可以看到第二个块向上延展了50px，并且遮住了第一个div。
margin-left为负数时，同理会遮住其左边的元素。

2、margin-bottom为负数（粉色div设置margin-bottom: -50px）：

与margin-top效果正好相反，下面的元素延展遮住了当前元素。

负margin的使用也很灵活，应用也十分广泛。

1、自适应布局

双飞翼布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .left, .right, .main{
            height: 500px;
        }
        .left {
            background: #E79F6D;
            width: 150px;
            float: left;
            margin-left: -100%;
        }

        .main {
            background: #D6D6D6;
            width: 100%;
            float: left;
        }

        .mc {
            margin-left: 150px;
            margin-right:190px;
        }

        .right {
            background: #77BBDD;
            width: 190px;
            float: left;
            margin-left: -190px;

        }
    </style>
</head>

<body>
    <div class="con">
        <div class="main">
            <div class="mc">Main</div>
        </div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>

</body>
</html>

效果：
在这里插入图片描述

圣杯布局

html:

 <div class="con">
        <div class="main">main</div>
        <div class="left">Left</div>
        <div class="right">right</div>
    </div>

css:

* {
    padding: 0;
    margin: 0;
}


.con {
    padding-left: 150px;
    padding-right: 190px;
    height: 500px;
}

.left,
.main,
.right {
    height: 500px;
}

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

.main {
    width: 100%;
    background: yellow;
    float: left;
}

.right {
    width: 190px;
    background: red;
    float: left;
    position: relative;
    margin-right: -190px;
    left: -190px;
}

效果：
在这里插入图片描述

二者的区别：
圣杯布局是利用父容器的左、右内边距 + 两个从列相对定位。
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整。

2、图片与文字对齐

给图片设置margin:

margin: 0 3px -3px 0;

即可实现图片和文字对齐。

3、元素居中

父元素：

position: relative;

子元素(假设长宽均为100px)：

top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

小绵杨Yancy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录