CSS - 笔记

兄弟你的假发

已于 2023-04-25 19:49:26 修改

阅读量657

点赞数 1

分类专栏： css 文章标签： css

于 2019-12-21 09:24:41 首次发布

本文链接：https://blog.csdn.net/qq_39004843/article/details/103641183

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DIV 相对外层div 相对定位

外层div需要设置：

position: relative;

内层div:

position: absolute;

<style>
.content {
    position: relative;
    width: 600px;
    height: 500px;
    background: red;
    line-height: 200px;
}
.content span{
    background: blue;
}
.content .box{
    position: absolute;
    background: yellow;
    float: left;
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    top:0;
    margin-top: 200px;
    margin-left: 200px;
}
</style>
<body>
    <div class="content">
        <span>这是一个span</span>
        <div class="box">我是box带文字</div>
    </div>
</body>

效果图：
在这里插入图片描述

DIV 水平垂直居中

弹性布局（display:flex;）属性详解
使用弹性布局： display: flex;

<style>
    li{
        border: 1px solid white;
        width : 5rem;
        height: 5rem;
        background-color: red;
    }
    li:first-child{
        background-color: blue;
    }
    li:last-child{
        background-color: yellowgreen;
    }
    .box{
        background-color: #F5D5C3;
        padding: 1rem 1rem;
        width : 100%;
        height: 25rem;
        display: flex;    /*弹性布局*/
        flex-direction: column;  /*垂直排布*/
        justify-content: center; /*垂直居中*/
        align-items: center;   /*水平居中*/
    }

</style>
<body>
<div class="box">
    <li>1</li><li>2</li><li>3</li><li>4</li>
</div>

效果图：
在这里插入图片描述

图片水平垂直居中

<style>
    .box{
        height: calc(100vh);
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .img{
        width: 80%;
        height: auto;
    }
</style>

<div class="box">
        <img class="img" src="img.png">
</div>