CSS常见的几种布局

2020-03-21  本文已影响0人  frank_松

本着学习的时候要自己尝试的态度,我在网上看了几种场景的布局,并试着自己将其写出来,在此总结下。

一、div水平垂直居中
html:父div + 子div
方法1:父div相对定位,子div绝对定位,配合css属性transform和translate调整定位。
代码:

<style>   
 .container{
        width: 500px;
        height: 500px;
        margin: 0 auto 20px auto;
        border: 1px solid salmon;
        position: relative;
    }
    .c1 {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /* 下面这几个与定位无关,只是为了更好看点*/
        text-align: center;
        line-height: 100px;
        background-color: #409EFF;
        color: white;
    }
</style>
<div class="container">
    <div class="c1">居中div</div>
</div>

方法2:
使用display:flex ,flex的存在解决了一个很麻烦的问题,就是垂直居中问题

<style>
    .container2 {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .c2 {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: #409EFF;
        color: white;
    }
</style>

<div class="container container2">
    <div class="c2">居中div</div>
</div>

界面效果均为:


image.png

二、两列布局:左侧宽度固定,右侧自适应
html:一个父div,两个子div
方法1:父级div设置position:relative; 左侧div设置绝对定位position:absolute,右边的div设置margin-left

<style>
    .left{
        width: 50px;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .right{
        margin-left: 50px;
        height: 100%;
    }
</style>

<div class="container container3">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>

方法2:左侧div向左浮动,右侧div设置margin-left

<style>
    .left{
        width: 50px;
        height: 100%;
        float:left;
    }
    .right{
        margin-left: 50px;
        height: 100%;
    }
</style>

<div class="container container4">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>

方法3:使用display:flex

<style>
    .container5 {
        display: flex;
    }
    .left2{
        width: 50px;
    }
    .right2{
        flex: 1;
    }
</style>

<div class="container container5">
    <div class="left2">左侧</div>
    <div class="right2">右侧</div>
</div>

页面效果均为:


image.png
上一篇 下一篇

猜你喜欢

热点阅读