导图社区 Web前端基础Day19
这是一个关于Web前端基础Day19的思维导图，包含网格布局的基本概念、容器属性、项目属性等。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
Day19
1、CSS Grid(网格) 布局
1. 网格布局的基本概念
1.1. 1、容器与项目 容器：采用grid布局(display:grid | inline-grid)的元素就是容器（grid container） 项目： 容器下面的直接子元素（亲儿子）
1.2. 2、行与列 容器内水平区域就是行 容器内垂直区域就是列
1.3. 3、单元格 行与列交叉的区域会产生单元格 m行n列的网格，会产生m*n个单元格
1.4. 4、网格线 m行n列的网格 水平网格线 m+1 垂直网格线 n+1
2. 设置为网格布局 display:grid | inline-grid
2.1. 注意： 采用网格布局的元素只影响自己的亲儿子 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
3. 容器属性：
3.1. grid-template-columns网格布局中列的数量（和宽度） grid-template-rows网格布局中行的数量（和高度）
3.1.1. 取值： 默认值none px %
3.1.2. 函数 minmax(最小值,最大值) 会在最大值与最小值之间产生一个长度值 repeat() repeat(重复的次数，重复的值) 重复某个值 repeat(重复的次数，重复的模式) 重复某种模式
3.1.3. 关键词 auto 自动 fr 弹性系数，按比例分配剩余空间 auto-fill 自动填充
3.2. 列间距 column-gap 行间距 row-gap
3.2.1. 取值： px % 相对于容器计算
3.2.2. 简写： gap： 行间距 列间距; 如果只给一个值,就代表行间距与列艰巨相等，都是设置的这个值
3.3. justify-content水平位置 总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时) align-content 垂直位置 总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时)
3.3.1. - start - 对齐容器的起始边框。 - end - 对齐容器的结束边框。 - center - 容器内部居中。 - stretch - 项目大小没有指定时，拉伸占据整个网格容器。 - space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。 - space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。 - space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
3.3.2. 简写： place-content:垂直位置 水平位置; 注意：如果只给一个值，代表这两个值是一样的
3.4. justify-items 水平位置:内容相对于单元格左右对齐方式(通常项目内容大小小于单元格宽度时) align-items 垂直位置:内容相对于单元格上下对齐方式(通常项目内容大小小于单元格高度时)
3.4.1. - start：对齐单元格的起始边缘。 - end：对齐单元格的结束边缘。 - center：单元格内部居中。 - stretch：拉伸，占满单元格的整个宽度（默认值）
3.4.2. 简写： place-items:垂直位置 水平位置;
3.5. grid-auto-flow 属性
3.5.1. - 默认值是row，即"先行后列"。 - column，变成"先列后行"。 - dense 自动稠密补位布局 [尽可能紧密填满，尽量不出现空格]。
4. 项目属性：
4.1. - grid-column-start属性：左边框所在的垂直网格线 - grid-column-end属性：右边框所在的垂直网格线 - grid-row-start属性：上边框所在的水平网格线 - grid-row-end属性：下边框所在的水平网格线
4.1.1. 简写： grid-column:开始位置/结束位置; grid-column:开始位置/span 占几个单元格; grid-row:开始位置/结束位置; grid-row:开始位置/span 占几个单元格;
4.2. justify-self属性设置单元格内容的水平位置（左中右） align-self属性设置单元格内容的垂直位置（上中下）
4.2.1. - start：对齐单元格的起始边缘。 - end：对齐单元格的结束边缘。 - center：单元格内部居中。 - stretch：拉伸，占满单元格的整个宽度（默认值）
4.2.2. 简写： place-self:垂直位置 水平位置;
浮动主题
子主题
Day18【项目】响应式
复习PC端和移动端开发
移动端开发时主要的布局原理用的rem+js
rem布局原理：在不同的屏幕尺寸下，可以动态设置html元素的font-size的值，实现在不同屏幕下页面的显示效果题
js做了什么？ 获取了屏幕宽度，如果屏幕宽度是大于设计稿尺寸的，给html预设了一个font-size的值是100像素的，小于设计稿尺寸的时候，用屏幕宽度除以设计稿的尺寸*100,得到的结果设置给html的font-size
响应式开发：
vs code: pc：https://code.visualstudio.com/ 移动端：https://code.visualstudio.com/
（1）原理：会根据用户的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整，实现不同屏幕分辨率的终端上浏览网页的不同展示方式
2）实现步骤： - 设置viewport（视口） - 创建流式布局(百分比布局) 水平方向包含width、左右间距及边框等都采用百分比进行设置 响应式在设计和布局初期就要考虑页面如何在多终端展示，因此需要根据页面效果分析创建方便后续处理版式变化的流式布局。
（3）模块布局响应
模块中内容：挤压－拉伸
模块中内容：换行－平铺
模块中内容：删减－增加
模块位置的变化
其中涉及到的布局技巧的应用，如：百分比布局、弹性盒、弹性网格、浮动技巧、定位技巧的应用、box-sizing,显示隐藏的应用。【尽量少使用绝对宽度】
（4）响应式图片的处理
前景图：给图片的宽度（最大宽）设置为百分比
背景图：修改background-size的值，给百分比、cover、container
（5） 响应式文字
相对单位在字号、行高中的应用可以一定程度上提升效率精简代码 例：用相对单位：em
代码演示：
@media screen and (orientation:landscape){ .box{ font-size:20px; line-height:1.5; } .box h2{ font-size:2em; } } @media screen and (orientation:portrait){ .box{ font-size:12px; } }
屏幕区间设定
大屏优先
@media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */
@media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */
@media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */
小屏优先
/*超小型设备（手机，768px以下）*/
@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */
@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */
@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */
