盒子模型及边距

jiuyue_77

已于 2022-08-07 17:12:21 修改

阅读量1k

点赞数 2

分类专栏：前端文章标签： css html vscode

于 2022-08-07 12:59:18 首次发布

本文链接：https://blog.csdn.net/jiuyue_77/article/details/126106674

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

第三章CSS——盒子模型

文章目录

第三章CSS——盒子模型
一、盒子模型
二、边距
总结

一、盒子模型

CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

<!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>Document</title>
</head>
<body>
    
    <!-- 盒子模型：margin(外边距)，border(边框)，padding(内边距)，元素宽高(width,height) -->
    <!-- 盒子模型语法对于块标签等有宽有高的元素是有效的，但是某些语法对于行标签是没有作用的 -->
    <!-- 查看一个元素的盒子模型，需要打开浏览器的开发者工具，右下角的图片就是当前元素的盒子模型 -->
    <!-- 每个元素都有自己的默认样式，也可以通过盒子模型查看的到 -->
    <!-- body默认有8px的外边距 -->
</body>
</html>

二、边距

padding 属性： 设置元素的内边距（也称填充），即元素内容与元素边框之间的间距。
margin 属性： 设置元素的外边距，即元素与其他相邻元素之间的间距。

设置元素上、右、下、左内外边距的属性：

内边距属性（padding）	作用	外边距属性（margin）	作用
padding-left	左内边距	margin-left	左外边距
padding-right	右内边距	margin-right	右外边距
padding-top	上内边距	margin-top	上外边距
padding-bottom	下内边距	margin-bottom	下外边距

padding 和 margin 属性的值：

属性值	作用
auto	让浏览器自动计算边距。使用此属性值在某些情况下会将元素或元素内容居中对齐
length	使用具体的数值和单位设置边距，如px（像素）、cm（厘米）等单位。默认值是0px
%	以父元素宽度的百分比计算边距
inherit	从父元素继承边距

1.内边距（padding 属性）

padding 属性组合使用示例：

参数值个数	示例	说明
1	padding:1px;	设置上下左右的内边距为1像素
2	padding:1px 2px;	设置上下边距为1像素,左右边距为2像素
3	padding:1px 2px 3px;	设置上边距为1像素,左右边距为2像素，下边距为3像素
4	padding:1px 2px 3px 4px;	设置上边距为1像素，右边距为2像素，下边距为3像素，左边距为4像素（顺时针方向）

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 原容器设置内边距会使容器变大 */
            /* 所以容器设置内边距需要在页面规划时设置好，否则会影响容器面积导致页面变形 */
            /* 内边距指的是内部元素与外部容器边界的距离 */
            /* 参数的个数及其方向与外边距，边框等一样 */
             /* 一个参数：表示上下左右4个方向的外边距 */
            /* 两个参数：第一个参数为上下边距，第二个参数为左右边距 */
            /* 三个参数：第一个参数为上边距，第二个参数为左右边距，第三个参数为下边距 */
            /* 四个参数：第一个参数为上边距，第二个参数为右边距，第三个参数为下边距，第四个参数为左边距 → 上右下左（顺时针） */
            padding: 20px 30px 40px 50px;
        }
    </style>
</head>
<body>
    <div>
        Solidigm是SK海力士收购英特尔NAND闪存业务后组建的全新公司，在今年4月份， Solidigm发布了成立后的首首批产品——面向数据中心和企业级应用的固态硬盘D7-P5520和D7-P5620。
    </div>
    
</body>
</html>

2.外边距（margin 属性）

margin 属性组合使用示例：

参数值个数	示例	说明
1	margin:1px;	设置上下左右的外边距为1像素
2	margin:1px 2px;	设置上下边距为1像素,左右边距为2像素
3	margin:1px 2px 3px;	设置上边距为1像素,左右边距为2像素，下边距为3像素
4	margin:1px 2px 3px 4px;	设置上边距为1像素，右边距为2像素，下边距为3像素，左边距为4像素（顺时针方向）

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 对于一个元素来讲，如果设置左边距，就不要设置右边距,设置上边距，就不要设置下边距 */
            /* 设置左外边距，元素会向右移动 */
            /* margin-left: 8px; */
            /* 设置上外边距，元素会向下移动 */
            /* margin-top: 10px; */
            /* 一个参数：表示上下左右4个方向的外边距 */
            /* 两个参数：第一个参数为上下边距，第二个参数为左右边距 */
            /* 三个参数：第一个参数为上边距，第二个参数为左右边距，第三个参数为下边距 */
            /* 四个参数：第一个参数为上边距，第二个参数为右边距，第三个参数为下边距，第四个参数为左边距 → 上右下左（顺时针） */
            /* margin: 20px 30px 40px 50px; */
            /* 外边距指的是当前元素与外部的距离，与当前元素的内部元素无关 */
            /* margin-top: 20px; */

            /* 定宽居中，设置上下边距，左右自适应（居中） */
            /* 使用定宽居中的必要条件是当前元素必须有一个确定的宽度 */
            margin: 20px auto;
        }
        
        /* span{
            margin: 20px auto;
        } */
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>

    <span>Solidigm是SK海力士收购英特尔NAND闪存业务后组建的全新公司，在今年4月份， Solidigm发布了成立后的首首批产品——面向数据中心和企业级应用的固态硬盘D7-P5520和D7-P5620。</span>
</body>
</html>

3.边框

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: lavender;
            margin: 20px auto;
            /* 边框有3个参数，大小，样式，颜色 */
            /* 边框的方向可以拆分，也可以合在一起 */
            border-left: 3px solid red;
            border-right: 5px dotted blue;
            border-top: 8px double green;
            border-bottom: 10px dashed yellow;
        }
        section{
            width: 200px;
            height: 200px;
            background-color: lavender;
            margin: 20px auto;
            /* 边框的简写，直接表示4个方向的边框 */
            border: 10px solid red;
        }

        section:hover{
            /* 取消边框 */
            border: none;
        }

        main{
            width: 200px;
            height: 200px;
            background-color: rgb(79, 79, 194);
            margin: 20px auto;
            /* 圆角，单位可以是固定的像素，也可以是百分比，50%时正方形就会变成圆形 */
            /* 圆角参数所表示的含义与内外边距，边框等一样都是上右下左 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
    <section></section>
    <main></main>
</body>
</html>