盒子模型你了解吗？

最新推荐文章于 2023-09-03 21:39:32 发布

摸鱼馆er

最新推荐文章于 2023-09-03 21:39:32 发布

阅读量618

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_73032457/article/details/126146807

版权

盒模型的定义

内容区（content）

边框（border）

内边距（padding）

外边距（margin）

1.盒模型的定义：盒模型又称盒模型、盒子模型、框模型（box model），其由内容区（content）

边框（border）内边距（padding）外边距（margin）.

* 影响盒子大小的元素：内容区，边框，内边距，外边距不影响盒子的大小

2.内容区(content)

元素中所有的子元素和文本内容都在内容区中排列

width 设置内容区的宽度

height 设置内容区的高度

 .box{
      /* 设置内容区宽高*/
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    
    </style>
  </head>
  <body>
      <main class="box">
         <div class="box1"></div>
      </main>
  </body>
</html>

2、边框（border）元素设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

设置边框必须指定三个样式分别是颜色，大小，样式

border-color: ; 设置边框的颜色

（1）、有默认值，默认颜色是黑色

（2）、可以写多个颜色以空格隔开

4个上右下左

3个上左右下

2个上下左右

1个上下左右

(3)、border-xxx-color 特指 top right bottom left 某一边颜色

border-width: ; 设置边框的大小

（1）、默认值默认值大概1-3px

（2）、也可以跟多个值以空格隔开

4个上右下左

3个上左右下

2个上下左右

1个上下左右

（3）、border-xxx-width 特指 top right bottom left 某一边宽度

border-style: ; 设置边框的样式

（1）、默认值 none

（2）、solid 实线

dashed 虚线

dotted 点状虚线

double 双线

*小科普：箭头设置

.box1{
        width: 0px;
        height: 0px;
        border: 20px solid red;
        border-color:transparent  transparent  red transparent;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box"></div> -->
    <div class="box1"></div>
  </body>
</html>

border简写用法

border:颜色，大小，样式;

border-top:颜色，大小，样式;

border-right:颜色，大小，样式;

border-bottom:颜色，大小，样式;

border-left:颜色，大小，样式;

  .box {
        /* 设置box的内容区的大小 */
        width: 200px;
        height: 200px;
        background-color: rgb(222, 255, 170);
        /* border-color:red ;
        border-width: 5px;
        border-style: double; */
        /* border-left: 10px red dashed;
        border-top:10px green solid ;
        border-right: 10px blue  dotted; */
        border: 10px solid red;
        border-bottom: none;
        border-left-color: blue;
        border-top-width: 30px;

      }

剩下的内外边距，明天同一时间不见不散！

摸鱼馆er

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型你了解吗？

盒模型又称盒模型、盒子模型、框模型（box model），其由内容区（content）边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部。边框（border）内边距（padding）外边距（margin）.（3）、border-xxx-width 特指。* 影响盒子大小的元素：内容区，边框，内边距，外边距不影响盒子的大小。border-bottom:颜色，大小，样式;border-right:颜色，大小，样式;dotted 点状虚线。border-left:颜色，大小，样式;...
复制链接

扫一扫