定位属性position 的介绍

定位属性position的介绍

属性值有四个

position:static;
position:absolute;
position:fixed;
position:relative;
position:inherit
上述属性值的讲解：
position:static表示默认行为，元素出现在正常流当中。
position:relative表示生成相对定位的元素，相对于正常位置进行定位。
position:absolute表示生成绝对定位，相对于其最近的第一个父元素进行定位，其父元素具有position:relative属性
position:fixed表示固定定位，始终相对于浏览器窗口进行定位。

position:inherit表示继承其父元素的position属性值。

案例说明：文字的水平垂直居中

   <!DOCTYPE html>
           <html lang="en">
           <head>
               <meta charset="UTF-8">
               <title>文字水平垂直居中</title>
               <style type="text/css">
                .box{
                    width:20em;
                    height: 30em;
                    background-color: red;
                    /*设置文字在盒子中水平居中显示*/
                    text-align: center;
                    /*设置文字在盒子的垂直居中显示*/
                   line-height:30em; 
                }
               </style>
           </head>
           <body>
               <div class="box">我是box</div>
           </body>
           </html>

文字在盒子中垂直居中的小技巧：

设置的line-height属性的高度要与盒子的高度一致

案例说明：盒子的水平垂直居中

    <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>定位实现盒子的水平垂直居中</title>
                <style type="text/css">
                .parent{
                    position: relative;
                    background-color: yellow;
                    border: 1px solid;
                    width:25em;
                    height: 25em;
                }
                 .box{
                    position: absolute;
                    top:0;
                    bottom: 0;
                    left:0;
                    right: 0;
                    margin: auto;
                    background-color: red;
                    width:15em;
                    height: 15em;
                    text-align: center;
                    line-height: 15em;
                }
                </style>
            </head>
            <body>
                <div class="parent">
                <div class="box">我是box</div>
                </div>
                </body>
            </html>

总结：

-在设置盒子水平垂直居中时，父元素设置相对定位，而子元素设置绝对定位，并且设置其子元素的四个方向为0；margin属性值设置为四个方向为auto

定位属性position的介绍

上述属性值的讲解：

案例说明：文字的水平垂直居中

文字在盒子中垂直居中的小技巧：

案例说明：盒子的水平垂直居中

总结：

更多相关文章

随机推荐