关于css布局的一点记录

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:

 

 

效果:

关于css布局的一点记录_第1张图片

 

 .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布局的一点记录)