20.盒子模型

最新推荐文章于 2024-02-06 01:25:51 发布

Keeling1720

最新推荐文章于 2024-02-06 01:25:51 发布

阅读量141

点赞数

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113960781

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

本文详细介绍了CSS中的盒子模型，包括内容区、内边距、边框和外边距的概念。内容区设置元素的宽高，边框通过border属性定义样式、颜色和宽度，内边距padding影响元素内部空间，外边距margin则调整元素间的间距。文章通过实例代码展示了如何设置和理解这些属性，帮助读者更好地掌握网页布局技巧。

摘要由CSDN通过智能技术生成

文章目录

盒子模型

盒子模型

    盒模型、盒子模型、框模型（box model）
        - css将页面中的所有元素都设置为了一个矩形的盒子
        - 将元素设置为矩形的盒子后，将页面的布局就变成将不同的盒子摆放到不同的位置
        - 每个盒子都由以下几个部分组成：
            内容区（content）
            内边距（padding）
            边框（border）
            外边距（margin）

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box1{
            /**
                内容区（content）：元素中的所有的子元素和文本内容都在内容中排列
                    内容区的大小由width和height两个属性设置
                        width  设置内容区宽度
                        height 设置内容区高度
             */
            width: 200px;
            height: 200px;
            background-color: #bbffaa;

            /**
                边框（border）：边框属于盒子边缘，要设置边框至少需要三个样式：
                    border-width  边框的宽度(可以不写，一般浏览器会默认给3个像素)
                    border-color  边框的颜色
                    border-style  边框的样式
             */
            border-width: 10px;
            border-color: black;
            border-style: solid;
        }
    </style>
</head>
<body>
    <!--
        盒模型、盒子模型、框模型（box model）
            - css将页面中的所有元素都设置为了一个矩形的盒子
            - 将元素设置为矩形的盒子后，将页面的布局就变成将不同的盒子摆放到不同的位置
            - 每个盒子都由以下几个部分组成：
                内容区（content）
                内边距（padding）
                边框（border）
                外边距（margin）

    -->

    <div class="box1"></div>
</body>
</html>

显示如下：
在这里插入图片描述
注意：这里的盒子总宽度和高度是220（200的content和上下左右边框的10）

盒子模型——边框

   边框（border）
       border-width  边框的宽度(不写会给默认值，一般是3个像素)
           -值的情况
               一个值：上下左右都是该值
               两个值：上下 左右
               三个值：上 左右 下
               四个值：上 右 下 左
       除了border-width外，还可以用
           border-top-width、border-right-width、border-bottom-width、border-left-width
           分别对应边框的上右下左，写起来可读性会高一些

       border-color  边框的颜色(省略不写则给默认值黑色)
           color也有top、right。。。这四个属性来设置不同地方的颜色


       border-style  边框的样式(默认值是none 表示没有边框)
           solid   实线
           dotted  点状虚线
           dashed  虚线
           double  双线

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            /**
                边框（border）
                    border-width  边框的宽度(不写会给默认值，一般是3个像素)
                        -值的情况
                            一个值：上下左右都是该值
                            两个值：上下 左右
                            三个值：上 左右 下
                            四个值：上 右 下 左
                    除了border-width外，还可以用
                        border-top-width、border-right-width、border-bottom-width、border-left-width
                        分别对应边框的上右下左，写起来可读性会高一些

                    border-color  边框的颜色(省略不写则给默认值黑色)
                        color也有top、right。。。这四个属性来设置不同地方的颜色


                    border-style  边框的样式(默认值是none 表示没有边框)
                        solid   实线
                        dotted  点状虚线
                        dashed  虚线
                        double  双线

             */
            border-width: 10px 20px 30px 40px;
            border-color: black red orange blue;
            border-style: double;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

显示如下：
在这里插入图片描述
简写如下：
直接使用border属性，然后把三个值写进去即可（不需要按照顺序）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            /*
                border简写属性，通过该属性可以同时设置边框所有的样式，且没有属性要求
                除了border，还有四个 border-xxx
                    border-top、border-right、border-bottom、border-left
            */
            border: 10px orange double;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

显示如下：
在这里插入图片描述

盒子模型——内边距

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            border: 10px orange solid;
            /**
                内边距(padding)
                    - 内容区和边框之间的距离是内边距
                    - 一共有四个方向的内边距
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left
                    - 内边距的设置会影响盒子的大小
                    - 背景颜色会延伸到内边距上
             */
            padding: 100px;
        }

        .inner{
            width: 100%;
            height: 100%;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"/>
    </div>
</body>
</html>

显示如下：
在这里插入图片描述
如图所示，蓝色是内容区，上下左右的青绿色是内边距，最外围的橙色是边框。
注意：内边距也可以通过padding-top等四个属性来分别设置，或者通过padding属性设置1到4个值来指定大小。
方法类似于上面介绍过的边框。

盒子模型——外边距

   外边距(margin)
       - 外边距不会影响盒子可见框的大小
       - 但是外边距会影响盒子的位置
       - 一共有四个方向的外边距
           margin-top:上外边距，值为正数，盒子下移
           margin-left:左外边距，值为正数，盒子右移
           margin-bottom:下外边距，值为正数，下边盒子向下移动
           margin-right：右外边距，值为正数，右边盒子向右移动
       - 元素在页面中是按照自左向右的顺序排列的，
           所有默认情况下如果我们设置的左和上外边距会移动元素本身
           设置下和右外边距会移动其他元素

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            border:10px red solid;

            /*
                外边距(margin)
                    - 外边距不会影响盒子可见框的大小
                    - 但是外边距会影响盒子的位置
                    - 一共有四个方向的外边距
                        margin-top:上外边距，值为正数，盒子下移
                        margin-left:左外边距，值为正数，盒子右移
                        margin-bottom:下外边距，值为正数，下边盒子向下移动
                        margin-right：右外边距，值为正数，右边盒子向右移动
                    - 元素在页面中是按照自左向右的顺序排列的，
                        所有默认情况下如果我们设置的左和上外边距会移动元素本身
                        设置下和右外边距会移动其他元素
            */

            margin-top: 100px;
            margin-left: 100px;
            margin-bottom: 100px;

            /*
                margin的简写：
                    margin k可以同时设置四个方向的外边距，用法和padding一样
            */
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

显示如下：
在这里插入图片描述

Keeling1720

关注

0
点赞
踩
0

收藏

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

盒模型、盒子模型、框模型（box model） - css将页面中的所有元素都设置为了一个矩形的盒子 - 将元素设置为矩形的盒子后，将页面的布局就变成将不同的盒子摆放到不同的位置 - 每个盒子都由以下几个部分组成：内容区（content）内边距（padding）边框（border）外边距（margin）代码：<!DOCTYPE html...
复制链接

扫一扫

专栏目录