<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--
<style type="text/css">
body{
border:5px red solid;
}
div{
/*书写方式*/
/*方式一:
border-width:5px;
border-color:red;
border-style:solid;
*/
/*方式二:
border:red 5px solid;
*/
height:33;
width:33;
border-left-width:5px;
border-left-style:double;
border-left-color:red;
border-top:blue 4px dotted;
border-right:orange 8px dashed;
border-bottom:green 10px outset;
/*
内边距:
一个参数:上 右 下 左距离一致
二个参数:参数1:代表上下 参数2:代表左右
三个参数:参数1:代表上 参数2:代表左右
四个参数:参数1:代表上 参数2:代表右 参数3:代表下 参数4:代表左
顺序:上 右 下 左
*/
padding:10px 30px 50px 100px;
/*
外边距(不足者以左 上 右为优先)
一个参数:上 右 下 左距离一致
二个参数:参数1:代表上下 参数2:代表左右
三个参数:参数1:代表上 参数2:代表左右
四个参数:参数1:代表上 参数2:代表右 参数3:代表下 参数4:
*/
margin:10px 30px 50px 100px;
}
</style>
-->
<!--
<style type="text/css">
div{
width:200px;
height:100px;
border:1px red solid;
}
#haha{
background-color:red;
/*float:right;*/
float:right;
}
#heihei{
background-color:yellow;
/*float:right;*/
clear:right; /*将haha造成的影响干掉*/
float:right;
}
#xixi{
background-color:green;
/*clear:right;*/
}
</style>
-->
<style type="text/css">
body{
border:1px red solid;
}
div{
width:200px;
height:100px;
border:1px red solid;
}
#haha{
background-color:red;
position:relative;
z-index:10;
}
#heihei{
background-color:yellow;
/*
position:标签的定位
值:
absolute 绝对定位
标签原有的位置释放,下面的标签上移
偏移时参照的对象为父对象(父标签)
relative 相对定位
标签原有的位置不释放
偏移时参照的对象为对象的原有位置
偏移属性:
top
left
right
bottom
层:
z-index:
值大者,上层显示
值小者,下层显示
使用时的前提:必须要设置一个属性position
*/
/*
position:absolute;
偏移时,以页面做定点为基准
*/
position:absolute;/*偏移时,以自己原位置的左顶点为基准*/
top:30px;
left:40px;
z-index:5;
}
#xixi{
background-color:green;
position:absolute
z-index:1;
}
</style>
</head>
<body>
<!--
盒子模型的四条边:
border显示必须包含:尺寸、颜色、样式,才能显示出来
border:
border-width:
border-color:
border-style:
border-top
border-top-width:
border-top-color:
border-top-style:
border-bottom
border-bottom-width:
border-bottom-color:
border-bottom-style:
border-left
border-left-width:
border-left-color:
border-left-style:
border-right
border-right-width:
border-right-color:
border-right-style:
文字到边框的距离:内边距 padding
padding
padding-left
padding-right
padding-top
padding-bottom
边框到外边框的距离:外边距 margin
margin
margin-left
margin-right
margin-top
margin-bottom
-->
<div id="haha">
哈哈哈哈哈
</div>
<div id="heihei">
嘿 嘿 嘿 嘿
</div>
<div id="xixi">
嘻嘻嘻嘻嘻嘻
</div>
</body>
</html>