0503-格式与布局

zhengleilei 2018-05-03 原文

一、格式与布局

1、位置：position

①、fixed 相对于浏览器边界的定位

<style type="text/css">
            #a1{
                width: 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{
                width: 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{
                width: 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{
                width: 200px;
                height: 200px;
                position: relative
                left: 70px;
                bottom: 50px;
                background-color: aqua;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="a1">
        </div>
    </body>