当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: 盒子模型学习-尚硅谷HTML源代码

盒模型

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

内容区（content），元素中的所有的子元素和文本内容都在内容区中排列
   内容区的大小由width 和height 两个属性来设置
     width 设置内容区的宽度
     height 社长内容区的高度

边框（border）边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
要设置边框需要至少设置三个样式：
边框的大小会影响整个盒子的大小
    边框的宽度  border–width
    边框的颜色  border–color
    边框的样式  border–styl
 
 

  01.盒子模型介绍

<!DOCTYPE html>
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <title>Title</title>
    <style>
        .box1{
            /*
            内容区（content），元素中的所有的子元素和文本内容都在内容区中排列
               内容区的大小由width 和height 两个属性来设置
                 width 设置内容区的宽度
                 height 社长内容区的高度
            */
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*
            边框（border）边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
            要设置边框需要至少设置三个样式：
            边框的大小会影响整个盒子的大小
                边框的宽度  border-width
                边框的颜色  border-color
                边框的样式  border-style
            */
            border-width: 10px; （此时盒子的长为220）
            border-color: red;
            border-style: solid;
 
        }
 
 
    </style>
</head>
<body>
    <!--
      盒模型，盒子模型，框模型（box model）
        -css将页面中所有元素都设置为了一个矩形的盒子
        -将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
        -每一个盒子都由一下几个部分组成
           内容区（content）
           内边距（padding）
           边框（border）
           外边框（margin）
    -->
        <div class="box1"></div>
</body>
</html>

 02盒子模型边框

 

边框
    边框的宽度  border–width
    边框的颜色  border–color
    边框的样式  border–style

border–width:10px;
    默认值 ：一般都是3个像素
     border–width可以用来指定四个方向的边框的宽度
        值情况
           四个值：上 右 下 左
           三个值：上 左右 下
           两个值; 上下 左右
           一个值：上下左右

    除了border-width还有一组 border-xxx–width
      xxx可以表示 top right bottom left
      单独用来指定某一个边的长度
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
 
            /*
            边框
                边框的宽度  border-width
                边框的颜色  border-color
                边框的样式  border-style
            border-width:10px;
                默认值 ：一般都是3个像素
                 border-width可以用来指定四个方向的边框的宽度
                    值情况
                       四个值：上 右 下 左
                       三个值：上 左右 下
                       两个值; 上下 左右
                       一个值：上下左右
                除了border-width还有一组 border-xxx-width
                  xxx可以表示 top right bottom left
                  单独用来指定某一个边的长度
            */
            /* border-width: 10px 20px 30px 40px;*/
            /*   border-top-width: 10px;
               border-left-width: 30px;*/
            /*color: red;*/
            /*
            border-color用来指定边框的颜色，同时可以分别指定四个边的边框
              规则和border-wi一样
              border-color也可以不写，如果不写则自动使用color的颜色值
            */
 
            /*  border-color: orange;*/
            /*    border-color: orange red yellow greenyellow;
                border-color: orange;
                多条同时在读最后一条, border-style情况一样（自己总结）
                */
            /* border-color: orange;*/
 
            /* 如果border-color和color都写了，最后执行border-color（无论二者顺序如何）*/
 
            /*
              border-style指定边框的样式
                solid 表示实线
                dotted 点状虚线
                dashed 虚线
                double 双线
                  border-style的默认值是none 表示没有边框
            */
            /* border-style: solid dotted dashed  double;*/
            /*  自己总结
             border-width: 10px;
              border-color: red;
              border-style: solid;
              在这三个组合中
              当没有border-width: 10px;时 默认值是三像素
              当没有 border-color: red;时 默认值是黑色
              当没有border-style: solid;是 默认是没有边框
  */
            /*
            border简写属性 通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
            除了border以外还有四个  border-xxx
                 border-top
                 border-right
                 border-bottom
                 border-left
            */
            /*         border: solid orange 10px;*/
            /*   border-top: red solid 20px;
              ......
               */
          /*  border:10px olivedrab solid;
            border-top:none;
            表示四边框全选，然后去除一边框
*/
 
        }
 
 
    </style>
    <title>Title</title>
 
</head>
<body>
    <div class="box1"></div>
 
</body>
</html>

  03盒子模型-内边框

内边距（padding）
   -内容区和边框之间的距离是内边距
   -一共有四个方向的内边距
     padding–top
     padding–right
     padding–bottom
     podding-left

   –内边距的设置会影响到盒子的大小
   –背景颜色会延伸到内边距上

