盒子模型

盒子模型,学习了css以后  发现现在用的最多的选择器是class,代码先记一下。毕竟以后忘记了看见代码想到的总会比看不到想到的多许多。

<meta charset="UTF-8">
<title></title>
<style>
.out{
width: 200px;
height: 200px;
border: 4px solid black;
position: relative;
padding: 10px;
}

.in{
width: 50px;
height: 50px;
background-color: red;
position: relative;
margin-left: 30px;
margin-top: 30px;
margin-bottom: 30px;
z-index: 20;
}
.in2{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
z-index: 10;
margin: -50px 0px 0px 0px;

}
</style>
</head>
<body>
<div class="out">
<div class="in">ABCD</div>
<div class="in2">EFGH</div>
</div>
<input style="margin: 100px;padding: 5px 0px 0px 30px;" type="text" />
</body>

 还有感慨就是熟能生巧,卖油翁的故事非常深刻

posted @ 2017-07-16 19:35  壹路桐行丨  阅读(86)  评论(0编辑  收藏  举报