<!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