一共盒子的可见框的大下，有内容框 内边距 和 边框 共同决定
  所以在计算盒子大小时，需要将这三个区域加到一起计算
 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                border: 10px orange solid;
 
                /*
                 内边距（padding）
                   -内容区和边框之间的距离是内边距
                   -一共有四个方向的内边距
                     padding-top
                     padding-right
                     padding-bottom
                     podding-left
                   -内边距的设置会影响到盒子的大小
                   -背景颜色会延伸到内边距上
                一共盒子的可见框的大下，有内容框 内边距 和 边框 共同决定
                  所以在计算盒子大小时，需要将这三个区域加到一起计算
                */
 
                /*  padding-top: 100px;
                  padding-left: 100px;
                  padding-right: 100px;
                  padding-bottom: 100px;
      */
 
                /*
                padding内边距的简写属性 可以同时指定四个方向的内边距
                   规则和border-width 一样
                 */
                padding:10px 20px 30px 40px;
                padding:10px 20px 30px ;
                padding:10px 20px  ;
                padding:10px ;
            }
 
            .inner{
                width: 100%;
                height: 100%;
                background-color: yellow;
            }
 
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="inner"></div>
        </div>
 
    </body>
</html>

 04.盒子模型-外边框

外边框（margin）
    –外边框不会影响盒子可见框的大小
    -但是外边框会影响盒子的位置
    -一共有四个方向的外边框
       margin-top
         -上外边距：设置一个正值 元素会向下移动
       margin–right
         –默认情况下设置margin不会产生任何效果
       margin–bottom
          -下外边框 设置一个正值 其下边的元素回向下移动
       margin-left
         -左外边框 设置一个正值 元素会向有右移动

    margin也可以设置负值，如果是负值则元素会向相反的方向移动

    -元素在页面中是按照自左向右的顺序排序的
       所以默认的情况下如果我们设置的左边和上边框则会移动元素自身
       而设置下和右边距会移动其他元素

  -margin的简写属性
     margin 可以同时设置四个方向的外边框
        用法和padding一样

  -margin会影响到盒子实际占用的空间
 
 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px red solid;
 
            /*
              外边框（margin）
                  -外边框不会影响盒子可见框的大小
                  -但是外边框会影响盒子的位置
                  -一共有四个方向的外边框
                     margin-top
                       -上外边距：设置一个正值 元素会向下移动
                     margin-right
                       -默认情况下设置margin不会产生任何效果
                     margin-bottom
                        -下外边框 设置一个正值 其下边的元素回向下移动
                     margin-left
                       -左外边框 设置一个正值 元素会向有右移动
                  margin也可以设置负值，如果是负值则元素会向相反的方向移动
                  -元素在页面中是按照自左向右的顺序排序的
                     所以默认的情况下如果我们设置的左边和上边框则会移动元素自身
                     而设置下和右边距会移动其他元素
                -margin的简写属性
                   margin 可以同时设置四个方向的外边框
                      用法和padding一样
                -margin会影响到盒子实际占用的空间
            */
 
              /* margin-top: 100px;
                 margin-left: 100px;
                 margin-bottom: 100px;*/
              /* margin-top: -100px;*/
              /* margin-bottom: -100px;*/
        }
        .box2{
            width: 220px;
            height: 220px;
            background-color: green;
        }
    </style>
</head>
<body>
      <div class="box1"></div>
      <div class="box2"></div>
</body>
</html>

  05盒子模型-水平方向的布局

 

