盒子模型练习2
程序员文章站
2022-04-01 07:58:32
...
<!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>
上一篇： ITK学习笔记——RGB图像读取写入
下一篇： ITK的安装与测试（Ubuntu系统）