12.1
今天老高给我们讲了一下position,我们知道了一些定位的相对位置,接下来讲了margin和padding,我们也知道了一些标记相对于边框的间距,感觉收获挺多的,同时老高的一些话我还是感触良多的,我们现在应该努力规划自己的生活了,不能再浑浑噩噩了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.sb{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!--fixed:脱离文档流,相对于body进行定位-->
<!--<div style="border: 1px solid black; width: 600px;height: 600px;">
<div class=sb style="background-color: red;"></div>
<div class=sb style="background-color: blue; position: fixed;bottom: 15px;right: 15px;"></div>
<div class=sb style="width: 300px;background-color: green;"></div>
</div>-->
<!--relative:不会脱离文档流,相对于自身定位-->
<!--<div style="border: 1px solid black; width: 600px;height: 600px;">
<div class=sb style="background-color: red;"></div>
<div class=sb style="background-color: blue; position: relative;bottom: 15px;"></div>
<div class=sb style="width: 300px;background-color: green;"></div>
</div>-->
<!--absolute:脱离文档流,相对于positions为非static的副标记定位-->
<div style="border: 1px solid black; width: 600px;height: 600px; position: relative;">
<div class=sb style="background-color: red;"></div>
<div class=sb style="background-color: blue; position: absolute;bottom: 15px;"></div>
<div class=sb style="width: 300px;background-color: green;"></div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
background-color: red;
}
/*margin用于设置当前标记距离其它标记的间距*/
/*padding用于设置当前标记里的元素相对于此边框的间距(如:此蓝色边框中的"Hello World"相对于蓝色边框的位置)*/
i{
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/*margin:50px;*//*上下左右都间距50px*/
/*margin:10px 20px;*//*上下间距10px,左右间距20px*/
/*margin:10px 30px 20px;*//*上边间距10px,左右间距30px,下边间距20px*/
/*margin:10px 20px 30px 40px;*//*上边间距10px,右边间距20px,下边间距30px,左边间距40px(顺时针)*/
/*padding:20px;*//*上下左右都是20px*/
/*padding:20px 10px;*//*上下20px,左右10px*/
/*padding:10px 20px 30px;*//*上10px,左右20px,下30px*/
/*padding:10px 20px 30px 40px;*//*上10px,右20px,下30px,左40px(顺时针)*/
display: inline-block;
background-color: blue;
}
</style>
</head>
<body>
<div style="border: 1px solid black;">郑州市河南工业大学</div>
<span>郑州</span><i>Hello World</i><span>郑州</span>
<div style="border: 1px solid black;">郑州市河南工业大学</div>
</body>
</html>