CSS盒子模型

最新推荐文章于 2023-10-02 10:05:05 发布

honeyws

最新推荐文章于 2023-10-02 10:05:05 发布

阅读量855

点赞数 1

分类专栏： Web前端基础文章标签： CSS盒子模型

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102960385

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

初识盒子模型
当河览网页时，可以发现网页是由很多个矩形组成的。这些矩形就是Css盒子模型，它是搭建布局的重要组成。CcSs 盒子模型又称框模型(Box Model), 它是由内容(oten)、内边距(adding)、边框(border)、外边距(margin) 等几个重要的CSs元素组成。
为了更好地理解盒子模型，用生活中常见的快递盒子来理解盒子模型和元素分工，快递中的物品为CsS盒子模型的内容(content) 部分，快递的包装纸箱为CSS盒子模型的边框(border) 部分，为了防止物品损坏，物品和包装箱之间可能有一些泡沫填充物，这些泡沫填充物为CSS盒子模型的内边距(padding) 部分，多个快递之间的距离为CSsS盒子模型的外边距(margin) 部分。
content内容
content内容部分由css宽高两个属性决定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #box{width: 200px; height:
         100px; background: hotpink; color: white;}
    </style>
</head>
<body>
    <div id="box">愿世间美好与你环环相扣</div>
</body>
</html>

padding内边距
内边距部分有padding样式可以分为padding-left，padding-right，padding-top，padding-bottom，和padding这五个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style>
    #box{width: 200px; height: 100px; background: hotpink; 
    color: indigo; padding-top: 20px; padding-right: 30px; 
    padding-bottom: 40px; padding-left: 50px;}
    </style>
</head>
<body>
    <div id="box">愿世间美好与你环环相扣</div>
</body>
</html>

padding值可以通过复合写法设置成四个值或一个值
padding：上边距，右边距，下边距，左边距。
padding：上下边距，左右边距
padding：上下左右边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style>
        #box{width: 200px; height: 100px; 
        background: hotpink; color: ivory;
        padding: 20px 30px 40px 50px}
    </style>
</head>
<body>
    <div id="box">愿世间美好与你环环相扣</div>
</body>
</html>

背景部分是可以同时作用在content内容上和padding内边距上的。
border边框
党部设置padding时，边框紧挨着content内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style>
        #box{width: 200px; height: 100px;
         background: hotpink;color: cyan;
         border:10px balck solid;}
    </style>
</head>
<body>
    <div id="box">愿世间美好与你环环相扣</div>
</body>
</html>

当设置padding时，边框紧挨着padding内边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style>
        #box{width: 200px; height: 100px; background: cyan;}
    </style>
</head>
<body>
    
</body>
</html>

margin外边距
指的是盒子与盒子之间的距离，用margin样式来定义，margin和padding类似，也分为margin-lefrt，margin-right，margin-top，margin-bottom，margin五个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style>
        body{border: 1px black dashed;}
        #box{width: 200px; height: 100px; 
        background: cyan; color: darkcyan;
        border: 10px darkgray solid;
        padding: 20px 30px 40px;
        margin: 20px 30px 40px 50px;}
    </style>
</head>
<body>
    <div id="box">愿世间美好与你环环相扣</div>
</body>
</html>

margin叠加与传递
margin叠加
当给两个盒子同时添加上下边距时，就会出现叠加的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style>
        #box1{width: 200px; height: 100px; background: darkorchid
        ; color: darksalmon;margin-bottom: 20px;}
        #box2{width: 200px; height: 100px; background: darkturquoise
        ;color: deeppink; margin-top: 20px;}

    </style>
</head>
<body>
    <div id="box1">愿世间美好与你环环相扣</div>
    <div id="box2">愿世间美好与你环环相扣</div>
</body>
</html>

第一个

标签设置了margin botom值为20px，第二个

标签设置了margin-top值为30px，理论上可能会认为它们之间的距离为50px,但实际上它们之间的距离为30px.这是因为margin上下值同时存在时，不是把上下值累加到一起，而是把上下值中较大的个值作为它们之间的距离，因此为30px。让盒子左右排
上下magin会存在上下叠加问题，而左右margin 不存在叠加问题。左右这里就不介绍了
margin传递
传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题其他三个方向是没有传递问题。

css盒子模型

愿世间美好与你环环相扣

honeyws

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

初识盒子模型当河览网页时，可以发现网页是由很多个矩形组成的。这些矩形就是Css盒子模型，它是搭建布局的重要组成。CcSs 盒子模型又称框模型(Box Model), 它是由内容(oten)、内边距(adding)、边框(border)、外边距(margin) 等几个重要的CSs元素组成。为了更好地理解盒子模型，用生活中常见的快递盒子来理解盒子模型和元素分工，快递中的物品为CsS盒子模型的内容(...
复制链接

扫一扫

专栏目录