css盒子模型详解

最新推荐文章于 2024-05-26 14:33:41 发布

谦虚且进步

最新推荐文章于 2024-05-26 14:33:41 发布

阅读量2.3w

点赞数 37

分类专栏： css3 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44992737/article/details/125217906

版权

一，什么是盒子模型？

二，盒子模型内容context部分详解

1，内容context部分的大小如何确定？

2，如何手动修改内容context的大小？

一，什么是盒子模型？

css的盒子模型，英文名为box model，属于直译翻译。而实际上，这个叫法十分贴切，因为html页面中的各种元素标签就像一个个盒子一样堆在一起，类似于生活中快递店铺里面堆成一座小山的快递。

所以，盒子模型是指：html中的各个元素都类似一个一个的盒子里面的物品，但是却叫做css盒模型，是因为css盒模型像一个盒子，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版。下图就是一个盒子模型的示意图：

1，上面图中蓝色方框指的是html元素，也是内容部分context，可以是一张图片、一个h1标题、一个表格、一个表单等。但是他的大小并不一定是100×100，而是可以修改的。属性width和height用于修改内容部分的大小。

2，绿色部分，也就是padding部分，指的是内边距，是元素内容与其最近一层束缚框的距离，类似于在一个方格里写字我们写在方格的中间，而与边框保持一定距离一样。

3，浅橘色部分，也就是border部分，指的是这个边框的宽度，我们常见的就是宽度为1，也就是一条线。

4，深橘色部分，也就是margin部分，也叫边缘部分，类似于人与人之间保持一定的距离一样，他的作用是保证html元素之间的距离，比如网页上的两种图片需要保持一定的间距才显得好看。

5，padding，border，margin实际上是每个html元素都存在的css属性。他们可以对元素的上下左右四个方向进行限制。

6，当存在盒子里嵌套盒子时，也就是html的标签嵌套时，里面的元素默认以左上角作为停靠点。

7，盒子模型可用简记为：4个矩形套娃。

<body>
    <h1 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">标题1</h1>
    <h1 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">标题2</h1>
</body>

网页显示如下：

二，盒子模型内容context部分详解

1，内容context部分的大小如何确定？

通常由内容大小自动确定，也是默认的方法。例如<img>标签引入一张图像，那么图像盒子的内容context部分的大小就是图片的像素大小。

2，如何手动修改内容context的大小？

使用css属性width和height来确定长度和高度。假如不设置width，一些块级元素会自动占一行，也就是100%的屏幕宽度。行内元素不受width和height属性的影响，只受元素内容的影响，由元素内容将内容部分的矩形撑开。width和height属性的单位有：px和%，px指的是像素，%指的是占html整体容器的宽度的百分比。

示意图如下：

三，盒子模型内边距padding部分详解

1，什么是内边距padding？

元素内容距离盒子边框的距离就是内边距，他并不是上下左右的大小相等。css盒模型在元素基础上多了border和margin属性，目的是便于布局，让网页好看。padding属性是一个整体概念，统管上下左右四个方向，细致地分还有：padding-top，padding-left等，使用-隔开而不是下划线_隔开。单位是：px(使用频率最高)和%占比。