box-sizing学习笔记

本文介绍了CSS盒模型的基本概念及box-sizing属性的作用。通过示例展示了如何使用box-sizing:border-box来更直观地控制元素的实际大小,特别是在布局设计中解决元素尺寸计算的问题。

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

如下就是常见的盒子模型。

设定大小就是给最中间的内容添加。box-sizing就是改变设定大小的对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				background: red;
				width: 100px;
				height: 100px;
				padding: 10px;
				border: 5px solid #000000;
				margin: 10px;

			}
		</style>
	</head>
	<body>
		<div id="box">
			box
		</div>
	</body>
</html>

添加box-sizing属性;

				/*
				 * content-box 默认,设置width,height就是内容区(content)的大小
				 * barder-box 设置width,height包含了border+padding+content(ie6下默认模式)
				 * padding-box 浏览器不一定支持,设置width,height包含了padding+content
				 * */
				/*默认*/
				/*box-sizing: content-box;*/

在样式中添加 box-sizing: border-box;

明显变小了

使用场景:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				background: red;
				width: 100px;
				height: 100px;
				padding: 10px;
				border: 5px solid #000000;
				margin: 10px;
				/*
				 * content-box 默认,设置width,height就是内容区(content)的大小
				 * barder-box 设置width,height包含了border+padding+content(ie6下默认模式)
				 * padding-box 浏览器不一定支持,设置width,height包含了padding+content
				 * */
				/*默认*/
				/*box-sizing: content-box;*/
				
				box-sizing: border-box;
			}
			
			#footer{
				overflow: hidden;
				padding: 10px;
				background: #CCCCCC;
			}
			#footer div{
				float: left;
				width: 50%;
			}
			#left{
				background: blue;
			}
			#right{
				background: green;
			}
		</style>
	</head>
	<body>
		<div id="box">
			box
		</div>
		<hr />
		<div id="footer">
			<div id="left">
				left
			</div>
			<div id="right">
				right
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>
		</div>
	</body>
</html>

但如果要在中间添加一个分割线


它会因为超出而换行

添加box-sizing: border-box后可以解决



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值