正文
CSS_样式sample
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE HTML>
<html>
<head>
<title>div浮动</title>
<style type="text/css">
body{ margin: 0px 1px 2px 3px;
} #father{ background-color: yellow;
width: 100%;
height: 100px;
border: dashed green;
} #son1{
float: left;
} #son2{
float: left;
} #son3{
float: left;
} #clear{
clear: both;
}
</style></head>
<body>
<!--是div在同一列上,如果清楚浮动效果 同层div也会浮动-->
<div id="father">
<div id="son1">aaaaaa</div>
<div id="son2">bbbbbb</div>
<div id="son3">cccccc</div>
<div id="clear"></div>
<div>dddddddddddd</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>div浮动</title>
<style type="text/css">
body{ margin: 0px 1px 2px 3px;
} #father{ background-color: yellow;
width: 100%;
height: 100px;
border: dashed green;
position:relative;
} #son1{
position: absolute;
margin-left: 60%;
} #son2{ }</style></head>
<body>
<!--相对定位，元素没有脱离文本流-->
<!--绝对定位，是相对于浏览器-->
<!--如果相对于父节点的绝对定位，父节点要设置相对定位,脱离文本流-->
<!--result bbbbbb aaaaaaaaaa-->
<div id="father">
<div id="son1">aaaaaa</div>
<div id="son2">bbbbbb</div> </div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>div常用样式</title>
<style type="text/css"> #father{ background-color: yellow;
width: 100%;
height: 100px;
border:1px dashed green;
} #son1，#son2,#son3{
background-color: green;
width: 100px;
margin-left: 5px;
margin-top: 5px;
display: inline; /*3个div显示在同一行*/
} #son3{
display: none; /*隐藏第三个div*/
} #son2:hover,#son1:hover{
background-color: blue;
cursor: hand;
}</style></head>
<body> <div id="father">
<div id="son1">aaaaaa</div>
<div id="son2">bbbbbb</div>
<div id="son3">bbbbbb</div>
</div>
</body>
</html>
