大家好，欢迎来到IT知识分享网。
做前端的都知道，盒子模型是我们前端开发网页必须要用的布局方法，当然了，盒子模型只是一个统称，那么下面我们就来具体说下盒子模型的种类有哪些。
盒子模型主要分为三大类：标准盒子模型，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属性时，元素就会在我们设定的宽度和高度内自动调节。而不会在像外扩张。
注：以上图片来自于网络
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/149833.html
