通过老师对20号作业的讲解，针对自己的作业对比，自己使用的浮动过多，页面如果出现大小变化可能效果会错乱，书写方式不够规范，老师案例中对定位使用比较多，之前对定位理解比较模糊，通过案例加深了对定位的理解，对选择的使用也有加深，

Flex体验

传统方式布局

传统通过定位方式让盒子水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex初体验</title>
    <style>
        /*公共样式*/
        .container {
            width: 300px;
            height: 200px;
            outline: 2px dashed red;
        }
        .item {
            width: 150px;
            height: 100px;
            outline: 2px dashed green;
            /*文字水平居中*/
            text-align: center;
            /*设置行高与盒子一样后，文字可以垂直居中*/
            line-height: 100px;
        }
        .container.traditon {
            position: relative;
        }
        .item.traditon {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container traditon">
        <div class="item traditon">传统布局</div>
    </div>
</body>
</html>

使用flex弹性盒子布局

通过几句代码即可让盒子可以快速的水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex初体验</title>
    <style>
        /*公共样式*/
        .container {
            width: 300px;
            height: 200px;
            outline: 2px dashed red;
        }
        .item {
            width: 150px;
            height: 100px;
            outline: 2px dashed green;
            /*文字水平居中*/
            text-align: center;
            /*设置行高与盒子一样后，文字可以垂直居中*/
            line-height: 100px;
        }
        .container.traditon {
            /*转为弹性盒子*/
            display: flex;
            /*设置弹性盒子在水平和垂直方向上的对其方式*/
            justify-content: center;
            align-items: center;
        }
        .item.traditon {
        }
    </style>
</head>
<body>
    <div class="container traditon">
        <div class="item traditon">传统布局</div>
    </div>
</body>
</html>

《Flex入门体验》2019-12-23作业笔记

Flex体验

传统方式布局

使用flex弹性盒子布局

以上案例效果一样，但是可以看出flex的代码效率更加高效，也更加方便

相关文章