盒子模型
一、模型的概述
可以把一个网页分解成一个个区域,大的区域内部可以嵌套小的区域,就像博客首页一样。
红色的区域是最大的区域,整个网页由两部分红色区域组成,蓝色区域在红色区域之中,绿色区域最小。每个区域都可以看做一个盒子,一个网页就是由一个个大大小小的盒子嵌套而成。
盒子之间或内外是有边距的,通过以下属性控制盒子的边距
- margin:外边距
- padding:内边距
盒子模型还会涉及到我们之前学过的一个属性
- border:设置元素的边框
二、盒子的属性
margin
margin属性可以控制元素的外边距,简单的说就是设置margin的这个元素与其相邻的元素或外部容器元素的距离,对应有四个属性,上下左右:
- margin-top:上外边距
- margin-bottom:下外边距
- margin-left:左外边距
- margin-right:右外边距
以margin-top属性为例
代码如下(示例):
.box1{
width:300px;
height:300px;
background-color: #f00;
}
.box2{
width:300px;
height:300px;
background-color: #0f0;
margin-top:50px;
margin-left:80px;
}
如代码所示,box2因为设置了margin-top:50px;它与相邻的box1之间有了50px的距离,来看下一个例子。
代码如下(示例):
.box1{
width:300px;
height:300px;
background-color: #f00;
}
.box2{
width:100px;
height:100px;
background-color: #0f0;
margin:50px 0 0 80px;
}
margin设置多个值,设置如下:
- margin:value - 将上下左右都设置成value值
- margin:value1 value2 value3 value4; - 4个值分别是上右下左
- margin:value1 value2; - 第一个值表示上下,第二个值表示左右
- margin:value1 value2 value3; -第一个值表示上,第二个值表示左右,第三个值表示下。
关于margin属性还有一个常用的技巧,可以将块元素水平居中展示(关于块元素的更多内容,会在后续讲解。)
定义一个class为box的div
代码如下(示例):
.box{
width:100px;
height:100px;
background-color:red;
/* 为margin设置两个值,第一个值为上下的外边距,第二个值为左右的外边距。 */
margin:0 auto;
}
左右外边距的值设置为auto,元素就会根据其父级容器的实际宽度,将元素左右两边的外边距设置为相同的值,这样元素就实现了水平居中的效果。
padding
padding属性可以控制元素的内边距,简单的说就是控制容器与内部元素之间的距离,与margin一样,padding也有对应的四个属性分别表示上下左右
- padding-top:上内边距
- padding-bottom:下内边距
- padding-left:左内边距
- padding-right:右内边距
我们以padding-top为例
代码如下(示例):
.box1{
width:300px;
height:300px;
background-color: #f00;
padding-top:50px;
}
.box2{
width:100px;
height:100px;
background-color: #0f0;
}
设置了padding之后,元素的宽度和高度会有变化,先保留这个问题,我们先看盒子模型的下一个属性。
border
我们在前几节内容中已经解除了border这个属性
代码如下(示例):
.box{
/* 设置一像素,红色,实现边框 */
border:1px solid red;
}
其实设置border样式是一个简写,它其实包含了三个属性
- border-style
- border-width
- border-color
上面的代码可以转换成完整的写法
代码如下(示例):
.box{
/* 边框宽度 */
border-width:1px;
/* 边框样式 */
border-style:solid;
/* 边框颜色 */
border-color:red;
}
关于border-style比较常用的值如下所示:
值 | 进行描述 |
---|---|
none | 定义无边框。 |
dotted | 定义点状边框。 |
dashed | 定义虚线 |
solid | 定义实线。 |
double | 定义双线。 |
了解以上内容之后,我们在后续的课程中,还是会继续简写border属性。这里顺便说一下,border属性简写的三个值是没有顺序要求的,
代码如下(示例):
.box{
border:blue 1px solid;
}
不会影响显示效果。
宽高的计算
在我们之前学习的内容中了解到通过width和height属性可以设置元素的宽高,但元素的实际宽高可能与我们设置的width和height属性不同。因为在默认情况下:
- 元素的实际宽度 = border-left + border-right + width + padding-left + padding-right
- 元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom
实例代码如下所示。
代码如下(示例):
.box{
width:300px;
height:300px;
background-color: #f00;
padding-left:50px;
border-right:50px solid blue;
}
我们可以看到,div元素的实际宽度是300+50+50=400px。
但是在实际开发中,为了方便计算,我们希望设置的width的值就是原生的实际宽度,不再希望考虑padding和border的加减运算,我们可以通过box-sizing属性实现这个功能
代码如下(示例):
.box{
width:300px;
height:300px;
background-color: #f00;
padding-left:50px;
border-right:50px solid blue;
box-sizing: border-box; /*原生的实际宽度就是width的宽度*/
}
通过设置box-sizing: border-box; 元素的实际宽度就是width设置的宽度,而padding和border的值是显示在width值内部的。
其实在实际开发中,将元素设置box-sizing: border-box;确实会给开发带来便利,所以我们可以在元素初始化的时候,将box-sizing: border-box;赋值给所有元素。
代码如下(示例):
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
order的值是显示在width值内部的。
其实在实际开发中,将元素设置box-sizing: border-box;确实会给开发带来便利,所以我们可以在元素初始化的时候,将box-sizing: border-box;赋值给所有元素。