描述
==加了内边距撑开盒模型 属于外扩区域 必须内减计算 当你遇见%和px内减时，此时你可以按照以下两种方法做：==
总结：
宽度%时+内边距 ---》溢出
不想溢出
1. calc(n% - mpx)
2. auto 自动内减 ，不溢出,不外扩
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { width: 500px; height: 300px; background-color: thistle; /* 内边距不能放内容 填背景色 */ padding: 30px; } .b { /* 取父盒子宽度的所有有效内容区 css计算方法: calc(100% - 40px) 运算符左右 两侧必须打空格*/ /* calc(100% - 40px); */ width:auto; height: 150px; background-color: tomato; padding: 0px 20px; /* 总结： 宽度%时+内边距 ---》溢出 不想溢出 1. calc(n% - mpx) 2. auto 自动内减 ，不溢出 */ } </style> </head> <body> <div class="a"> <div class="b">新华社北京8月11日电（记者曹筱凡）新冠疫情冲击之下，世界经济增长图景黯淡。上半年，中国经济运行先降后升、稳步复苏。受益于中国经济复苏和消费反弹，不少外企在华销售业绩亮眼，成为对冲其本国业务下滑的“正资产”。从繁荣期的“聚宝盆”，到疫情下的“避难所”， 中国经济展现出的巨大韧性和潜力，持续增强全球企业对中国市场的信心。</div> </div> </body> </html>