深入理解盒子模型：布局基石与计算法则-优快云博客

本文链接：https://blog.youkuaiyun.com/right_hand_side/article/details/115468664

本文详细解读了浏览器中的盒子模型，包括宽度、高度、内边距、外边距和边框的组成，介绍了content-box与border-box的区别，并通过实例演示了如何进行计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、盒子模型
总结

一、盒子模型

浏览器页面中每个元素都可以被当做一个盒子

1.组成

    width       元素内容的宽度
    height      元素内容的高度
    
    padding     元素内容与边框的距离【内边距】
        padding-top
        padding-bottom
        padding-left
        padding-right
    /* 上、右、下、左 */
    padding: 1px 2px 3px 4px;
    /* 上、左右、下 */
    padding: 1px 2px 3px;
    /* 上下、左右 */
    padding: 1px 2px;
    /* 上下左右 */
    padding: 1px;
 
    margin      元素与其他元素之间的距离【外边距】

    /* 速写:线宽 + 样式 + 颜色 */
    border      元素的边框
      		 border-width边框线宽
       		 border-style边框的样式 
					        solid 实线
					        dotted 点状线
					        double 双实线
					        dashed 虚线
			 border-color边框颜色

2.分类与计算

<!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>盒子分类</title>
</head>
<style>
    .one{
        height: 100px;
        width: 100px;
        border: 10px solid #333;
        padding: 20px;
        margin: 30px;
        /* 边框盒子 
            计算方式：
            在页面中实际占的宽度 = width + margin-left + margin-right
                                 = 100+30+30*/
        box-sizing: border-box;
    }
    .two{
        height: 100px;
        width: 100px;
        border: 10px solid #333;
        padding: 20px;
        margin: 30px;
        /* 内容盒子 浏览器默认的盒子
            计算方式：
            在页面中实际占的宽度 = width + padding-left + padding-right + margin-left + margin-right + border-left + border-right
                                 =100+20+20+30+30+10+10*/
        box-sizing: content-box;
    }
</style>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>
</html>

在这里插入图片描述

3.背景

    background-color	背景颜色
    background-image	背景图片
    background-size		背景大小
    background-repeat  背景图的重复方式
    background-position 背景图的位置
    background-clip