div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

工作中div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

1. 如果是margin超出父元素的, 可以使用display: flex;  属性
 

html代码:

<div class="container">
	<div class="box" >
		这是测试的一句话
	</div>
</div>

CSS代码:

<style type="text/css">
	.container {
	    width: 200px; 
		border: 1px solid;
    }
			
    .box {
		width: 100%; 
		margin: 20px; 
		border: 1px solid red; 
	}
</style>

使用display: flex;属性后

html代码不动, css 代码修改为:

<style type="text/css">
	.container {
	    width: 200px; 
		border: 1px solid;
        /* 多了此属性 */
        display: flex;
    }
			
    .box {
		width: 100%; 
		margin: 20px; 
		border: 1px solid red; 
	}
</style>

2. 如果是padding超出父元素的, 有两种方法

方法1: 可以使用display: flex;  属性 与 margin 一样, 不再多说.

方法2: 使用 box-sizing: border-box;  (此属性对margin无效)  

(box-sizing详细属性 CSS box-sizing 属性 )

有问题时截图

.container {
	width: 200px; 
	border: 1px solid;
}
			
.box {
	width: 100%; 
	padding: 20px; 
	border: 1px solid red; 
}

增加box-sizing: border-box;属性 后的截图

.container {
	width: 200px; 
	border: 1px solid;
}
			
.box {
	width: 100%; 
	padding: 20px; 
	border: 1px solid red; 
    /* 多了此属性 */
    box-sizing: border-box;
}

以上仅个人观点!