CSS盒模型详解：边框、内边距与尺寸计算-CSDN博客

本文链接：https://blog.csdn.net/qq_54201133/article/details/124862654

盒子模型

1.1 内容的宽度和高度

在这里插入图片描述

1.2 边框

1.2.1 连写

属性名: border
属性值:单个取值的连写，取值之间以空格隔开

如: border: 10px solid red;

快捷键:bd+tab

1.2.2 单方向设置

场景: 只给盒子的某个方向单独设置边框
属性名: border-方位名词
属性值: 连写的取值

1.2.3 单个属性

作用:给设置边框粗细、边框样式、边框颜色效果
单个属性:

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

示例:

<!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: 300px;
            height: 300px;
            background-color: orange;
            border: 5px solid #000;
        }
        p{
            width: 300px;
            height: 300px;
            background-color: pink;
            border-left: 5px solid #000;
            border-right: 5px solid #000;
        }
    </style>
</head>
<body>
    <div>文字</div>
    <p>我的</p>
</body>
</html>

效果：

在这里插入图片描述

1.3内边距(padding)

1.3.1盒子尺寸

盒子尺寸= width / height + broder+padding

需求:盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成?

示例1(手动剪)：

<!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: 240px;
           height: 240px;
           background-color: pink;
           border: 10px solid #000;
           /*设置上右下左
           padding:10px, 20px, 30px, 40px;
           /*设置上，左右=20px,下
           padding:10px, 20px, 30px;
           /*设置上下=10px，左右=20px
           padding:10px, 20px;*/
           padding: 20px;
       }
   </style>
</head>
<body>
   <div>box</div>
</body>
</html>

示例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>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 10px solid #000;
            /*设置上右下左
            padding:10px, 20px, 30px, 40px;
            /*设置上，左右=20px,下
            padding:10px, 20px, 30px;
            /*设置上下=10px，左右=20px
            padding:10px, 20px;*/
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>box</div>
</body>
</html>

效果：

在这里插入图片描述

1.3.2清除默认内外边距

示例：

* {
            margin: 0;
            padding: 0;
        }

盒子模型的一些东西

盒子模型

1.1 内容的宽度和高度

1.2 边框

1.2.1 连写

1.2.2 单方向设置

1.2.3 单个属性

示例:

效果：

1.3内边距(padding)

1.3.1盒子尺寸

示例1(手动剪)：

示例2(内减模式)：

效果：

1.3.2清除默认内外边距

示例：