文章目录
弹性布局(rem/em)
栅格化布局
百分比布局
浮动布局
- flex布局 / 弹性布局
原理：通过给父元素添加flex，来控制子盒子的位置和排列方式。弹性布局，任何一个容器都可以指定为flex布局，为盒模型提供最大的灵活性，父元素设为flex后，子元素的float、clear、vertical-align都会失效。
父元素可以设置的元素：（主轴为x轴，侧轴就是y轴；主轴为y轴，侧轴就是x轴）
flex-direction：设置主轴方向（主轴为x轴时：【row：从左到右，默认；row-reverse：从右到左；】主轴为y轴时：【column：从上到下；column-reverse：从下到上】）
justify-content：设置 主轴 上的子元素的排列方式（flex-start：从头开始，默认；flex-end：从尾部开始；center：主轴居中对齐；space-around：平分剩余空间，每个盒子的margin-left和margin-right想等，相邻边取加和，不取消；space-between：先两边贴边，再平分剩下的空间（重要！！！））
flex-wrap：设置子元素是否换行（nowrap：默认不换行，硬塞；wrap：换行）
align-content：设置 侧轴 上的子元素的排列方式（多行，出现换行的时候用到；flex-start：默认值，在头部开始排列；flex-end：从侧轴的尾部开始排列；center：在侧轴中间显示；space-around：子项在侧轴平分剩余空间；space-between：子项在侧轴先分布在两头，再平分剩余空间；stretch：子项元素高度平分父元素高度）
align-items：设置侧轴上的子元素排列方式（单 行，所有元素只能在一行中。flex-start：从上到下；flex-end：从下到上；center：挤在一起居中；stretch：拉伸，侧轴方向拉长）
flex-flow：复合属性，相当于设置了flex-direction和flex-wrap（row wrap ；将值列在这）
子项属性：
flex：子项目占的份数，1：占据父亲所有空间；父元素中相同元素占据整个空间并且平分空间，父元素 子元素{flex:1;}；2：占均分之后的两份空间
flex-grow：放大（0：不放大，1：等比例放大）
flex-shrink：缩小（0：不缩小，1：等比例缩小）
flex-basis：
align-self：控制某一个子项在侧轴的排列方式
order：定义子项排列顺序（前后顺序），数值小排列靠前，-1为0前面，默认为0
//子元素在父元素中均匀分布，
父元素：display:flex;（容器）
子元素：（flex项目）
//占据父元素所有宽度
flex:1;
//占据父元素指定宽度
width:npx;
- 栅格布局 grid click
flex布局是轴线布局，只能指定项目针对轴线的位置，一维布局；grid布局划分为行和列，产生单元格，只想项目在单元格中，是二位布局。
采用网格布局元素为容器，内部直接子元素称为项目。float、display:inline-block;display:table-cell、certical-align失效
网页布局使用栅格布局，自适应性特别好
UI 属性：列宽、间距、左右大边距
断点：经过断点增加或减少列、增加或减小列宽（列宽有的是固定的，有的是可以被拉伸的）
容器属性：grid-template-columns:定义每一列的宽，可以决定每行几个元素
100px 100px 300px
或 33.33% 33.33% 33.33%
或 repeat(3,33.33%) <重复次数，重复值>
或repeat(2,100px 200px);<重复次数，重复模式>模式多于一个不能加逗号
或auto-fill：自动填充，使用：repeat(auto-fill,100px)
或1fr 2fr 1fr；fr：fraction（部分、片段）占一个栅格 ，若左边固定宽度：100px 1fr 2fr;
或1fr 2rf minmax(100px 200px)；minmax(最小值，最大值)产生一个长度范围
或auto，浏览器决定长度，好用！
网格线可以起名称，在大小前面加[name]
gitd-template-rows:定义每一列的高
row-grp（grid-row-gap）:行间距
column-gap（grid-column-gap）：列间距
grid-gap:10px 20px;（行间距 列间距）
grid-template-areas：区域，定义多个栅格为一个区域
‘header header header ’
‘left content right’
‘footer footer footer’
名字不同区域不同，若第一行为‘a a a’则表示一个区域；用不到的区域用点： .
grid-auto-flow:row/column：排序，先按行或列
justify-items:单元格内容的水平位置 start | end | center | stretch（默认值）
align-items:设置单元格内容的垂直位置 start | end | center | stretch（默认值）
place-items：上面两属性的简写
justify-content:整个内容区域在容器中的水平位置 start | end | center | stretch（默认值）|space-between | space-around | space-evenly
align-content
place-content:简写
定义列宽和行高，超出指定位置
grid-auto-columns: 超出网格之后的操作，同grid-template-columns
grid-auto-rows:
grid-template：简写
grid-template-columns、grid-template-rows、grid-template-areas
grid：简写
grid-template-columns、grid-template-rows、grid-template-areas
grid-auto-columns、grid-auto-rows、grid-auto-flow
项目属性：
指定项目位置：根据网格线指定，可以使用数字、网格名称、span定义跨过多少网格（span 2 跨两列）
grid-column-start：列开始，左边框所在的垂直网格线 ；1 2代表同一块，3 4 代表同一块，2*快数 为最大边数
grid-column-end：列结束，右边框所在的垂直网格线
grid-row-start：上边框所在的垂直网格线
grid-row-end：下边框所在的网格线位置
二级属性：简写
gird-column:1/2; 列网格开始/结束（gird-column-start + gird-column-end）
grid-row:2/3; 行网格开始和结束（gird-row-start + gird-row-end）
gird-area：指定项目放在哪一个区域（gird-row-start + gird-column-start + gird-row-end + gird-column-end）
项目对齐方式
justify-self:单元格水平位置，当前项目，单个项目 start | end | center | stretch（默认值）
align-self：单元格垂直位置，start | end | center | stretch（默认值）
place-self，简写，先水平，再垂直
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>grid</title>
<style type="text/css">
.container{
width:90%;
height:500px;
display: grid;
/* display: -ms-inline-grid; 针对行内元素*/
background-color:rebeccapurple;
/* grid-template-columns: repeat(2,200px 100px); */
/* grid-template-columns: 1fr 2fr auto; */
/* grid-template-columns: repeat(3,33.3%); */
grid-template-columns: 150px 1fr 2fr;
grid-template-rows: 20% 50%;
grid-gap:10px 10px;
grid-template-areas: 'a b c'
'd e f';
grid-auto-flow: column;
}
.module{
/* width:150px;
height:150px; */
/* line-height: 100px; */
font-size: 20px;
text-align: center;
}
.module1{
background-color: gold;
grid-column-start: 1;
grid-column-end: 4;
}
.module2{
background-color:green;
grid-row-start: 2;
grid-row-end: 4;
}
.module3{
background-color:indigo;
}
.module4{
background-color:lightblue;
}
.module5{
background-color:lightsalmon;
}
.module6{
background-color:mediumpurple;
}
</style>
</head>
<body>
<div class = 'container'>
<div class='module module1'>1</div>
<div class=' module module2'>2</div>
<div class='module module3'>3</div>
<div class='module module4'>4</div>
<div class='module module5'>5</div>
<div class='module module6'>6</div>
</div>
</body>
</html>
流式布局：默认的块会充满整个页面，前面的块在前面，后面的块在后面，即使把块的宽度调整到只有页面的一半，甚至1/3，即使页面这一行有足够的空间容纳两个快，也会依据这个次序向下排列。
- 百分比布局 / 流式布局
盒子宽度设置为百分数来根据屏幕的宽都进行伸缩，不固定像素的限制，内容向两侧填充
设置最大宽度：max-width，超出该大小不会再变大
最小宽度：min-width，小于该宽度不会再变小 - 浮动布局
当元素所在行内可以容纳另外的元素时，下一个元素会浮动上来
对自身的影响：
float可以形成快，可以让行内元素拥有宽和高，因为块级元素有行和高
浮动元素尽量考上
尽量靠左，或右，如果哪一行满足不了浮动元素的宽度要求，元素会下掉
对兄弟元素的影响：
不影响其他块级元素的位置，块级元素该占多少还是占多少
影响其他块级元素的文本
上面贴非float元素
旁边贴float元素或边框（紧跟前一个float，或右float贴右边框）
对父级元素的影响：
从布局上消失
高度坍塌
添加三个float
<style type="text/css">
.box{
width: 400px;
height: 300px;
background-color: royalblue;
}
.app{
width: 100px;
height: 100px;
}
.app1{
/* float: left; */ /！！！！！！
background-color: sandybrown;
}
.app2{
/* float: left; */ /！！！！！！
background-color:seagreen;
}
.app3{
/* float: left; */ /！！！！！！
background-color:rgb(69, 223, 107);
}
</style>
<body>
<div class = 'box'>
<div class="app app1">1</div>
<div class="app app2">2</div>
<div class="app app3">3</div>
</div>
</body>
6306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