元素的水平方向的布局：
               元素在其父元素中水平放向的位置由以下几个属性共同决定：
                  margin-left
                  border-left
                  padding-left
                  width
                  padding-right
                  border-right
                  margin-right

                  一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）
                0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
                0 + 0 + 0 + 200 + 0 + 0 + 600= 800

                100 + 0 + 0 + 200 + 0 + 0 + 400= 800
                100 + 0 + 0 + 200 + 0 + 0 + 500= 800
                 -以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
                   -调整的情况：
                       -如果这七个值中没有为 aute 的情况，则浏览器会自动调整margin-right值以使等式满足
                   -这七个值中有三个值可设置为 aute
                      width
                      margin-left
                      margin-right
                         -如果某个值为 aute，则会自动调整为aute的那个值以使等式成立
                           0 + 0+ 0 + aute + 0 + 0 + 0 = 800   aute=800
                           0 + 0+ 0 + aute + 0 + 0 + 200 = 800   aute=600
                           200 + 0+ 0 + aute + 0 + 0 + 200 = 800   aute=400

                        -如果将一个宽度和一个外边距设置为aute，则宽度会调整到最大，设置为aute的外边距会自动会零
                        -如果将三个值都设置为aute，则外边距会都是0，宽度最大
                        -如果将两个外边距设置为aute，宽度固定值，则会将外边距设置为相同值
                             所以我们经常会利用这个特点来使一个元素在其父元素中水平居中
                                示例：
                                   width：xxxpx；
                                   margin：aute；
 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin-left: 100px;
            margin-right: 500px;
            /*
              元素的水平方向的布局：
                  元素在其父元素中水平放向的位置由以下几个属性共同决定：
                     margin-left
                     border-left
                     padding-left
                     width
                     padding-right
                     border-right
                     margin-right
                     一个元素在其父元素中，水平布局必须要满足以下的等式
   margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）
                   0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
                   0 + 0 + 0 + 200 + 0 + 0 + 600= 800
                   100 + 0 + 0 + 200 + 0 + 0 + 400= 800
                   100 + 0 + 0 + 200 + 0 + 0 + 500= 800
                    -以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
                      -调整的情况：
                          -如果这七个值中没有为 aute 的情况，则浏览器会自动调整margin-right值以使等式满足
                      -这七个值中有三个值可设置为 aute
                         width
                         margin-left
                         margin-right
                            -如果某个值为 aute，则会自动调整为aute的那个值以使等式成立
                              0 + 0+ 0 + aute + 0 + 0 + 0 = 800   aute=800
                              0 + 0+ 0 + aute + 0 + 0 + 200 = 800   aute=600
                              200 + 0+ 0 + aute + 0 + 0 + 200 = 800   aute=400
                           -如果将一个宽度和一个外边距设置为aute，则宽度会调整到最大，设置为aute的外边距会自动会零
                           -如果将三个值都设置为aute，则外边距会都是0，宽度最大
                           -如果将两个外边距设置为aute，宽度固定值，则会将外边距设置为相同值
                                所以我们经常会利用这个特点来使一个元素在其父元素中水平居中
                                   示例：
                                      width：xxxpx；
                                      margin：aute；
            */
        }
 
    </style>
</head>
<body>
      <div class="outer">
          <div class="inner"></div>
      </div>
</body>
</html>

 06.盒子模型- 垂直方向的布局

子元素是在父元素的内容区中排序的，
  如果子元素的大小超过了父元素，则子元素会从父元素中溢出
  使用 overflow 属性来设置父元素如何处理溢出的子元素
     可选值：
        visible.默认值 子元素会从父元素中溢出，在父元素外部的位置显示
          hidden 溢出的内容将会被裁剪不会显示
          scroll 生成两个滚动条，通过滚动条来查看完整的内容
          auto 根据需要生成滚动条

       overflow-x:
       overflow-y:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            background-color: #bfa;
            /*默认情况下父元素的高度被内容撑开(没有定义长和高时)
            */
        }
        .inner{
            width: 100px;
            background-color: yellow;
            height: 100px;
            margin-bottom: 100px;
        }
        .box1{
            width:200px;
            height: 200px;
            background-color: #bfa;
            /*
            子元素是在父元素的内容区中排序的，
              如果子元素的大小超过了父元素，则子元素会从父元素中溢出
              使用 overflow 属性来设置父元素如何处理溢出的子元素
                 可选值：
                    visible.默认值 子元素会从父元素中溢出，在父元素外部的位置显示
                      hidden 溢出的内容将会被裁剪不会显示
                      scroll 生成两个滚动条，通过滚动条来查看完整的内容
                      auto 根据需要生成滚动条
                   overflow-x:
                   overflow-y:
                 */
         /*   overflow: auto;*/
           /* overflow-x:scroll;*/
         /*   overflow-y: scroll;*/
        }
        .box2{
            width: 100px;
            height: 400px;
            background-color: orange;
        }
 
    </style>
 
</head>
<body>
<!--  例一  <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>-->
 
  <!-- &amp;lt;!&amp;ndash;例二&amp;ndash;&amp;gt; <div class="box1">
        <div class="box2"></div>
    </div>-->
    <div class="box1">
        
       南朝梁刘勰《文心雕龙·明诗》：“观其结体散文，直而不野，婉转附物，怊怅切情：实五言之冠冕也。”（此所引为见《文心雕龙》卷二《明诗》第六，为评论《古诗十九首》之句子。此与上句《海赋》中引文，俱解释为散布、铺陈的意思。
    </div>
 
 
</body>
</html>

 07盒子模型- 外边距的重叠

 

