HTML静态页面之（盒子模型）

矫情吗；* 2022-10-10 04:54 252阅读 0赞

# 盒子模型 #

## 描述 ##

*  每一个元素都可以叫做是盒子模型
 *  盒子模型的组成
    
     *  内容区 - 元素中内容（文本、图片、等等）
     *  内边距 - 内容区到边框的距离
     *  边距 - 内容区的边界
     *  外边距 - 盒子与盒子之间的距离

## border属性 ##

*  表示设置元素的边框
 *  border属性是简写属性,可以分为
    
     *  border-width - 表示边框的宽度
     *  border-style - 表示边框的样式
     *  border-color - 表示边框的颜色
     *  简写顺序: 边框宽度 边框样式 边框颜色
 *  border属性也可以按照上、右、下、左四个方向进行划分来分别设置
    
     *  分别设置边框时，设置的顺序固定不变的：上、右、下、左

<head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: blueviolet;
    
                /*
                    border属性 - 表示设置边框
                     * 简写属性,可以分为
                      * border-width - 表示边框的宽度
                      * border-style - 表示边框的样式
                      * border-color - 表示边框的颜色
                     * 简写顺序: 边框宽度 边框样式 边框颜色
                 */
                border: 10px solid black;
    
                /* border属性也可分开进行设置 */
                border-width: 10px;
                border-style: solid;
                border-color: black;
    
                /*
                    border属性也可以按照上、右、下、左四个方向进行划分来分别设置
                    * border-top - 表示设置上边框
                    * border-right - 表示设置右边框
                    * border-bottom - 表示设置下边框
                    * border-left - 表示设置左边框
                 */
                border-top: 10px solid black;
                border-right: 15px double gray;
                border-bottom: 20px dashed green;
                border-left: 25px dotted darkgreen;
    
                /*
                    在设置边框时根据属性值个数不同，设置的效果也不同
                    * 只有一个值时，四个方向同时设置
                    * 再有两个值时，第一个值表示上下、第二个值表示左右
                    * 再有三个值时，第一个值表示上、第二个值表示左右、第三个值表示下
                    * 再有四个值时，第一个值表示上、第二个值表示右、第三个值表示下、第四个值表示左
                    * 在设置边框时，设置的顺序固定不变的：上、右、下、左
                 */
                border-width: 10px 20px 30px 40px;
                border-style: solid;
                border-color: black;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>

## border-radius属性 ##

*  表示设置元素边框的圆角
 *  属性值表示为圆的半径
 *  当属性值等于元素宽度的一半时,会得到一个圆形
 *  也可以写多个属性值,顺序为: 左上角 右上角 右下角 左下角

<head>
        <meta charset="UTF-8">
        <title>边框的圆角</title>
        <style>
            div {
                width: 200px;
                height: 200px;
            }
            /*
                border-radius属性 - 表示设置边框圆角
                 * 属性值表示为圆的半径
                 * 当属性值等于元素宽度的一半时,会得到一个圆形
                 * 也可以写多个属性值,顺序为: 左上角 右上角 右下角 左下角
             */
            #d1 {
                background-color: red;
                /* 设置圆角 */
                border-radius: 100px;
            }
            #d2 {
                background-color: green;
                /* 设置不规则圆角 */
                border-radius: 25px 150px 25px 0;
            }
        </style>
    </head>
    <body>
    <div id="d1"></div>
    <div id="d2"></div>
    </body>

## padding属性 ##

*  表示设置元素内边距
 *  内边距可以分上、右、下、左、四个方向进行设置
    
     *  也可以同时写多个值分别设置，设置的顺序固定不变的：上、右、下、左
 *  内边距无法设置颜色，会显示与背景相同的颜色
 *  设置内边距时会改变元素本身的大小

<head>
        <meta charset="UTF-8">
        <title>内边距</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: red;
    
                /*
                    padding属性 - 表示设置内边距
                    * 内边距可以分四个方向进行设置
                     a. padding-top
                     b. padding-right
                     c. padding-bottom
                     d. padding-left
                    * 也可以同时写多个值分别设置
                     a. 只有一个值时，四个方向同时设置
                     b. 再有两个值时，第一个值表示上下、第二个值表示左右
                     c. 再有三个值时，第一个值表示上、第二个值表示左右、第三个值表示下
                     d. 再有四个值时，第一个值表示上、第二个值表示右、第三个值表示下、第四个值表示左
                    * 设置的顺序固定不变的：上、右、下、左
                    * 内边距无法设置颜色，会显示与背景相同的颜色
                    * 设置内边距时会改变元素本身的大小
                 */
                padding: 10px 20px 30px 40px;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>

