定位属性position 的介绍 -

Community Learn Tools Library Leisure

English

Home > List of blog posts > 定位属性position 的介绍

Blogger Information

Blog 33

fans 1

comment 0

visits 21830

Special Recommendation

More>

Related recommendations

定位属性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

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：position:inherit?

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

flex的属性描述

2021-03-26 18:31:34

定位属性position的介绍

上述属性值的讲解：

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

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

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

总结：