垂直外边距的重叠（折叠）
  –相邻的垂直方向的外边距会发生重叠现象
  -兄弟元素
     -兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
     –特殊情况：
        如果相邻的外边距一正一负，则取两者的和
        如果相邻的外边距都是负值，则取两者中绝对值较大的

     -兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

   -父子元素
     -父子元素间相邻外边距，子元素的会传递给父元素（上边距）
     -父子外边距的折叠会影响到页面的布局，必须要进行处理
     (重点)
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 , .box2{
            width: 200px;
            height: 200px;
            font-size: 100px;
        }
        /*
        垂直外边距的重叠（折叠）
          -相邻的垂直方向的外边距会发生重叠现象
          -兄弟元素
             -兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
             -特殊情况：
                如果相邻的外边距一正一负，则取两者的和
                如果相邻的外边距都是负值，则取两者中绝对值较大的
             -兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
           -父子元素
             -父子元素间相邻外边距，子元素的会传递给父元素（上边距）
             -父子外边距的折叠会影响到页面的布局，必须要进行处理
             (重点)
        */
        .box1{
            background-color: #bfa;
            /*设置一个下外边距*/
            margin-bottom: 100px;
        }
        .box2{
            background-color: orange;
            /*设置一个上外边距*/
            margin-top: 100px;
        }
        .box3{
            width: 200px;
            height: 199px;
            background-color: #bfa;
         /*   padding-top: 100px;*/
            border-top: 1px red solid;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 99px;
        }
 
    </style>
</head>
<body>
  <!--  <div class="box1"></div>
    <div class="box2"></div>-->
 
    <div class="box3">
        <div class="box4"></div>
    </div>
 
</body>
</html>

08 盒子模型-行内元素的盒模型 

 行内元素的盒模型
     –行内元素不支持设置宽度和高度
     –行内元素可以设置padding，但是垂直方向padding不会影响整体网页的布局
     –行内元素可以设置border，垂直方向的border不会影响页面布局
     –行内元素可以设置margin，垂直方向的margin不会影响页面布局
 

display 用来设置元素显示的类型
  可选值：
     inline 将元素设置为行内元素
     block 将元素设置为块内元素
     inline–block 将元素设置为行内块元素
         行内块，既可以设置宽度和高度又不会独占一行
      table 将元素设置为一个表格
      none 元素不在页面中显示

    visiblity 用来设置元素的显示状态
      可选值：
         visible 默认值，元素在页面中正常显示
         hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置
 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .s1{
            background-color: yellow;
            /*
             行内元素的盒模型
                  -行内元素不支持设置宽度和高度
                  -行内元素可以设置padding，但是垂直方向padding不会影响整体网页的布局
                  -行内元素可以设置border，垂直方向的border不会影响页面布局
                  -行内元素可以设置margin，垂直方向的margin不会影响页面布局
            */
            /*width: 10px;
            height: 100px;*/
           /* padding: 100px;*/
         /*   border: 100px solid red;*/
            margin: 100px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
 
        a{
            /*
            display 用来设置元素显示的类型
              可选值：
                 inline 将元素设置为行内元素
                 block 将元素设置为块内元素
                 inline-block 将元素设置为行内块元素
                     行内块，既可以设置宽度和高度又不会独占一行
                  table 将元素设置为一个表格
                  none 元素不在页面中显示
                visiblity 用来设置元素的显示状态
                  可选值：
                     visible 默认值，元素在页面中正常显示
                     hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置
            */
        /*    display: none;*/
 
            visibility: hidden;
 
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
 
    <a href="javascrip">超链接</a>
    <span class="s1">我是span</span> <span class="s1">我是span</span>
    <div class="box1" ></div>
</body>
</html>

09盒子模型- 浏览器的默认样式 

重置样式表：
     专门用来对浏览器的样式进行重置
       rest.css 直接去除了浏览器的默认样式
       normalize.css 对默认样式进行了统一
默认样式：
   -通常情况，浏览器都会为元素设置一些默认样式
   -默认样式的存在会影响到页面的布局，
        通常情况下编写页面时必须要去除浏览器的默认样式（PC端的页面）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入 rest.css
    -->
   <!-- <link rel="stylesheet" href="./CSS/rest.css">-->
    <link rel="stylesheet" href="./CSS/normalize.css">
    <!--
       重置样式表：
            专门用来对浏览器的样式进行重置
              rest.css 直接去除了浏览器的默认样式
              normalize.css 对默认样式进行了统一
          -->
    <style>
        /*
          默认样式：
             -通常情况，浏览器都会为元素设置一些默认样式
             -默认样式的存在会影响到页面的布局，
                  通常情况下编写页面时必须要去除浏览器的默认样式（PC端的页面）
        */
     /*   body{
            margin: 0;
        }
        p{
            margin: 0;
        }
        ul{
            margin: 0;
            padding: 0;
            !*去除项目符号*!
            list-style: none;
            margin-left: 20px;
        }*/
        /*把网页所有元素都去除掉*/
       /* *{
            margin: 0;
            padding: 0;
        }*/
 
        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
 
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
 
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>

 此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习。若对码友有用可参考！！！

原文地址:https://blog.csdn.net/weixin_58264104/article/details/125548275

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_45844.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 html5网页播放器视频切换、倍速切换、视频预览的代码实例
下一篇 Canvas元素

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。