CSS中內邊距和寬度內減
阿新 • • 發佈：2020-08-12
描述
==加了內邊距撐開盒模型 屬於外擴區域 必須內減計算 當你遇見%和px內減時，此時你可以按照以下兩種方法做：==
總結：
寬度%時+內邊距 ---》溢位
不想溢位
1. calc(n% - mpx)
2. width: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) 運算子左右 兩側必須打空格*/ /* width: calc(100% - 40px); */ width:auto; height: 150px; background-color: tomato; padding: 0px 20px; /* 總結： 寬度%時+內邊距 ---》溢位 不想溢位 1. calc(n% - mpx) 2. width:auto 自動內減 ，不溢位*/ } </style> </head> <body> <div class="a"> <div class="b">新華社北京8月11日電（記者曹筱凡）新冠疫情衝擊之下，世界經濟增長圖景黯淡。上半年，中國經濟執行先降後升、穩步復甦。受益於中國經濟復甦和消費反彈，不少外企在華銷售業績亮眼，成為對衝其本國業務下滑的“正資產”。從繁榮期的“聚寶盆”，到疫情下的“避難所”， 中國經濟展現出的巨大韌性和潛力，持續增強全球企業對中國市場的信心。</div> </div> </body> </html>