## margin属性 ##

*  表示设置外边距
 *  外边距也可以分上、右、下、左、四个方向来分别进行设置
 *  在设置上外边距和左外边距时会影响到元素本身的显示位置
 *  在设置下外边距和右外边距时会影响到下一个相邻元素的显示位置

<head>
        <meta charset="UTF-8">
        <title>外边距</title>
        <style>
            div {
                width: 200px;
                height: 200px;
            }
            /*
                margin属性 - 表示设置盒子模型的外边距
                * 外边距也可以分上、右、下、左、四个方向来分别进行设置
                 * 在设置上外边距和左外边距时会影响到元素本身的显示位置
                 * 在设置下外边距和右外边距时会影响到下一个相邻元素的显示位置
             */
            #d1 {
                background-color: red;
                /* 设置上外边距和左外边距 - 会改变元素的显示位置 */
                margin-top: 100px;
                margin-left: 100px;
            }
            #d2 {
                background-color: blue;
                /* 外边距设置负值时会向相反的方向移动 */
                margin-top: -100px;
    
                /* 设置下外边距会改变下一个相邻元素的显示位置 */
                margin-bottom: 100px;
            }
            #d3, #d4 {
                display: inline-block;
            }
            #d3 {
                background-color: green;
                /* 外边距设置负值时会向相反的方向移动 */
                margin-right: -50px;
            }
            #d4 {
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
    </body>

### 外边距的重叠 ###

*  两个垂直方向排列的相邻元素分别设置上外边距和下外边距时，显示出的效果并不是两个数值相加，而是只显示两个数值中大的
 *  在水平方向排列的相邻元素分别设置左外边距和右外边距时，不会出现外边距重叠的效果

<head>
        <meta charset="UTF-8">
        <title>外边距的重叠</title>
        <style>
            /*
                外边距的重叠
                * 表示两个垂直方向排列的相邻元素分别设置上外边距和下外边距
                  显示出的效果并不是两个数值相加
                  而是只显示两个数值中数值大的
    
                * 在水平方向排列的相邻元素分别设置左外边距和右外边距
                  不会出现外边距的重叠效果
             */
    
            /* 垂直方向排列的相邻元素 */
            #top {
                width: 200px;
                height: 200px;
                background-color: red;
                /* 设置下外边距 */
                margin-bottom: 100px;
            }
            #bottom {
                width: 200px;
                height: 200px;
                background-color: blue;
                /* 设置上外边距 */
                margin-top: 200px;
                /* 显示结果：两个元素之间的间距为 200px（应为300px） */
            }
    
            /* 设置水平方向排列的相邻元素 */
            #left, #right {
                display: inline-block;
            }
            #left {
                width: 200px;
                height: 200px;
                background-color: green;
                /* 设置右外边距 */
                margin-right: 100px;
            }
            #right {
                width: 200px;
                height: 200px;
                background-color: blueviolet;
                /* 设置左外边距 */
                margin-left: 200px;
                /* 显示结果：两个元素之间的间距为 300px */
            }
        </style>
    </head>
    <body>
    <div id="top"></div>
    <div id="bottom"></div>
    <div id="left"></div>
    <div id="right"></div>
    </body>

### 外边距的传递 ###

*  表示在父子结构中，如果子级设置上外边距，父级也会一起调整显示位置
 *  外边距传递的效果只会在父子结构中子级设置“上外边距”才会出现

解决方法

*  通过为父级设置上内边距来调整子级想要显示的位置
    
     *  因为：子级的上外边距等于父级的上内边距
     *  注意：在设置内边距时会改变元素本身的显示大小

