hover
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{text-decoration: none;
color:#0000FF}
a:hover{color:#0000FF;
text-decoration: underline;}
</style>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
</body>
</html>
margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{background-color: darkgoldenrod;}
i {
/*margin-top:20px ;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;*/
/*margin: 20px 20px 20px 20px;*//*顺时针*/
/*margin: 20PX;*/ /*4个方位*/
/*margin: 20px 20px;*/
/*上下*/ /*左右*/
/*margin: 20px 20px 20px;*/
/*上*/ /*左右*/ /*下*/
display: inline-block;
background-color: #0000FF;}
</style>
</head>
<body>
<div style="border: 12px solid lawngreen;">河南省</div>
<span>我</span><i>爱</i><span>你</span>
<div style="border: 12px solid #0000FF;">工业大学</div>
</body>
</html>
padding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{background-color: darkgoldenrod;}
i {
margin-top: 20px;
/*padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
/*padding:10px 10px*//*先上下 后左右*/
/*padding: 10px;*/
padding: 10px 20px 10px; /*上 左右 下*/
/*padding: 10px 10px 10px 10px;*//*顺时针*/
display: inline-block;
background-color: #0000FF;}
</style>
</head>
<body>
<div style="border: 12px solid lawngreen;">河南省</div>
<span>我</span><i>爱</i><span>你</span>
<div style="border: 12px solid #0000FF;">工业大学</div>
</body>
</html>
position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<div style="border:1px solid blue; width: 700px; height: 700px;">
<div style="width: 250px; height: 250px; background-color: blueviolet;" ></div>
<div style="width: 250px; height: 250px; background-color: orangered;" ></div>
<div style="width:200px; height: 200px; background-color: chartreuse; position: fixed; bottom: 10px; left: 200px;" ></div>
</div>-->
<!--fixed脱离文档 相对于body定位-->
<!--<div style="border:1px solid blue; width: 700px; height: 700px;">
<div style="width: 250px; height: 250px; background-color: blueviolet;" ></div>
<div style="width: 250px; height: 250px; background-color: orangered;" ></div>
<div style="width:200px; height: 200px; background-color: chartreuse; position: relative" ></div>
</div>-->
<!--relative 不会脱离文档流 相当于自身进行定位-->
<div style="border:1px solid blue; width: 700px; height: 700px; position: relative;">
<div style="width: 250px; height: 250px; background-color: blueviolet;" ></div>
<div style="width: 250px; height: 250px; background-color: orangered;" ></div>
<div style="width:200px; height: 200px; background-color: chartreuse; position: absolute" ></div>
</div>
<!--absolute脱离文档 相当于position非static进行定位-->
<!--！！！！！注意 不添加position 的默认值都是static-->
</body>
</html>
1095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
