盒子模型基础用法一

盒子模型定义

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

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

盒子模型结构

模型、盒子模型、框模型(box model) 相当于快递

  1. 内容区(content) 相当于 放具体内容 冰箱

  1. 内边距(padding) 相当于 泡沫

  1. 边框 (border) 相当于 纸箱子

  1. 外边距(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>
注意:

外边距指的是当前盒子与其他盒子之间的距离,

他不会影响可见框的大小,而是会影响到盒子的位置。

盒子有四个方向的外边距:(边演示,边总结)

margin-top

上外边距,设置一个正值,元素会向下移动

margin-right

默认情况下设置margin-right不会产生任何效果

margin-bottom

下外边距,设置一个正值,其下边的元素会向下移动,挤别人

margin-left

左外边剧,设置一个正值,元素会向右移动

由于页面中的元素都是靠左靠上摆放的,

所以当我们设置上和左外边距时,会导致盒子自身的位置发生改变,

而如果是设置右和下外边距会改变其他盒子的位置(挤别人)

外边距也可以指定为一个负值,

如果外边距设置的是负值,则元素会向反方向移动

外边距同样可以使用简写属性 margin,可以同时设置四个方向的外边距,

规则和padding一样

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值