加padding之后盒子會被撐大的解決辦法
盒子代碼:
div{
margin:0 auto;
margin-top:400px;
width:100px;
height:100px;
text-align: center;
border:2px solid black;
}
</style>
</head>
<body>
<div>我是內容</div>
運行示例
這是正常的頁面 然后我們給內容部分加個padding:10px;
效果如下：
我們可以看到 現在盒子寬度是：100+兩個padding+兩個border=124px;
同理 寬度是：100+兩個padding+兩個border=124px;
很明顯的 盒子被撐大了
然后我們加入如下代碼
box-sizing: border-box;
我們再看下運行截圖：
我們看到瀏覽器自動計算了內容的寬高從而保持原有的高度和寬度
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/40114.html
標籤：其他
上一篇：arcgis老出錯
下一篇：求波士頓機械狗動圖！