CSS-宽度分离原则

宽度分离原则

     即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值，不需要手动修改

 

完整代码

	

		

			宽度还未分离
		
		

		

			

				宽度分离原则