css中box-sizing的使用场景

最新推荐文章于 2025-06-06 17:08:38 发布

原创最新推荐文章于 2025-06-06 17:08:38 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 CSS 面试

面试题专栏收录该内容

6 篇文章

订阅专栏

本文介绍CSS属性box-sizing的两种模式：border-box与content-box，并通过一个底部菜单栏的例子展示了border-box的实际应用场景。border-box模式下元素的总宽度包括了内容、内边距及边框，适用于需要精确控制布局的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，要知道box-sizing是用来干啥的：改变盒模型中宽度和高度的定义范围。

border-box: width = content + padding + border ，也就是IE的盒怪异模式。

content-box:width = content 正常模式

使用场景分析：当需要以content + padding + border为整体的时候使用border-box，例如：底部菜单栏等

以content padding border为一个整体来设置宽高度时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing使用场景分析</title>
</head>
<style>
	#menu-footer{
		position: fixed;
		bottom: 0;
		height: 100px;
		display: flex;
		width: 100%;
	}
	.btn{
		padding: 10px;
		width: calc(100% / 3);
		background-color: red;
	}
</style>
<body>
    <div id="menu-footer">
    	<div class="btn">
    		首页
    	</div>
    	<div class="btn">
    		设置
    	</div>
    	<div class="btn">
    		个人
    	</div>
    </div>
</body>
</html>