• 简要解析盒子模型

    盒子模型

    1.前提

    html中的所有标签都可以看成一个盒子

    2.盒子模型图

    在这里插入图片描述

    3.盒子各部分组成含义以及用法

    3.1 盒子内容

    具体含义:盒子存放东西的一块区域

    width: 盒子内容的宽度

    height:盒子内容的高度

    width*height: 盒子内容所能书写的区域

    其中行内元素的width和height都是由里面的内容决定的

    3.2 盒子的内边距padding

    具体含义:盒子内边框线到盒子内容的外宽度线之间的距离

    即为盒子边框与盒子内容之间的距离,具体位置如下图所示:
    在这里插入图片描述

    有上下左右四个方向,分别是padding-top,padding-bottom,padding-left,padding-right

    3.3 盒子的边框border

    具体含义:盒子的外边框线与盒子内边距最外层之间的距离

    用途:用来确定盒子的位置.

    其具体位置如下所示:
    在这里插入图片描述

    有上下左右四个方向,分别是border-top,border-bottom,border-left,border-right,

    3.4 盒子的外边距margin

    具体含义:盒子与盒子之间的距离

    用途:用来控制排版布局

    其具体位置如下所示:
    在这里插入图片描述有上下左右四个方向,分别是margin-top,margin-bottom,margin-left,margin-right

    4.盒子部分属性(内边距、外边距)的合并写法

    4.1 辨别的口诀

    顺时针,看对面,对面皆无,看相邻

    具体指的是盒子有上下左右四个方位,那么书写的属性值顺序就是按照上右下左四个方向进行的,如遇到某些方向没有被赋值的情况,那么其属性值就为对面方向上的属性值.当遇到只写一个属性的时候,就满足左右两边皆没有给值的情况,那么它的右边值就为相邻的上边值

    4.2 只写一个属性值

    a.语法

    属性名:像素值;
/* 全部属性值就为该像素值*/

    • 1
    • 2

    b.源代码

    <!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>属性值的设置</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         .one{
           width: 200px;
           height: 200px;
           background-color: orangered;
         }
         .two{
           width: 200px;
           height: 200px;
           background-color: red;
           /* 对class值为two的盒子设置外边距 
             */
           margin: 10px; 
         }
         .three{
           width: 200px;
           height: 200px;
           background-color: pink;
         }
    </style>    
</head>
<body>
    <div>
      <div class="one">文明</div>
      <div class="two">爱国</div>
      <div class="three">团结</div>
    </div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    注意:若其左边没有相邻的盒子,那么它的左外边距也能被设置成功,它此时的参照物为父级元素,即左外边距就会被设置为距离父级元素左边的距离=左外边距值

    c.分析

    margin:10px;根据口诀可知:margin-top的值为10px

    其右边相邻属性margin-right的值为10px;当转到margin-bottom会发现其没有赋值
    就找对面的margin-top的值,因而margin-bottom=10px;
    当转到margin-left的时候，会发现没有给其赋值,看对面的margin-right的值,因而margin-right=10px;

    d.展示效果

    在这里插入图片描述

    4.3 写两个属性值

    a.语法

    属性名:像素值1 像素值2;
/*上下外边距=像素值1,左右外边距=像素值2*/

    • 1
    • 2

    b.源代码

    <!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>属性值的设置</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         .one{
           width: 200px;
           height: 200px;
           background-color: orangered;
         }
         .two{
           width: 200px;
           height: 200px;
           background-color: red;
           /* 对class值为two的盒子设置外边距 */
           margin: 10px 20px;
         }
         .three{
           width: 200px;
           height: 200px;
           background-color: pink;
         }
    </style>    
</head>
<body>
    <div id="top">
      <div class="one">文明</div>
      <div class="two">爱国</div>
      <div class="three">团结</div>
    </div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    注意:若其左边没有相邻的盒子,那么它的左外边距也能被设置成功,它此时的参照物为父级元素,即左外边距就会被设置为距离父级元素左边的距离=左外边距值

    c.分析

    margin:10px 20px;根据口诀可知:margin-top的值为10px,
    时针转到margin-right时,发现其设置了值即
    margin-right=20px;
    时针转到margin-bottom时,会发现没有给其赋值,看对面的margin-top值,可以知道margin-top存在值,因此margin-bottom=10px;
    时针转到margin-left,会发现其没有设置值,可以看对面的margin-right值,可以知道margin-right存在值,因此margin-right=margin-left=20px;此时时针停止转动

    d.展示效果

    在这里插入图片描述

    4.4 写三个属性值

    a.语法

    属性名:像素值1 像素值2 像素值3;
