盒子模型练习2

tech2025-02-01  17

<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> *{padding: 0px;margin: 0px;} .big { width: 500px; height: 500px; background-color: blue; border: 5px solid red; padding-top: 150px; padding-left: 150px; box-sizing: border-box; } .small { width: 200px; height: 200px; background-color: yellow; /*margin-top: 150px; margin: 150px auto; */ /* 注意点: 1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来 2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性 3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin margin本质上是用于控制兄弟关系之间的间隙的 */ } </style> </head> <body> <div class="big"> <div class="small"></div> </div> </body> </html>
最新回复(0)