CSS-宽度分离原则

最新推荐文章于 2022-12-22 17:24:25 发布

友人C君~

最新推荐文章于 2022-12-22 17:24:25 发布

阅读量585

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/CWH0908/article/details/88256529

版权

CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

宽度分离原则

即CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性一同使用，即一个div的宽度设计分离成一个父div给定width属性，一个子div在父div下给定padding/border这些属性，如此一来，便于维护，在width不变的情况下（width不改变，只），只需要修改padding/border值就可以完成

初始条件：总宽度要求102px，此时width:100px;border:1px;

情形一：要求padding:10px;

未分离方式操作：需要padding:10px;为了让总宽度为102px不变，且需要修改width为80px

分离宽度操作：父元素设定width:102px;子元素设定padding:10px;（由于子元素width使用默认值auto，所以自动填满父级容器，又由于子元素设定了padding值，由于流的特性自动计算，满足子元素总宽度102px，且padding值为10px即自动计算width值）

情形二：要求padding:20px;

未分离方式操作：需要padding:20px;为了让总宽度为102px不变，且需要修改width为60px

分离宽度操作:只需要修改padding值为20px，此时由于父元素width:102px不变，子元素自动得出width值，不需要手动修改

完整代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	body,html{
		width: 100%;
		height: 100%;
	}
	#main{
		width: 80%;
		height: auto;
		background: darkgray;
	}
	.one{
		width: 60px;
		padding: 20px;
		border: 1px solid black;
		background: cornflowerblue;
	}
	.father{
		width: 102px;
	}
	.son{
		padding: 20px;
		border: 1px solid black;
		background: yellow;
	}
	
</style>

</head>
<body>
	<div id="main">
		<div class="one">
			宽度还未分离
		</div>
		<br />
		<div class="father">
			<div class="son">
				宽度分离原则
			</div>
		</div>
	</div>
</body>
</html>

友人C君~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-宽度分离原则

宽度分离原则即CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性一同使用，即一个div的宽度设计分离成一个父div给定width属性，一个子div在父div下给定padding/border这些属性，如此一来，便于维护，在width不变的情况下（width不改变，只），只需要修改padding/border值就可以完成初始条件：...
复制链接

扫一扫

专栏目录