一、格式与布局
1、位置：position
①、fixed 相对于浏览器边界的定位
<style type="text/css"> #a1{ 200px; height: 200px; position: fixed; left: 70px; bottom: 50px; background-color: aqua; } </style> </head> <body> <div id="a1"> </div>
②、sbsolute 相对于父级元素进行定位
注意：定位之后，原来位置没有了，其他元素会对其位置进行侵占，会覆盖
<style type="text/css"> #a1{ 200px; height: 200px; position: absolute left: 70px; bottom: 50px; background-color: aqua; } </style> </head> <body> <div id="a1"> </div>
③、relative 相对于自己因该出现的位置进行定位
注意：定位之后原来的位置被保留
<style type="text/css"> #a1{ 200px; height: 200px; position: relative left: 70px; bottom: 50px; background-color: aqua; } </style> </head> <body> <div id="a1"> </div>
方位名词： left right top bottom
二、流式布局
1、float ： left right
2、margin-left margin-right margin-top margin-bottom
3、margin 的重叠现象
①、内外元素之间的margin重叠现象： over-flow：hidden border
②、相邻连个元素之间，如果相邻部位有margin 则取他们的最大值 比如一个一个div距另一个div一个设置20px一个设置10px，则取20px
三、层
1、 z-index 必须给元素添加position
<style type="text/css"> #a1{ 200px; height: 200px; position: relative left: 70px; bottom: 50px; background-color: aqua; z-index: 1; } </style> </head> <body> <div id="a1"> </div> </body>