码迷,mamicode.com
首页 > Web开发 > 详细

关于css布局的一点记录

时间:2019-09-28 23:43:37      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:yellow   osi   属性   style   居中   padding   src   color   lin   

1 关于css实现水平垂直居中的一些方法:

.css的定位:用margin,padding,position

position:absolute;   //绝对定位,一般父级元素采用relative来配合使用,如果父级没有定位,将把body标签作为父级定位来使用

用position和margin的方法来实现两个div盒子的水平垂直居中:

html:

<body>
    <div class="parent">
        <div class="children">这里是子盒子</div>
    </div>
</body>

css:

 <style>
        .parent{
            background-color:aquamarine;
            width:300px;
            height:300px;
            position:relative;
        }
        .children{
            background-color:yellow;
            width:100px;
            height:100px;
            position:absolute;
            top: 0%;
            right: 0%;
            bottom:0%;
            left:0%;
            margin:auto;
        }
        /* .children{
            
            width:100px;
            height:100px;
            position:absolute;
            top:100px;
            left:100px;
        } */
    </style>

 

效果:

技术图片

 

 .inline-height设置行高来实现垂直居中,text-align:center来设置水平居中
        .parent{
            background-color:aquamarine;
            width:300px;
            height:300px;
            text-align: center;
        }
        .children{
            display:inline-block;
            line-height:300px;

        }

line-height:inherit;  //规定从父元素那里继承line-height的值

margin:inherit;   //规定从父元素那里继承margin的值

2 关于css层叠z-index的记录

 z-index:属性在position(非stastic)中有效,数值可正可负,数值越大,离屏幕越近,比较要看它显示的不同的级别

关于css布局的一点记录

标签:yellow   osi   属性   style   居中   padding   src   color   lin   

原文地址:https://www.cnblogs.com/Zxq-zn/p/11601929.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!