①column-count:===写列得个数===>按照几列划分布局
=推荐这个，不使用列宽，定了列数之后，系统自动分配列宽
②column-gap===划分列与列之间的间距
一般不调整··
③column-width:====调整列宽（会与列数发生冲突）
一般不调整
④column-rule-color:red；结合column--rule-width：数字； column-rule-style：soild；一起使用。
出现列线和列线得颜色，一般不调整
简写：column-rule：10px solid red；
⑤column-fill：；===规定列高如何填充得
取值：auto：列高度自适应，尽量让每一列得高度填充满每一个父盒子，到最后可能会出现填充不满得现象
balance：尽量让每一列得高一致，可能会出现每一列得高度都填充不满父亲盒子
（默认值）
⑥column-span:标题是否横跨列
all：横跨所有得列
不写只会在第一列展示，，默认值
⑦瀑布流中出现断层-解决问题：break-inside: avoid;
①响应式布局：就是根据设备改变时，展示不同得分布结果
②媒体查询：可以检测设备是否发生改变（用来检测设备得宽度或者高度是否发生改变，一般都是检测宽度得）
③语法：@media all and (min-width:700px){
body{background-color:pink;
}
注意：空格得使用
语义：利用媒体查询检测所有设备并且要求设备得宽度大于等于700px，就让背景颜色变成粉色
④检测横竖屏代码
- 检测横屏的
- @media all and (orientation: landscape){
- body{
- background-color:■red;
- }
- /*检测竖屏的*/
- @media all and (orientation: portrait ){
- body{
- background-color:■blue;
- }
⑤rem单位（移动端中常用的单位）
它是一个相对单位，相对于html字号而言的，例如html是16px，那么1rem=16px，2rem=32px，只要html的字号改变，rem也会改变 。
移动端中不使用px，因为他是死单位，不能随着页面的缩放而改变
⑤移动端适配的原理（面试题）：
做移动端适配:要求元素的大小要跟着设备发生改变，设备如果大元素就大，设备如果小，元素就小。
要想完成移动端的适配，我们需要借功媒体查询和rem单位来达到适配( 自适应)的目的。
如果设备宽度大了，就让html字号大一一点。如果设备宽度小了，就让htm1的字号小一点。
如果htm1的字号一且发生改变，rem单位就会跟着改变。
所以一股做移动端的时候要求写布局的时候用的单位最好足rem单位。
了解概念
①一般我们制作移动端常见的设备都是iphone
常见的设备有iphone5===320*568，iphone678==375*667，iPhone plus==414*736，iphoneX==375*812
②设计稿的大小（截图）
常见的iphone5（640*1136）==dpr为2倍，iphone678==750*1334==dpr为2倍，iPhone plus==1242*2208，dpr为3倍，iphoneX==1125*2436，dpr为3倍
③设备像素比（dpr）==设备像素/设备独立像素=设计稿大小/设备的真实大小
设备像素（物理像素）：真实设计稿。有多少个像素点，ps量取的大小
设备独立像素（逻辑/虚拟/css像素 ）：设备的真实大小，开发人员写的css像素
④做移动端的时候因为设计搞一般比设备真实大小要大，所以我们将来用ps量取的大小肯定是偏大的，所以我破门的代码中到底需要多少px需要我们自己计算
计算规则：开发人员需要的css的像素：=ps量取的大小/dpr
⑤视口：
布局视口：超大视口（看不见）
视觉视口：设备视口
理想视口：要求千俩种视口呈现1：1的效果
如何让视口变成理想视口：代码： <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
⑥阿里巴巴字体图标库：字体图标，看着是图其实是文字，所以他就拥有和文字相关样式（加粗，大小，颜色）
⑦盒子模型
标准盒子（默认值）：语法：box-sizing：conent-box;自己定义的width指的是内容去的宽度，所以写了内间距和边框线之后会导致把盒子撑大。
怪异盒子：语法：box-sizing:border-box;自己定义的width指的是盒子的总宽度，写了内间距和边框线之后就不会导致盒子撑大（而是内容区自动变小）
①使用媒体布局
如下准备代码：
- @media all and (max-width:320px){
- html{
- font-size: 16px;
- }
- }
- @media all and (min-width:321px) and (max-width:376px){
- html{
- font-size: 18px;
- }
- }
- @media all and (min-width:377px){
- html{
- font-size: 20px;
- }
- }
-
-
- html,body{
- height: 100%;
- }
-
- body{
- display: flex;
- flex-direction: column;
- }
②使用适配器布局
准备知识：
一、vw====view width(视口的宽度)
vh====view height(视口的高度)
视口===我们真实能看见的区域（设备的真实大小）
vw和vh是一个单位，也是一个相对单位，他是相对于视口而言的
100vw=视口的宽度
100vh=视口的高度
二、假设设备宽度是320的，视口的宽度就是320的
那么100vw=320px
那么1vw=3.2px
三、假设设备宽度是375的，视口宽是375
那么100vw=375px
那么1vw=3.75px
四、 假设设备的高度是1080，视口的高是1080
那么100vh=1080px
那么1vh=10.8px
五、 假设我现在的设备是iphoneX，请问视口的宽度是375px，视口的高度是812px
所以100vw=375px 100vh=812px
注意：
①如果做移动端想实现实时适配（设备发生一丁点改变，元素也要跟着改变），要想实现实时适配必须借助vw和rem单位来实现。
②要想实现实时适配，我们需要让html字号的单位写成vw单位，只要视口宽度发生改变，那么vw一定是会改变的，vw变了字号就变了，字号变了rem就变了
③将来我们的html字号到底写多少个vw比较合适呢？（需要看公司领导）
目前做的时候最好让字号大于10px以上即可。
推算：
假设现在我要基于iphone5这个设备做项目，我们就知道视口的宽度是320px
所以100vw=320px 1vw=3.2px
假设我们的字号基于16px来做，那么我们就需要讲16px转成vw单位
16px=？vw 5vw
- html{
- font-size: 5.33vw;
- }
- /* 隐藏滚动条 */
- ::-webkit-scrollbar{
- display: none;
- }
- /* ========布局========== */
- html,body{
- height: 100%;
- }
- body{
- display: flex;
- flex-direction: column;
- }