html06 盒子模型 margin border padding

最新推荐文章于 2023-06-21 06:45:00 发布

wuhan_yking

最新推荐文章于 2023-06-21 06:45:00 发布

阅读量367

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/wuhan_yking/article/details/52760103

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、margin

①含义：外边距

②使用说明

检索或设置对象四边的外补丁。默认值为 0 0。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

注：如果在css中这样使用会发生的情况，

margin:17px auto;
margin-top:-50px;

连续使用margin属性，后一个margin-top属性会替换前一个margin-top属性，最终的效果是：margin：-50px auto 17px

③探讨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1 {
        width: 50px;
        height: 50px;
        background: red;
        float: left;
        margin: 10px 10px;
    }

    #div2 {
        width: 50px;
        height: 50px;
        background: #2b25ff;
        float: left;
        margin: 15px 15px;
    }

    #div3 {
        width: 100px;
        height: 50px;
        background: #23ff51;
        clear: both;
    }
</style>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

</body>
</html>

④应用

利用margin中auto实现水平居中，竖直方向没有效果；auto会自动适应各种宽度的屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1 {
        width: 150px;
        height: 150px;
        background: red;
        border: 5px solid black;
        margin: 10px auto;
        padding: 10px 10px;
    }
</style>
<body>
<div id="div1">div1</div>
</body>
</html>

⑤margin重叠现象

1>竖直方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1 {
        width: 50px;
        height: 50px;
        background: red;
        margin-bottom: 15px;
    }
    #div2 {
        width: 50px;
        height: 50px;
        background: orange;
        margin-top: 15px;
    }
</style>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>

效果图：

2>水平方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1 {
        width: 50px;
        height: 50px;
        background: red;
        margin-right: 15px;
        float: left;
    }
    #div2 {
        width: 50px;
        height: 50px;
        background: orange;
        margin-left: 15px;
        float: left;
    }
</style>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>

效果图：

综上可得出结论：

1.上下/左右相邻的普通元素margin，不是两者相加之和，而是取最大值，这个现象叫做margin重叠。
2. 普通元素才会发生margin重叠，如果是float元素，就不会发生。margin是两者相加之和。

二、border

①含义：边框

②常用 border：1px solid red；红色实线边框

三、padding

①含义：内边距，相对于margin的外边距

②定义元素边框与元素内容之间的空白区域

③使用：padding接受长度和百分比，但不允许出现负值

④padding与背景，背景色一直铺到边框处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1 {
        width: 150px;
        height: 150px;
        background: red;
        border: 5px solid black;
        margin: 10px 10px;
        padding: 10px 10px;
    }
</style>
<body>
<div id="div1">div1</div>
</body>
</html>

当padding值增大时，背景色面积也增大，但文字面积不变，它跟width和height有关；

四、盒子模型实占多大空间

一个盒子有margin，border，padding时，实占空间？

竖直方向：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

水平方向：width + padding-left + padding-right + border-left + border-right + margin-right + margin-left

wuhan_yking

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html06 盒子模型 margin border padding

一、margin①含义：外边距②使用说明检索或设置对象四边的外补丁。默认值为 0 0。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。③探讨html>lang="en"> charset="UTF-8">
复制链接

扫一扫

专栏目录