<head>
        <meta charset="UTF-8">
        <title>外边距的传递</title>
        <style>
            /*
                在父子结构中，如果子级设置上外边距，父级也会一起调整显示位置
                 * 解决方法：通过为父级设置上内边距来调整子级想要显示的位置
                  * 因为：子级的上外边距 == 父级的上内边距
                 * 注意：在设置内边距时会改变元素本身的显示大小
                 * 外边距传递的效果只会在父子结构中子级设置“上外边距”才会出现
             */
            #fu {
                width: 200px;
                /* height: 200px; - 调整显示大小，让元素正常显示 */
                height: 100px;
                background-color: red;
                /* 父级设置内边距调整子级的显示位置 - 注意调整过元素的显示大小 */
                padding-top: 100px;
            }
            #zi {
                width: 100px;
                height: 100px;
                background-color: blue;
                /* 子级设置上外边距时父级也会一同更改显示位置 */
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
    <div id="fu">
        <div id="zi"></div>
    </div>
    </body>

### 元素的水平居中 ###

*  外边距也可以用来实现元素的水平方向居中
    
     *  margin: 0 auto; - 固定写法
     *  auto - 表示自适应
 *  外边距水平方向的属性值必须为 auto ， 垂直方向的属性值可以根据需求来设置
 *  在设置时，目标元素的宽度不能等于父级元素的宽度

<head>
        <meta charset="UTF-8">
        <title>元素水平居中</title>
        <style>
            /*
                外边距也可以用来实现元素的水平方向居中
                 * margin: 0 auto; - 固定写法
                 * auto - 表示自适应
                 * 外边距水平方向的属性值必须为 auto ， 垂直方向的属性值可以根据需求来设置
                 * 在设置时，目标元素的宽度不能等于父级元素的宽度
             */
            div {
                width: 500px;
                height: 200px;
                background-color: yellowgreen;
                /* 利用外边距实现元素水平方向的居中效果 */
                margin: 50px auto 50px;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>

## box-shadow属性 ##

*  表示设置盒子模型的阴影
 *  属性值有
    
     *  水平方向偏移量
     *  垂直方向偏移量
     *  模糊度
     *  颜色

<head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: red;
                /*
                    盒子模型 - 每一个元素都可以叫做是盒子模型
                     * 盒子模型的组成：
                        a.内容区 - 元素中内容（文本、图片、等等）
                        b.内边距 - 内容区到边框的距离
                        c.边距 - 内容区的边界
                        d.外边距 - 盒子与盒子之间的距离
                 */
                /* box-shadow属性 - 表示设置盒子阴影 */
                box-shadow: 10px 10px 3px blue, -10px -10px 3px green;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>

## box-sizing属性 ##

*  表示改变盒子模型的类型

### content-box属性值 ###

*  表示标准盒子类型（默认值）
    
    1.  会改变元素的显示大小
    2.  最终显示宽度 = 宽度 + 内边距（左、右） + 边框（左、右）
    3.  最终显示高度 = 高度 + 内边距（上、下） + 边框（上、下）

### border-box属性值 ###

*  表示怪异盒子类型
    
    1.  不会改变元素的显示大小
    2.  最终显示宽度 = 宽度
    3.  最终显示高度 = 高度

<head>
        <meta charset="UTF-8">
        <title>盒子模型的类型</title>
        <style>
            /*
                box-sizing属性 - 表示改变盒子的类型
                * content-box属性值 - 表示标准盒子类型（默认值）
                 * 会改变元素的显示大小
                 * 最终显示宽度 = 宽度 + 内边距（左、右） + 边框（左、右）
                 * 最终显示高度 = 高度 + 内边距（上、下） + 边框（上、下）
                * border-box属性值 - 表示怪异盒子类型
                 * 不会改变元素的显示大小
                 * 最终显示宽度 = 宽度
                 * 最终显示高度 = 高度
             */
            #d1 {
                width: 200px;
                height: 200px;
                background-color: red;
                /* 标准盒子类型 */
                box-sizing: content-box;
                border: 10px solid black;
                padding: 50px;
                /* 最终显示：320 X 320 */
            }
            #d2 {
                width: 200px;
                height: 200px;
                background-color: blue;
                /* 怪异盒子类型 */
                box-sizing: border-box;
                border: 10px solid black;
                padding: 50px;
                /* 最终显示：200 X 200 */
            }
        </style>
    </head>
    <body>
    <div id="d1"></div>
    <div id="d2"></div>
    </body>

欢我的文章就关注我吧，持续更新中.....  
以上内容希望帮助到大家，很多朋友在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以去主页或者评论留言[点击进入暗号：CSDN][CSDN]

[CSDN]: https://jq.qq.com/?_wv=1027&k=nKNuXAFr