css中box-sizing的使用场景

最新推荐文章于 2024-07-09 15:27:52 发布

xu3tu

最新推荐文章于 2024-07-09 15:27:52 发布

阅读量1.8k

点赞数 1

分类专栏：面试题文章标签：前端 CSS 面试

本文链接：https://blog.csdn.net/xu3tu/article/details/79153569

版权

面试题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先，要知道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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xu3tu

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css中box-sizing的使用场景

首先，要知道box-sizing是用来干啥的：改变盒模型中宽度和高度的定义范围。 border-box: width = content + padding + border ，也就是IE的盒怪异模式。 content-box:width = content 正常模式使用场景分析：当需要以content + padding + border为整体的时候使用border-box，例如
复制链接

扫一扫