页面布局技巧: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

相关推荐
非凡ghost7 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
馨谙7 小时前
/dev/null 是什么,有什么用途?
前端·chrome
JamSlade8 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保8 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo12158 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux8 小时前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied8 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果8 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
Luffe船长9 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y10 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid