页面布局技巧:CSS盒子模型

一.前言

在网页设计中,CSS的盒子模型是至关重要的。简单来说,每个HTML元素都被视为一个盒子,就像是一个容器,用来包裹元素的内容。这个"盒子"不是实体的三维物体,而是在二维平面上的一个虚拟概念。想象一下,你在设计网页时,每个元素都是一个盒子,你可以通过CSS来控制这些盒子的大小、边距、边框和填充,从而实现网页的布局和样式。这种盒子模型的概念是网页布局中的基础,也是我们进行网页设计时必不可少的工具之一。

接下来让我们一起揭开盒子模型的神秘面纱吧!

二.盒子的组成

一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)。content是HTML元素的内容,而margin、border、padding是CSS属性,因此可以通过这三个属性来控制盒子的大小。话不多说,直接上图:

三.盒子的大小

在css中认为盒子的大小指的是盒子的宽度和高度。刚认识盒子模型时容易将宽度和高度误解为width和height属性,实际上widthheight属性只是设置content(内容)部分的宽和高。

在默认情况下盒子真正的宽和高按下面公式计算:

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

用css属性表示该公式为:

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面的公式仅仅限于计算在默认情况下盒子的大小,那么在非默认情况下,应该怎么计算盒子的实际大小呢?

在这里要为大家介绍一个新朋友-box-sizing属性值

IE盒子模型(border-box) :这种盒子模型在早期的Internet Explorer浏览器中被广泛采用,但现在也被其他现代浏览器支持。在IE盒子模型中,width和height属性确定了整个盒子的尺寸,包括内容、内边距、边框。换句话说,内边距和边框会被包含在设定的宽度和高度内,而不会额外增加盒子的尺寸。

四.盒子模型演示

默认属性(content-box):

xml 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title>
<style>
div {
    background-color: lightgrey;
    width: 200px;
    border: 30px solid red;
    padding: 30px;
    margin: 30px;
    /*不会超出容器*/
    /*box-sizing: border-box;*/
    /*会超出容器*/
    /*box-sizing: content-box;*/
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>



<div>我时一个盒子。有 30px 内间距,30px 外间距、30px 红色边框。</div>

</body>
</html>

该盒子宽度为: 320(content + padding * 2 + border * 2) + 30 * 2 (margin * 2) = 380 px

IE盒子模型(border-box)

xml 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title>
<style>
div {
    background-color: lightgrey;
    width: 200px;
    border: 30px solid red;
    padding: 30px;
    margin: 30px;
    /*不会超出容器*/
    box-sizing: border-box;
    /*会超出容器*/
    /*box-sizing: content-box;*/
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>



<div>我时一个盒子。有 30px 内间距,30px 外间距、30px 红色边框。</div>

</body>
</html>

该盒子宽度为:200 (width) + 30 * 2 (margin * 2) = 260

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试