<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
width: 100px;
border: 2px aquamarine solid;
text-align: center;
line-height: 100px}
.c2:hover{
background-color: red;
color: black;
}
</style>
</head>
<body style="margin:0 auto">
<!--<div style="height:100px;width:100px"></div>-->
<!--<div style="height:100px;width:100px;border:10px red solid ;font-weight:bolder;font-size: 50px" >a</div>-->
<!--<div class="c1">白羊座</div>-->
<!--<div style="width: 100px;height: 48px; border: 1px lightseagreen solid;float: left"></div>-->
<!--<div style="width: 100px;height: 48px; border: 1px red solid;float: right"></div>-->
<!--把块级标签变味了行内标签 行内标签不可以应用宽高以及 内边距 外边距-->
<!--<div style="height: 100px;width: 100px;display: inline-block">aaa</div>-->
<!--<span style="height: 100px;width: 100px;display: inline-block">a</span>-->
<!--外边距是围绕在元素边框的空白区域 margin-top:-->
<!--<div style="height:100px ;width: 100%;border:1px red solid">-->
<!--<div style="height: 40px;width: 100%;margin-top: 10px"></div>-->
<!--</div>-->
<!--内边距是扩充自身 padding-top-->
<!--<div style="height:100px ;width: 100px;border:1px red solid">-->
<!--<div style="height: 40px;width: 100px;padding-top:10px ;"></div>-->
<!--</div>-->
<!--<input type="button" value="提交" style="cursor: pointer">-->
<div class="c2" style="width: 100px;height: 100px;border: 1px red solid;color: white">hover样式</div>
<!--<div style="top:0;left:0;right:0;height:48px; position:fixed"></div>-->
<!--<div style="height: 10000px; width:100%;border:1px pink solid;margin-top:48px;">啊啊</div>-->
<!--<div style="width:200px;height:200000px ;border:1px red solid;position:relative">-->
<!--<div style="width:20px;height:20px; position:absolute;bottom:0;z_index:999"></div>-->
<!--<div style="width:20px;height:20px;position:absolute;bottom:0;"></div>-->
<!--<div style="width:20px;height:20px;position:absolute;bottom:0;"></div>-->
<!--<div style="width:20px;height:20px;position:absolute;bottom:0;"></div>-->
</div>
</body>
</html>
