文章目录
（1）Flex弹性盒子布局
一： 父容器上的属性
1、 display:flex 设置为弹性盒子（写在父容器上）
在使用容器添加模型为display:flex后，该容器会变成弹性盒子模型，
和以往的盒子布局有区别
（往容器里面添加东西排列顺序等布局方式发生改变）
<style>
.box{width: 500px;height: 500px;border: 1px black solid;
display: flex;}
.box div{width: 100px;height: 100px;background-color: blue;}
</style>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
当没有添加display：flex的时候：父容器里面的三个div都是各占一行的
当添加之后：
（子项默认是从左往右排列即（flex-direction:row））
2、flex-direction值 设置子项的布局方向（写在父容器上）
往盒子添加内容（子项），子项的排列方式是从左到右排列，从右到左排列，从上到下排列，从下到上排列？？
进行排列？？？
3、Flex-wrap:值 设置子项单行还是换行显示（写在父容器上）
当内容比较多的时候要进行换行处理 wrap，不会自动换行，否则会溢出
4、Flex-flow: 值1 值2 （写在父容器上）
Flex-flow: 提供了flex-direction和Flex-wrapl两种属性的复合写法
值1和值2为flex-direction和Flex-wrapl属性的取值
5、justify-content:值 主轴方向上子项的对齐及分布方式 （写在父容器上）
什么是主轴方向？？？？就是添加子项的排列顺序上
justify-content:flex-end； 如果主轴选择flex-direction：row(左到右排列)， 则都靠右面对齐
space-between如果主轴方向有空隙，则左右分别靠容器两边，空隙由中间元素分配
space-around 如果主轴方向有空隙，每个盒子外左右都加一层平均分配的空隙
space-evenly 如果主轴方向有空隙，平均分配到每个子项之间
6、align-items:值 子项们相对flex容器在侧轴上的对齐方式（写在父容器上）
什么是侧轴？？？
就是与主轴（flex-direction）不在同一个方向上。
比如说：
主轴为左到右排列，当每一个子项的行高方向（上下的方向）为侧轴.
当主轴为左到右排列的时候，每一个子项块的行高自适应的时候：
align-items:stretch; 每一个子块在该行上自由拉伸（默认项）
align-items:flex-start; 每一个子块在该行与容器顶部对齐
align-items:flex-end; 每一个子块在该行与容器低部对齐
align-items:center; 每一个子块在该行居中对齐
7、align-content:值 子项们相对flex容器在主轴上的对齐方式（写在父容器上）（如果子项只有一行，无任何效果）
处理主轴方向每一行的对齐方式
二：子项上的属性
1、order：值 子项排序位置
值为一个数，正负都可以
会根据每一个子列上的order的值进行排序排放
2、flex-grow:数 子项的扩展
当有剩余空间的时候，剩余空间会按照各子项flex-grow:瓜分
每个子项宽度的扩展为：该子项(flex-grow值)/(所有子项flex-grow的和)
3、flex-shrink:数值 子项收缩
当一行排不下很多块的时候（不进行换行），该行会按只适应缩小，该块会按照该数值收缩（不想让其收缩，让该值为0）
4、flex: 数值 px值 是grow和shrink的复合
5、flex-basis:px值 分配剩余空间
当有一行足够的剩余空间的时候，子项宽会按该值扩展
当一行没有剩余空间的时候，不会有变化
当一行剩余空间不足的时候，会按该值先扩展，然后在进行只适应缩小
6、align-self:值 单独一个子项的垂直对齐方式
值有：center等（其实和align-items相似，一个整体对齐，一个单独对齐）
（2）grid网格布局
Grid布局是一个二维的布局方法，横纵两个方向总是同时存在
（Flex相对而言，可以算是一个一维的布局方法）
他俩都有作用在父容器和子项上的属性
一：父容器上的属性
1 声明
display:grid 声明为网格布局的盒子
2 布局设置
1、gird-template-columns:行1值，行2值，行3值... 行划分
有几行写几个值，设置每一行的高度大小
值可以为px ，% ，只适应 ， fr单位（网格剩余空间比例单位）
值还可以为： repeat（行数，每行大小）；每行大小都相同
fr单位介绍：
当所有fr总和大于1的时候
该行大小为：该行fr/fr总和 * 父容器高的剩余空间
当所有fr总和1的时候
该行大小为： 该行fr/fr总和 * （父容器高的剩余空间*fr总和）
2、gird-template-rows:列值1 ，列值2，列值3.... 列化分
设置几列写几个值，每一个值代表对于列宽
值可以为px ，% ，只适应 ， fr单位（网格剩余空间比例单位）
值还可以为： repeat（行数，每列大小）；每列大小都相同
3、grid-template-areas:{“第一行每个单元格名字” “第二行每个单元格名字”......} 表格的区域划分（一个区域相当于一个单元格）
名字相同的单元格换分为一个区域（不会因间距分隔开）
每一个区域都是一个矩形，不支持特殊图形
这么使用？？
当子项上添加grid-areas:名字 的时候就会对应的添加到该区域上去
4、grid-template: 复合写法
是grid-template-rows ，grid-template-rows，grid-template-areas的复合写法
grid-template: “名字 名字 名字” 第一行大小
“名字 名字 名字” 第二行大小
/第一列大小 第二列大小 第三列大小
3 间距
1、grid-column-gap:间隙值 行间距
设置行与行之间的间隙
2、grid-row-gap:间隙值 列间距
设置列与列之间的间隙
3、grid-gap: 行间隙 列间隙 设置行、列间隙
是grid-column-gap，grid-row-gar两个的复合写法
4 单元格的内容相对于每个单元格的对齐方式
1、justify-items:值 水平（行）对齐方式
是水平不拉伸（stretch），还是与容器的左（Start）中（center）右（end）对齐
（默认是水平拉伸的）
2、align-items:值 垂直（列）对齐方式
是垂直不拉伸（stretch），还是与容器的顶（Start）中（center）底（end）对齐
（默认是垂直拉伸的）
3、place-items:列对齐 行对齐 水平和垂直对齐方式
是justify-items和align-items的复合写法
5 整个表格相对于容器的对齐方式
1、justify-content:值 表格的水平对齐方式
设置整个表格相对于容器水平方向的对齐方式
2、align-content:值 表格的垂直对齐方式
设置整个表格相对于容器垂直方向的对齐方式
3、place-content: 水平值 垂直值 复合写法
是justify-content，align-content两个的复合写法
可选的值有：
二：子项上的属性
1、位置
1 grid-column-start: 数 水平方向占据的起始位置
2 grid-column-end :数或（span 个数） 水平方向占据的结束位置
3 grid-row-start:数 垂直方向占据的起始位置
4 grid-row-end:数或（span 个数） 垂直方向占据的结束位置
5 grid-column: 起始值 / 结束值 grid-column-start+grid-column-end复合
6 grid-row:1起始值 / 结束值 grid-row-start+grid-column复合
2.区域
grid-area:区域名 把该子项放到该区域内（父容器定义的区域）
grid-area: 水平的起始位置/垂直的起始位置/水平的结束位置/垂直的结束位置
（值和上一页的那个表格一样）
3.对齐方式
justify-self:值 单个网格元素的水平对齐方式
align-self: 值 单个网格元素的垂直对齐方式
place-self:值1 值2 justify-self和align-self的复合
（3）移动端简介
1、网页移动端模拟器
2、Pc端和移动端代码是一套吗？？？
大一点的网站开发都是分开的，pc一套代码，移动端一套代码.
访问淘吧 --->后台检测当前设备---> 如果是pc端 ---> www.taobao.com
访问淘吧 --->后台检测当前设备--->如果是移动端--->网站从定向--> www.m.taobao.com
当然课可以一套代码实现pc端和移动端（响应式布局），一套代码适合做小型网站，不适合做大型网站.
3、viewport视口
（在头部的描述文件中可以看到）在移动端才有用，pc端无用
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口,分别表示为，visual viewport(可视视口)和layout viewport(布局视口)。
visual viewport固定大小跟屏幕大小相同， 在上面.
layout viewport可改变大小，在下面。默认大小为980px.
layout viewport大小可通过控制台document.documentElement.client Width 命令获取。
现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。
怎么更改layout viewport的大小？？
在头部文件中，通过<meta>标签进行设置，name属性指定viewport值，
content属性进行视口配置（多个值，逗号分开）
<meta name="viewport" content="width=device-width, 值2,值3....">
width=device-width initial-scale=数值（代表缩放比例）
user-scalable=yes 或者=no
（4）移动端流式布局（利用绝对单位）
百分比布局，也叫流式布局。代表网站有：优酷，百度，天猫，腾讯等
在比较小和比较大的设备上的区别是：
内容之间的间距上的根据设备的大小进行变换
不同大小的设备：内容的大小是一样的（不变），只是间距上的根据设备大小变化
流式布局对于不同内容的处理
可以看出：
对于文字：无论设备大小，文字占满一行在进行折行
对于控件：无论设备大小，控件大小不变，变得是控件之间的间距
对于图片：根据设备大小等比缩放（为了保持图片的比例和清晰度）
流式布局的好处和坏处：
好处：大屏幕下显示更多的内容
坏处：宽屏下比例 有一些不协调
（5）移动端rem布局（利用比例单位）
等比缩放布局也叫rem布局， 代表网站有：网易，爱奇艺，淘宝，美团
当换到一个较大的设备的时候，内容的大小和间隙会进行等比缩放
单位：
em: 是一个相对单位，1em等于当前元素font-size
（当前元素无font-size，为父元素的font-size）
rem:是一个相对单位，1rem等于根元素的font-size值的大小
在不同的设备下怎么实现等比缩放？？？
利用em,rem等这些比例单位（不使用px这些绝对单位）
不同的设备只需要在最外层设置html的font-size大小，其他大小利用比例单位。
对于不同的设备怎么动态的设置html的font-size？？
利用js或者vw和vh单位
怎么使用js动态的设置html的font-size的大小？？
var fontsize = document.documentElement.clientWidth / 值；
document.documentElement.style.fontSize = fontsize+‘px’;
(这个值是固定的，最好除这个值之后得到的是一个整数)
推荐一个Vs code中px转rem的插件（px to rem）
先设置该插件html的font-size对于px的值
选中该px利用快捷键Alt+z自动转换
当然也可以整篇文章都选中，文章内的px都转为rem
怎么使用vw、vh单位动态的设置html的font-size的大小？？
vw: 把屏幕宽分为100分，1vm等于屏幕宽的1%
vh: 把屏幕高分为100分，1vh等于屏幕高的1%
只需要设计算好html的font-size大小
在使用的时候计算好使用多大的rem大小
当然也可以利用px to rem插件
注意要给body重置一下font-size的大小（因为默认为16px）
（6）响应式布局
响应式布局可以实现pc端和移动端，利用同一套代码
（比较大的项目都是移动端和pc端两套代码，中小型项目可以使用一套代码）
利用媒体查询，即media queries,可以针对不同的媒体类型定义不同的样式，从而实现响应式布局
媒体类型：
常见选项：
and 、 not（非）
括号里面条件： min-Width:px（最小宽）
max-Width:px（最大宽）
orientation: portrait（纵屏）
orientation: landscape（横屏）
方式一： 响应式的标识方式
@media 媒体类型 and（条件） and（条件）{
}
表示当宽度小于500px的时候所有设备执行该css样式
表示当宽度为500px~700px的时候执行该css样式
表示当宽度不大于(小于等于)500px执行该css样式
表示当纵屏的时候执行该css样式
方式二：标签方式
不用写响应表示符号，利用link标签的media属性
在media=” 媒体类型 and(选择)”
当最小宽度小于400px的时候执行base.css文件样式
当横屏的时候执行base.css文件样式
注意：响应式代码写到适配的css后面.
（7）Bootstrap框架
Bootstrap是最受欢迎的HTNL、CSS和JS框架，用于开发响应式布局，
移动设备优先的WEB项目
只看Bootstrap框架的css和html部分
里面已经写好了非常多的css样式和html结构，不需要去写了，
只需要搭积木的方式去调用（要了解主要的css和html样式的核心使用）
特色：
1.响应式布局（该框架中写好了很多@media，用到调用就可以）
2.基于flex的栅格系统
3.提供了丰富的组件和工具方法
4.有许多的常见交互效果（切换、弹窗、提示层）
下载：下载编译过的css文件或者下载其源文件
在下载好的源文件夹中有一个dist文件夹
里面有一个css文件夹
里面最主要的三个.css文件，
其中bootstrap.css文件其实包含了：bootstrap-grid.css和bootstrap-reboot.css文件
（单独把他俩拿出来是为了方便使用）
bootstrap.css 里面包含了所有css的源码
bootstrap-grid.css css的栅格系统源码
bootstrap-reboot.css 重置系统
他里面的功能非常的多，可以产考网站上的帮助文档进行使用
1.布局部分(Layout)
Class=”Container” 版心
Class=”Container-fluid” 通栏
他还具备一定的响应式布局方式（点开源码自己看）
2.栅格系统(Grid)
1.Grid option 网格配置
Grid option 网格配置
class=”row” 建立一行栅格
把每一行默认为12个栅格
给每一个单元格添加 col-个数 ，表述该单元格占几个栅格
当一行单元格所占的栅格数大于12则进行折行处理（class=”w-100”也可以手动折行）
col为平均分配剩余栅格
col-sm 、 col-md 、 col-lg 、 col-xl 响应式操作
Class=”col-sm-4” 一行占4个栅格，满足col-sm响应器
2. Gutters 间距
单元格内容和单元格之间的间距（默认是30px）
Class=”no-gutters” 去掉单元格内容和单元格之间的间距
3.Alignment 对齐方式
4.Responsive classes 响应式的class样式
5.Reordering 排序
6.Offsetting 位置间距
…
（具体去看帮助文档）
3.重置系统（Content）
Reboot 重置默认样式
Typography 重置设备
Code 重置代码
Images 重置图片
Table 重置表格
Figures 重置图片描述
........
（具体去看官网的帮助文档）
4.组件系统（Companies）
Alerts 弹出提示
Badge 徽章
Breadcru 面包屑
Buttons 按钮
Button group 按钮组
Card 卡片
Carousel 轮播
Collapse 塌方
Dropdowns 下拉菜单
Forms 形式
Input grout 输入组
.......
（具体去看官网的帮助文档）
5.工具方法(Utilities)
Borders 边框
Clear fix 清浮动
Close icon 关闭icon
Colors 颜色
Display 显示类型
Embed 媒体
Flex 弹性盒子
Position 定位
.......
（具体去看官网的帮助文档）
755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
