关于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:

 <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>

 

效果:

关于css布局的一点记录

 

 .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 布局(圣杯、双飞翼)


下一篇:前端一面中看似简单却让人容易忽略的题之(界面布局)