css 盒子模型

最新推荐文章于 2025-07-03 11:04:06 发布

慕容屠苏

最新推荐文章于 2025-07-03 11:04:06 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

分类专栏： reactNative

本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/64444032

reactNative 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了CSS盒子模型的基本概念，包括元素内容、内边距、边框及外边距的定义和应用方式。通过实例展示了如何设置这些属性来实现网页布局。

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

为什么要理解盒子模块：

html界面的布局就像由多个盒子组成的界面，

理解盒子的结构，以满足不同的业务场景需要的布局。

Css 盒子模型:

CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、

内边距（padding）、边框（border）和外边距（margin）的方式。在HTML文档中，每个元素（element）

都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示：

说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- bottom、padding-left）

、边框（border-top、border-right、border-bottom、border- left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距

下图是Css模型边距图解：

说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- bottom、padding-left）

、边框（border-top、border-right、border-bottom、border- left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距

下图是Css模型边距图解：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        /**  通配符,代表所有标签 */
        *{
            padding: 0px;
            margin: 0px;
        }
        /*ID选择器*/
        #myDiv{
            /*实际的宽高,width -左右边距+ 左右边框*/
            width: 200px;
            height: 300px;
            border: 1px solid red;
            /*
            padding填充,内边距
            */
            /*
            1.上下左右的值
            2.上下,左右
            3.上,左右,下
            4.上,右,下,左
            */
            padding: 0px 10px 0px;
            margin: 10px 20px 10px;
        }

        #myDiv2{
            width: 200px;
            height: 300px;
            border: 1px solid green;
        }

        /*类选择器*/
        .title{
            color: blue;
            font-size: 14px;
        }

        /*混合使用*/
        span.title{
            font-size: 25px;
        }
        div > p{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <p>abcdef</p>
    </div>
    <div id="myDiv2">
    </div>
    <span class="title">
        Javascripttest
    </span>
    <i  class="title">ActionScript</i>

</body>
</html>