格式与布局
|-位置 position
|–fixed 相对于浏览器边界的定位

.dingwei1{
    width: 200px;
    height: 200px;
    background-color: red;
    position: fixed;
    right: 100px;
    bottom: 100px;
}
<div class="dingwei1"></div


|–absolute 相对于父级元素定位
|—-定位后原来的位置没有了

.dingwei2{
    width: 200px;
    height: 200px;
    background-color: rosybrown;
    position: absolute;
    left: 100px;
    top: 100px;
}
.dingwei2a{
    width: 50px;
    height: 50px;
    background-color: cyan;
    position: absolute;
    left: 20px;
    top: 20px;
}
.dingwei3{
    width: 200px;
    height: 200px;
    background-color: royalblue;
}
<div class="dingwei2">
    <div class="dingwei2a"></div>
</div>
<div class="dingwei3"></div>


|–relative 相对于自己应该出现的位置进行定位
|—-定位后原来的位置保留

.dingwei4{
    height: 300px;
    width: 300px;
    background-color: aquamarine;
    position: relative;
    top: 200px;
    left: 200px;
}
.dingwei5{
    height: 100px;
    width: 100px;
    background-color: azure; 
}
<div class="dingwei4"></div>
<div class="dingwei5"></div>

|–left right top bottom

|-流式布局
|–float：left right

.dh{
    width: 803px;
    height: 100px;
    border: 1px solid red;
}
.dh1{
    width: 200px;
    height: 100px;
    border-right: 1px solid red;
    float: left;
    line-height: 100px;
    text-align: center;
}
<div class="dh">
    <div class="dh1">春</div>
    <div class="dh1">夏</div>
    <div class="dh1">秋</div>
    <div class="dh1" style="border-right: 0;">冬</div>
</div


|–margin-left margin-right margin-top margin-bottom
|–magion的重叠现象
|—-内外元素之间的margin重叠现象

.wai{
    width: 300px;
    height: 300px;
    background-color: red;
}
.nei{
    width: 200px;
    height: 200px;
    background-color: gold;
    margin-top: 50px;
}
<div class="wai">
    <div class="nei">
        
    </div>
</div>

|—-解决方法：over-flow:hidden  加边框border

.wai{
    width: 300px;
    height: 300px;
    background-color: red;
    overflow: hidden; 
}
.nei{
    width: 200px;
    height: 200px;
    background-color: gold;
    margin-top: 50px;
}
<div class="wai">
    <div class="nei">
        
    </div>
</div>

.wai{
    width: 300px;
    height: 300px;
    background-color: red;
    border-top: 1px solid black ;
}
.nei{
    width: 200px;
    height: 200px;
    background-color: gold;
    margin-top: 50px;
}
<div class="wai">
    <div class="nei">
        
    </div>
</div>

|—-相毗邻的两个元素之间，如果相邻部位有margin 取最大值
|-层 z-index
|–必须给元素加position或float

.ceng1{
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
    z-index: -1;
}
.ceng2{
    width: 300px;
    height: 300px;
    background-color: rosybrown;
    position: absolute;
    z-index: 1;
    left: 200px;
}
.ceng3{
    width: 300px;
    height: 300px;
    background-color: royalblue;
    margin: 100px;
}
<div class="ceng1"></div>
<div class="ceng2"></div>
<div class="ceng3"></div>

版权声明：本文为zhangbaozhong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhangbaozhong/p/8984500.html