CSS——box-sizing（固定宽度和高度）

1. 允许我们在元素的总宽度和高度中包括内边距和边框，这样可以控制最外总边框的宽度和高度。

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}
</style>
</head>
<body>

<div class="div1">现在，两个 div 的尺寸是一样的！</div>
<br>
<div class="div2">Hello！</div>

</body>
</html>

posted @ 2022-10-14 16:53  新兵蛋Z  阅读(118)  评论(0)    收藏  举报