盒子模型基础用法一

最新推荐文章于 2024-07-17 16:17:24 发布

呆码王子

最新推荐文章于 2024-07-17 16:17:24 发布

阅读量86

点赞数 1

分类专栏： HTML 文章标签： html5 css 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/L123456llljdjdbd/article/details/129307338

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

盒子模型定义

盒子模型：就是将页面所有的元素都统一设置为一个个盒子，一个个矩形，在布局时，就不用考虑

元素的形状，只需要考虑元素的大小，大大的方便了页面的布局

盒子模型结构

模型、盒子模型、框模型（box model）相当于快递

内容区（content）相当于放具体内容冰箱

内边距（padding）相当于泡沫

边框（border）相当于纸箱子

外边距（margin）相当于快递离你的距离

影响盒模型大小是：内容区、内边距、边框，外边距不会影响到盒子的大小

内容区（content）

定义：

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

默认情况下，设置的width、height就是内容区的大小

<body>
    <div class="box1">
      郭以时苦是治使此磊。Lorem, ipsum dolor.
    </div>

<style type="text/css">

        .box1{
          width: 200px;
          height: 200px;
          background-color: #bfa;
        }
 </style>

内边距（padding）

定义：

内容区和边框之间的距离，它会影响到盒子的大小

<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>

<style type="text/css">
  .box1 {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        border: 10px solid orange;
        padding:40px;
      }
.box2{
         width: 100%;
         height: 100%;
         background-color: red;


       }

边框（border）

定义：

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

设置边框必须指定三个样式

border-width 设置边框大小

（1）、可以跟多个值，值与值之间用空格隔开

四个值上右下左

三个值上左右下

二个值上下左右

一个值上下左右

（2）、可以单独设置某一边宽度

top right left bottom

border-XXXX-width:;

（3）、有默认值，默认值大小是1-3px

border-style 设置边框的样式

(1)可选值：

solid 实线

double 双线

dotted 圆点虚线

dashed 虚线

(2)可以单独设置某一边的样式

border-XXX-style: ;

top bottom left right

（3）、没有默认样式，设置边框必须要设置

border-color 设置边框的颜色

（1）、可以放多个颜色值四个，三个，两个，一个

规则跟border-width是一样的

（2）、可以单独设置某一边颜色

border-XXX-color: ;

top bottom left right

（3）、有默认值，默认值是黑色

外边距（margin）

定义：

可以控制元素的位置，它不会改变盒子的大小

（1）margin-top 正值，盒子是向下移动，负值，盒子是向上移动

margin-right 设置是没有效果

margin-left 正值，盒子是向右移动，负值，盒子是向左移动

margin-bottom 盒子本身不动，盒子下方的元素，正值向下，负值向上

(2)margin 简写

后也可跟4个值，3个值，2个值，1个值

规则跟border-width也是一样

<body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>

<style type="text/css">
   
      .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        border: 10px solid red;
       
        margin:0 40px;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
    </style>