盒子练习（重点掌握）

最新推荐文章于 2023-04-12 14:16:11 发布

别忘了缩进

最新推荐文章于 2023-04-12 14:16:11 发布

阅读量532

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_34737697/article/details/79185491

版权

29 篇文章 0 订阅

订阅专栏

  练习题 

  制作一个500*500px的红色大盒子，中间有个200*200px的小盒子，小盒子是水平垂直居中在大盒子中的。 

 
 方法1： 

  原理：在大盒子中设置内边距的值为150px，相应的在height和width的值上减去两倍的150，也就是300。 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title>练习</title> 

  <style> 

  .all{ 

  height: 200px; 

  width: 200px; 

  background-color: red; 

  padding: 150px; 

}

  .content{ 

  width: 200px; 

  height: 200px; 

  background-color: green; 

}

  </style> 

  </head> 

  <body> 

  <div class="all"><div class="content"></div></div> 

  </body> 

  </html> 

 
 方法2： 

  原理：在大盒子中设置box-sizing: border-box;来限制盒子。这时就不用修改w/h 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title>练习</title> 

  <style> 

  .all{ 

  box-sizing: border-box; 

  height: 500px; 

  width: 500px; 

  background-color: red; 

  padding: 150px; 

}

  .content{ 

  width: 200px; 

  height: 200px; 

  background-color: green; 

}

  </style> 

  </head> 

  <body> 

  <div class="all"><div class="content"></div></div> 

  </body> 

  </html> 

 
 方法3： 

  原理：给小盒子设置外边距margin属性，此时注意，如果直接添加margin=150px，则会出现下面的情况 

  那怎么才能避免这种问题，方法是：给大盒子加border边框属性，即可。 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title>练习</title> 

  <style> 

  .all{ 

  border: 1px solid ; 

  height: 500px; 

  width: 500px; 

  background-color: red; 

}

  .content{ 

  width: 200px; 

  height: 200px; 

  background-color: green; 

  margin: 150px; 

}

  </style> 

  </head> 

  <body> 

  <div class="all"><div class="content"></div></div> 

  </body> 

  </html> 

  注意点： 

  在企业开发中处理盒子嵌套，应当首先考虑padding，其次考虑margin，margin本质上是用于控制兄弟关系之间的间隙的 

关注

专栏目录