盒子模型定义
盒子模型:就是将页面所有的元素都统一设置为一个个盒子,一个个矩形,在布局时,就不用考虑
元素的形状,只需要考虑元素的大小,大大的方便了页面的布局
盒子模型结构
模型、盒子模型、框模型(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>
![](https://img-blog.csdnimg.cn/img_convert/c755195c6987a3983af877c7e8579a73.png)
内边距(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>
![](https://img-blog.csdnimg.cn/img_convert/d6aa29bb3fc0a1c49b89b4efe62c3e37.png)
注意:
外边距指的是当前盒子与其他盒子之间的距离,
他不会影响可见框的大小,而是会影响到盒子的位置。
盒子有四个方向的外边距:(边演示,边总结)
margin-top
上外边距,设置一个正值,元素会向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距,设置一个正值,其下边的元素会向下移动,挤别人
margin-left
左外边剧,设置一个正值,元素会向右移动
由于页面中的元素都是靠左靠上摆放的,
所以当我们设置上和左外边距时,会导致盒子自身的位置发生改变,
而如果是设置右和下外边距会改变其他盒子的位置(挤别人)
外边距也可以指定为一个负值,
如果外边距设置的是负值,则元素会向反方向移动
外边距同样可以使用简写属性 margin,可以同时设置四个方向的外边距,
规则和padding一样