盒子模型（标准盒子模型与IE盒子模型）

最新推荐文章于 2024-06-22 17:01:14 发布

笑苍穹v

最新推荐文章于 2024-06-22 17:01:14 发布

阅读量1.4k

点赞数 1

分类专栏： H5+CSS 文章标签：盒子模型 IE盒子模型标准盒子模型弹性盒子

本文链接：https://blog.csdn.net/qq_40818233/article/details/81330366

版权

H5+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

做前端的都知道，盒子模型是我们前端开发网页必须要用的布局方法，当然了，盒子模型只是一个统称，那么下面我们就来具体说下盒子模型的种类有哪些。

盒子模型主要分为三大类：标准盒子模型，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盒子模型呢

我们只需要给想要变成IE盒子模型的元素添加box-sizing：border-box

这样一来，我们再给元素添加padding以及border属性时，元素就会在我们设定的宽度和高度内自动调节。而不会在像外扩张。

注：以上图片来自于网络

笑苍穹v

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
盒子模型（标准盒子模型与IE盒子模型）

做前端的都知道，盒子模型是我们前端开发网页必须要用的布局方法，当然了，盒子模型只是一个统称，那么下面我们就来具体说下盒子模型的种类有哪些。盒子模型主要分为三大类：标准盒子模型，IE盒子模型，弹性盒子这篇文章当中主要讲一下标准盒子模型以及IE盒子模型一、标准盒子模型在W3C标准下，盒子模型从外到里分别为magin（外边距）、border（边框）、padding（内边距）、conten...
复制链接

扫一扫