做前端的都知道,盒子模型是我们前端开发网页必须要用的布局方法,当然了,盒子模型只是一个统称,那么下面我们就来具体说下盒子模型的种类有哪些。
盒子模型主要分为三大类:标准盒子模型,IE盒子模型,弹性盒子
这篇文章当中主要讲一下标准盒子模型以及IE盒子模型
一、标准盒子模型
在W3C标准下,盒子模型从外到里分别为magin(外边距)、border(边框)、padding(内边距)、content(内容)如下图:
从上图我们可以清晰的观察到,盒子模型从外向里的结构。
此时,需要注意的是,此时我们通过CSS样式给元素添加的width和height属性是给content部分添加的,那么这样一来代表了什么呢?
也就是说,此时我们给该元素添加的任何padding,border,和magin属性都会占据空间
- 添加padding属性会使容器向外扩张,从而达到容器内容与边界产生距离的效果
- 添加border属性同样会占据一定空间,占据空间依边框宽度而定
- 添加margin属性会与相邻元素产生间距。
通过以上3条,我们不难得出一个元素的实际占用空间大小,看下图:
从上图不难看出,该元素实际宽度为 10+5+70+5+10=100px
高度算法与宽度算法一致。
margin属性
在CSS样式中magin属性有以下四种写法
margin: 10px 20px 30px 40px; /*上 右 下 左*/
margin: 10px 20px 30px;/* 上 左右 下*/
margin: 10px 20px;/*上下 左右 */
margin: 10px;/*上右下左*/
另外需要注意,垂直方向上的magin属性会出现外边距合并现象,如下图:
通过图片我们不难理解这一现象。
padding属性
padding的四种写法与margin相同
border属性
border-radius属性可以为边框添加圆角边框,一共有8个值,但是通常我们会用4个值来操作,分别为左上角,右上角,右下角,左下角。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角</title>
<style>
#div1{
width: 100px;
height: 100px;
border: 5px solid orange;
border-radius:5px 10px 20px 30px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
效果图如下:
我们不难发现值越大,边框弧度越大。
二、IE盒子模型
IE盒子模型也叫变态盒子模型IE盒子与标准盒子模型的区别在于,给元素设定的width和height属性范围为 border+padding+content
如下图:
那么,如何实现IE盒子模型呢
我们只需要给想要变成IE盒子模型的元素添加box-sizing:border-box
这样一来,我们再给元素添加padding以及border属性时,元素就会在我们设定的宽度和高度内自动调节。而不会在像外扩张。
注:以上图片来自于网络