[成都|内门弟子]CSS-何俊|2020年06月28日的日报-技能树.IT修真院

发表于： 2020-06-28 21:26:16

1 1086

今天完成的事情：

学习了流动布局，圣杯布局

完成任务14页面1

复习网格系统

1.由于不使用栅格系统，使用css关于流动布局样式：

        <div class="parent">
            <div class="child">a</div>
            <div class="child">b</div>
            <div class="child">c</div>
            <div class="child">d</div>
        </div>

            .parent {
                width: 80%;
                margin: 0 auto;
                background-color: black;
                display: flex;
                flex-flow: row wrap;
                align-content: flex-start;
            }

            .child {
                box-sizing: border-box;
                flex: 0 0 25%;
                background-color: white;
                border: 1px solid red;
            }

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

flex: 0 0 25%;设置盒子的占位大小

配合使用媒体查询使页面缩放时流动

            @media (max-width: 800px) {
                .box-part {
                    flex: 0 0 50%;
                }
            }

            @media (max-width: 800px) {
                .box-part {
                    flex: 0 0 100%;
                }
            }

2.网格布局使用，页面3表格使用网格比较容易

        <div class="Grid">
            <div class="Grid-cell">...</div>
            <div class="Grid-cell">...</div>
            <div class="Grid-cell">...</div>
        </div>

            .Grid {
                display: flex;
            }

            .Grid-cell {
                flex: 1;
                border: 1px solid red;
            }

明天的计划：

完成任务14全部代码的修改，查找代码问题，复习sass,准备使用sass编写代码

返回列表

【任务1】 [成都|内门弟子]CSS-何俊 | 2020年06月28日 的日报 中品

评论

分享到

【任务1】 [成都|内门弟子]CSS-何俊 | 2020年06月28日的日报中品