<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#cs_fixed{
width: 200px;
height: 200px;
background-color: orange;
position: fixed;/*相当于浏览器的定位*/
right: 100px;
bottom: 100px;
}
#cs_absolute{
width: 200px;
height: 200px;
background-color: blue;
/*position: absolute;相当于父级元素进行定位*/
/*left: 100px;
top: 100px;*/
}
#cs_absolute_nei{
width: 100px;
height: 100px;
background-color: red;
position: absolute;/*相对于父级元素进行定位*/
left: 10px;
top: 10px;
}
#cs_relative{
width: 100px;
height: 100px;
background-color: green;
position: relative;
top: 20px;
left: 20px;
}
#putong{
width: 100px;
height: 100px;
background-color: #003B4D;
position: relative;
top: -10px;
}
#dh{
width: 1004px;
height: 30px;
border: 1px solid grey;
}
.dh_list{
width: 250px;
height: 30px;
float: left;
text-align: center;水平居中
line-height: 30px;垂直居中
border-right: 1px solid grey;
}
#wai{
width: 300px;
height: 300px;
background-color: blue;
/*解决内外margin重叠现象*/
/* overflow: hidden;*/
border: 1px solid red;
margin-bottom: 20px;
}
#nei{
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
}
#ceng1{
width: 300px;
height: 300px;
background-color: black;
position: relative;
top: 20px;
z-index: 1;
}
#ceng2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: -10px;
z-index: -1;
}
</style>
</head>
<body>
<!-- 位置-->
<!--<div id="cs_fixed">
<div >
<div id="cs_absolute">
<div id="cs_absolute_nei">
</div>
</div>
<div id="cs_relative">
</div>
<div id="putong">
</div> -->
<!--流式布局-->
<div id="dh">
<div class="dh_list">春节</div>
<div class="dh_list">端午</div>
<div class="dh_list">六一</div>
<div class="dh_list" style="border-right: 0;">国庆</div>
</div>
<!--margin重叠现象-->
<div id="wai">
<div id="nei">
</div>
</div>
<!-- 层-->
<div id="ceng1">
</div>
<div id="ceng2">
</div>
</div>
</body>
</html>
格式与布局
|-位置 position
|--fixed 相对于浏览器边界的定位
|--absolute 相对于父级元素定位
|----定位后原来的位置没有了
|--relative 相对于自己应该出现的位置进行定位
|----定位后原来的位置保留
|--left right top bottom
|-流式布局
|--float：left right
|--margin-left margin-right margin-top margin-bottom
|--magion的重叠现象
|----内外元素之间的margin重叠现象
|----解决方法：over-flow:hidden 加边框border
|----相毗邻的两个元素之间，如果相邻部位有margin 取最大值
|-层 z-index
|--必须给元素加position或float
原文地址：https://www.cnblogs.com/mjwwzy/p/8988393.html
时间： 2024-10-11 13:02:45