定位、flex和grid布局常用属性及使用场景

作业内容：
1. 实例演示绝对定位与固定定位(完成课堂上的模态框案例) 
2. 背诵flex,grid所有常用属性,并熟练应用它们的使用场景; 
3. 制作 思维导图,总结flex,grid属性,以及他们之间的区别,尽可能用简写

<!DOCTYPE html>
<html lang="zh_CH">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>模态框</title>
        <style>
            /* 模态框 */
            .modal {
                display: none;
            }
            /* 遮罩层 */
            .modal .modal-bg {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: rgb(0, 0, 0, 0.5);
            }
            /* 表单 */
            .modal .modal-form {
                background-color: #fff;
                position: fixed;
                top: 40vh;
                left: 40vw;
                right: 40vw;
            }
            /* 表单元素 */
            .modal > .modal-form > fieldset {
                display: flex;
                flex-direction: column;
                gap: 0.5vh;
            }
            /* 登陆层 */
            .modal fieldset div {
                height: 30px;
                display: flex;
                place-content: space-between;
                place-items: stretch;
                gap: 1em;
            }
            /* 按钮 */
            .modal button {
                flex: auto;
            }
        </style>
    </head>
    <body>
        <div class="modal">
            <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
            <form class="modal-form" action="login.php" method="post">
                <fieldset>
                    <legend>用户登陆</legend>
                    <input type="text" id="username" />
                    <input type="password" id="password" />
                    <div>
                        <button>登陆</button>
                        <button type="button" onclick="window.location='regist.html'">注册</button>
                    </div>
                </fieldset>
            </form>
        </div>
        <button onclick="document.querySelector('.modal').style.display='block';">登陆</button>
    </body>
</html>

flex和grid常用属性

这是针对flex容器的相关属性

选择器	属性名	值	含义
flex容器	flex-direction	row	主轴方向，按行排列
flex容器	flex-direction	column	主轴方向，按列排列
flex容器	flex-wrap	wrap	没有弹性，换行
flex容器	flex-wrap	nowrap	不换行，弹性自适应
flex容器	flex-flow	row wrap	包含上面两个属性，两个值
flex容器	place-content	start	剩余空间排列，靠左
flex容器	place-content	end	剩余空间排列，靠右
flex容器	place-content	center	剩余空间排列，居中
flex容器	place-content	space-between	剩余空间在非首尾项目中间
flex容器	place-content	space-around	分散对齐，剩余空间在每个项目两边平均分配
flex容器	place-content	space-evenly	剩余空间在所有项目两边平均分配
flex容器	place-items	start	交叉线方向靠头部
flex容器	place-items	end	交叉线方向靠尾部
flex容器	place-items	center	交叉线方向居中
flex容器	place-items	stretch auto	交叉线方向拉伸

总结一下：

flex-flow: 主轴方向换行
place-content: 主轴上的排列
place-items: 交叉轴上的排列

这是针对flex项目上的属性

选择器	属性名	值	含义
flex项目	flex-grow	0	项目禁止放大
flex项目	flex-grow	1	项目允许放大
flex项目	flex-shrink	0	项目禁止收缩
flex项目	flex-shrink	1	项目允许收缩
flex项目	flex-shrink	1	项目允许收缩
flex项目	flex-basis	auto	项目宽度，等同于width，但优先级大于width。
flex项目	flex	0 1 auto	包含上面所有属性 flex-grow flex-shrink flex-basis，也可以用一个关键字，即auto，相当于1 1 auto，还有none，相当于0 0 auto
flex项目	order	3	调整项目的显示顺序

这是针对grid容器的相关属性

选择器	属性名	值	含义
grid容器	grid-template-columns	10em 10em 10em	分为3列等宽，这个单位也可以用1fr 1fr 1fr
grid容器	grid-template-rows	10em 10em 10em	分为3行等宽，这个单位也可以用1fr 1fr 1fr，也可以用repeat(3, 10em)
grid容器	grid-auto-flow	row	设置项目在隐式网格中的排列方式，行优先
grid容器	grid-auto-flow	column	设置项目在隐式网格中的排列方式，列优先
grid容器	grid-auto-rows	1fr	隐式网格单元行的高度
grid容器	place-items	start start	左上角
grid容器	place-items	end end	右下角
grid容器	place-items	start end	左下角
grid容器	place-items	center center	居中，也可以只写一个center
grid容器	place-content	start start	剩余空间的分配，项目全放左上角
grid容器	place-content	end end	剩余空间的分配，项目全放右下角
grid容器	place-content	center center	剩余空间的分配，项目居中
grid容器	place-content	space-between	剩余空间非首尾均匀分配
grid容器	place-content	space-around	剩余空间分散分配
grid容器	place-content	space-evenly	剩余空间平均分配

这是针对grid项目的相关属性

选择器	属性名	值	含义
grid项目	grid-column-start	1	按照列标记数出来的
grid项目	grid-column-end	2	按照列标记数出来的，可以不写
grid项目	grid-row-start	1	按照行标记数出来的
grid项目	grid-row-end	2	按照行标记数出来的，可以不写
grid项目	grid-column-end	span 2	跨越多少列，如果是span 1，也可以不写
grid项目	grid-row-end	span 2	跨越多少行，如果是span 1，也可以不写
grid项目	grid-column	1/4	跨越3列
grid项目	grid-column	1/span 3	跨越3列
grid项目	grid-row	1/4	跨越3行
grid项目	grid-row	1/span 3	跨越3行
grid项目	grid-area	3/1/4/4	这个后期推荐使用
grid项目	grid-area	3/1/span 1/span 3	这个后期推荐使用

思维导图

相关文章