/*上外边距=像素值1,左右外边距=像素值2,下外边距为像素值3*/

    • 1
    • 2

    b.源代码

    <!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>属性值的设置</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         .one{
           width: 200px;
           height: 200px;
           background-color: orangered;
         }
         .two{
           width: 200px;
           height: 200px;
           background-color: red;
           /* 对class值为two的盒子设置外边距 */
           margin: 10px 20px 30px;
         }
         .three{
           width: 200px;
           height: 200px;
           background-color: pink;
         }
    </style>    
</head>
<body>
    <div id="top">
      <div class="one">文明</div>
      <div class="two">爱国</div>
      <div class="three">团结</div>
    </div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    注意:若其左边没有相邻的盒子,那么它的左外边距也能被设置成功,它此时的参照物为父级元素,即左外边距就会被设置为距离父级元素左边的距离=左外边距值

    c.分析

    margin:10px 20px 30px;
    第一次时针指向margin-top,margin-top的值为10px,
    时针转到margin-right时 margin-right=20px;
    时针转到margin-bottom时,margin-bottom=30px
    时针转到margin-left,会发现其没有设置值,可以看对面的margin-right值,可以知道margin-right存在值,
    因此margin-right=margin-left=20px;此时时针停止转动

    d.展示效果

    在这里插入图片描述

    4.5 写四个属性值

    a.语法

    属性名:像素值1 像素值2 像素值3 像素值4;
/*上外边距为像素值1,右外边距为像素值2,下外边距为像素值3,左外边距为像素值4*/

    • 1
    • 2

    b.源代码

    <!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>属性值的设置</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         .one{
           width: 200px;
           height: 200px;
           background-color: orangered;
         }
         .two{
           width: 200px;
           height: 200px;
           background-color: red;
           /* 对class值为two的盒子设置外边距 */
           margin: 10px 20px 30px 40px;
         }
         .three{
           width: 200px;
           height: 200px;
           background-color: pink;
         }
    </style>    
</head>
<body>
    <div id="top">
      <div class="one">文明</div>
      <div class="two">爱国</div>
      <div class="three">团结</div>
    </div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    注意:若其左边没有相邻的盒子,那么它的左外边距也能被设置成功,它此时的参照物为父级元素,即左外边距就会被设置为距离父级元素左边的距离=左外边距值

    c.分析

    margin:10px 20px 30px 40px;
    第一次时针指向margin-top,margin-top的值为10px,
    时针转到margin-right时 margin-right=20px;
    时针转到margin-bottom时,margin-bottom=30px
    时针转到margin-left时,margin-left=40px;此时时针停止转动

    d.展示效果

    在这里插入图片描述

    5.盒子实际所占宽度和实际所占高度

    盒子实际所占宽度=width+border-left+border-right+padding-left+padding-right

    盒子实际所占高度=height+border-top+border-bottom+padding-top+padding-bottom
    注意:盒子的外边距是不占盒子实际所占宽度和实际所占高度

  • 相关阅读:
    XStream 与 JAXB 的使用对比
    白银期货开户交割规则有哪些？
    基于卷积神经网络的苗语孤立词语音识别
    搜索+剪枝，LeetCode 216. 组合总和 III
    C#，哈密顿环问题（Hamiltonian Cycle problem）的算法与源程序
    高通导航器软件开发包使用指南（16）
    python不同版本常用功能差异
    垃圾收集算法
    springboot游戏推荐平台-计算机毕设定制-附项目源码（可白嫖） 17128
    基于VggNet网络与ResNet神经网络的物体分类识别研究-附Matlab代码
  • 原文地址：https://blog.csdn.net/SSS4362/article/details/125475117