详解盒模型大小取决于它的padding，margin，border数值

网页制作 2024/9/1 佚名

3 2 1

盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和外边距margin 的数值大小。边框内的空白是内边距padding，边框外的空白是外边距margin，如下所示，这个盒模型元素框的宽度值=内容区域的宽度+2（内边距+外边距+边框），也就是该示例中的元素宽度为170px，需要注意的是在 css 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。（浏览器查看的时候记得打开控制台F12，点击对应的元素查看）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型大小取决于它的padding，margin，border数值</title>
    <style type="text/css">
        div{
        padding: 10px;/*内边距*/
        margin: 20px;/*外边距*/
        margin: 10px 20px 30px 40px;/*上10px 右20px 下30px 左40px*/
        margin: 10px 20px;/*上下 左右*/
        margin: 10px 20px ;/*上 上下不一样，左右一样*/
        margin: 10px 20px 30px;/*外边距*/
        border: 5px solid red;/*边框*/
        width: 100px;/*内容区域宽度100*/
        height: 100px;/*内容区域高度100*/
    }
    /*盒子大小值=2（内边距+边框+外边距）*//*该div大小*/
    </style>
</head>
<body>
    <div>看再多的书是学不全脚本的，要多实践。</div>
</body>
</html>

不论是margin还是padding,它们都是按照顺时针排列的，上右下左定义数值的；比方说这个margin:10px 10px 10px 10px是讲这个盒子上下左右都增加了10px的外边距，简写margin：10px；marigin:10px 10px;上下左右外边距10px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin所谓bug居然是重叠，咋解决</title>
    <style type="text/css">
    .box1,.box2{
        width: 200px;
        height: 200px;
        margin: 10px 20px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="box1">功能说明书里不存在可操作性</div>
    <div class="box2">软件在能够复用前必须先能用。</div>
</body>
</html>

按照正常思维来讲，上面的代码里面的2个盒子的上下间距应该是20px缝隙，但是实际我们在控制台查看的时候确只有10px，另外10px显然被重叠了，如果我们调整2个盒子的margin值大小，会发现上下间距取最大值20px（margin平级元素取最大值）；解决办法：1.float2改变元素结构display:inline-block此外如果margin嵌套关系,也就是父子关系的时候你会发现他们是重合的，没有缝隙，那么如何解决margin带来的这些问题了，解决办法：盒子是没有盖子的，想办法给2端填充内容，可以使用border、padding、overflow:hidden；盒子模型对于我们后面的网站布局很重要，利于网站的精确定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决margin产生的bug方法</title>
    <style type="text/css">
    /* .box1,.box2{
        width: 200px;
        height: 200px;
        background-color: red;
    } */
    /* .box1{
        margin: 10px 20px;
    }
    .box2{
        margin: 20px 10px;
    }
    .box3{
        margin: 20px 10px;
    }
    .box4{
        margin: 10px 20px;
    } */

    /* 盒子模型平级带来的问题解决办法：1.float 2.display:inline-block 3.直接写一个最大值，平级取最大值的margin*/
    div{
        /* float: left; */
        display: inline-block;
        width: 1200px;
    }
   .box1{
        margin: 10px 20px;
    }
    .box2{
        margin: 80px 10px;
    }

    /* 盒子模型平级嵌套带来的问题解决办法：盒子是没有盖子的，想办法给2端填充内容，可以使用border、padding、overflow:hidden；上下填充文字*/
    p{
        width: 800px;
    }
    .box3,.box4{
        margin: 30px;
    }
    .box3{
        background-color: green;
        /* border:1px solid red*//*给父元素加border*/
        padding: 10px; /*给父元素加padding*/
        /*overflow: hidden;*//*添加overflow:hidden 超出部分隐藏，带来效果是所有超出全部裁剪掉*/
    }
    .box4{
        display: block;
        background-color: greenyellow;
    }
    </style>
</head>
<body>
    <div class="box1">功能说明书里不存在可操作性</div>
    <div class="box2">软件在能够复用前必须先能用。</div>
    <p class="box3">
        <!-- 简单不先于复杂，而是在复杂之后。 -->
        <span class="box4">过去的代码都是未经测试的代码。</span>
        <!-- 要么做第一个，要么做最好的一个 -->
    </p>
</body>
</html>

padding,margin,border,数值

标签：

padding,margin,border,数值

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“详解盒模型大小取决于它的padding，margin，border数值”

详解盒模型大小取决于它的padding，margin，border数值

暂无“详解盒模型大小取决于它的padding，margin，border数值”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

详解盒模型大小取决于它的padding，margin，border数值

padding,margin,border,数值

CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)

css+svg实现b站充电效果的示例代码

评论“详解盒模型大小取决于它的padding，margin，border数值”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接