<link href="../../ol.css" rel="stylesheet" type="text01/css" />

body的初始默认margin:8px；
rel="属性是必须的，规定当前文档与被链接文档/资源之间的关系" 
font-size: 2em;   /* 2倍 元素的font-size大小(8px) 2*8x=16x= 1em */
           100vh: /*等于1个适口高度,vw同理*/
           
transform:translate(50%,50%);/*X轴→,Y轴↓ 平移*/
transform:translate(50%,105px);  → ↓ /*向x轴右边平移元素width的50%，向y轴下面平移105px*/
transform: scale(0.5) translate(-100%, -100%);/*缩放再平移*/
    "只能translate由盒模型定位的元素(block)"

优先级:  background-image: >  background-color: > background
background: linear-gradient(75deg, #6d78ff, #00ffb8);//好看的渐变颜色 //background属性是会显示在border里的
            linear-gradient(rgb(23, 155, 178), rgb(53, 8, 141));
            /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
            linear-gradient(0deg, blue, green 40%, red);
            linear-gradient(red 47%, green 53%)//有一点点渐变
            linear-gradient(red 47%, green 47%)//直接截断
            
background-attachment: scroll|fixed(相对视口滚动|固定); 
                              local(在视口和元素内部,都滚动);

资源路径问题:
    js环境用require函数
    css环境用url函数
        src="url"          不会被webpack处理
        :src=require()     会被webpack处理
        background：url()  会被webpack处理
    background: url('~/static/assets/img/timer.png'); ~告诉webpack的url-loader这是一个module,而不是相对路径。      
    /*url() 函数URL可以使用''或""，也可以省略*/
    
    /*vue-cli规定如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析,它被解析为:http://localhost:9531/static/img/loginbg.35aeef1d.png*/
        或者:    <img src="~static/assets/img/IRS/yjrs.png">
   

box-shadow: 60px -16px theleal;/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 0 0 15px 0 rgba(0,0,0,.1); /* x偏移量 | y偏移量 | 模糊半径 | 扩散半径 | 颜色 */
border: 20px solid red;/*.border占用空间，outline包围border且不占用空间不会影响元素的尺寸和位置*/
border-radius: 10% 30% 50% 70%; "从左上角顺时针"

text-align: justify;"为两端对齐"

display:none    不占位置             
visible:hidden  占位置

float: left;"之后，其display的计算值就成了block"//它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素
    '非替换元素要指定宽度,否则会尽可能地窄'
    '假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行'

文本|空格处理:
    white-space:pre-wrap;/*不合并空白符，允许换行符换行和文本自动换行；*/
    word-spacing:20px;/*一个空格的间隙为20px*/
    text-transform: uppercase;/*只能输入大写*/

margin:25px 50px 75px 100px;	#上右下左 '逆时针'
margin:25px 50px 75px;		#上  左右  下
margin:25px 50px;			#上下    左右
margin:25px;			#上下左右

calc:
    height: 90%;/*写给不支持calc()的浏览器*/ 
    height:-moz-calc(100% - 页眉页脚高度);     -moz:       firefox	 -ms:        IE	
    height:-webkit-calc(100% -页眉页脚高度);   -webkit:    chrome和safari    WebKit是一个开源的浏览器引擎
    height: calc(100% -页眉页脚高度);
    
如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin,因为"子用margin会父子margin折叠"

怎么找谁把高度挤开了?
    从父元素到子元素逐级找[高度最大的], 利用开发工具的computed去看是padding还是margin还是height高了,点击箭头直接调整到改css,修改或覆盖即可

全局滚动条,接近elementui
        /*滚动条凹槽的颜色，还可以设置边框属性 */
        *::-webkit-scrollbar-track-piece {background-color: #074181;-webkit-border-radius: 2em; -moz-border-radius: 2em;border-radius: 2em;}
        /*定义滚动条高宽及背景 宽分别对应横竖滚动条的尺寸*/
        *::-webkit-scrollbar {width: 5px;height:5px;}
        /*滚动条的设置*/
        *::-webkit-scrollbar-thumb {background-color: #0099ff;background-clip: padding-box;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;}
        /*滚动条鼠标移上去*/
        *::-webkit-scrollbar-thumb:hover {background-color: #3ab0ff;}
        
去掉滚动条
    /*一个一个元素删，看是哪个元素挤出了滚动条，设置它的高度height，如果百分比没有反应，那就用绝对定位 /*/
     position: absolute;    height: calc(100% - 101px);/*注意-前后空格!!!/*/*
     overflow: hidden; //找不到是哪个元素挤开的,就设置html 超出就隐藏，不显示滚动条 
并排 
    1.使用float: left 		2.使用display: inline //不换行

【盒子模型】(Box Model)：只有Margin是外边距,Padding是内边距，Border以内都是内部
    如果 box-sizing: content-box（默认）【标准盒子模型】/*则【内容区域】的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。/*/*
    如果 box-sizing: border-box;  【IE盒子模型】/*不会撑开产生滚动条,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。*/
  
3个属性对应  <-->  3种【传统-盒模型-布局】:
    1.display: block/inline;【流体布局(html默认)】
        block: 内容宽度是其父元素的100%，其高度与其内容高度一致 'absolute或float会变成block'
        inline: height width与内容一致。'你无法设置行内元素的height width; margin/padding的上下也没法设置', 如果要改宽高,需要改为display:block相关
                父级块级元素内有足够空间，安排在同一行。空间不够，溢出的文本或元素将移到新的一行。
        宽高:'width、height的默认值都是auto'
            block:                
                 height\width: 50%;       /* 向上找到最近的有设置高度的块级元素的height\width的百分比 */ 
                 /也有可能被兄弟元素撑开/
            inline: 
                '不能设宽高!!!' 置换元素如img， input，button，select，textarea除外
        display: inline-table; /*外在盒子就是inline，内在盒子就是table。*/
        min-width | max-width 属性覆盖 width. '(height/width设置不生效?检查一下是不是因为这个)'
        '而像位置的如left padding 的 % 是基于自身宽度'
        
    2.float: left 切换到【浮动布局】  
        清除浮动: /*如果此父元素只包含浮动元素，则其高度实际上将崩塌为零,所以要在容器中的浮动元素之后&&容器关闭之前(:after)清除浮动元素来解决此问题*/
            1.BFC
            2.father:after：{clear:both;}/*告诉你我左右都不要有浮动元素*/"
                         /*clear: left; 我前面float: left;的元素要浮动在我左边,我就不,我要在它下面*/         
                            		
    3.position: absolute 切换到【定位布局】

2个  <--> 【非传统|盒模型|布局】:
    【弹性布局】display:  /inline-flex;的布局。设为弹性布局以后，子元素的float、clear、vertical-align属性都会失效。
            flex容器的属性:    
                1、flex-direction：设置容器主轴线的方向(默认是水平的)
                3、justify-content：主轴-上的item的对齐方式 "space-between实现分散对齐"
                4. align-items：  交叉轴-上item的对齐方式                
                /*2、flex-wrap：滚动条还是换行，每换一行意味着会多一条主轴线 /*flex-flow是direction和wrap的缩写*/
                /*5、align-content：多轴线对齐方式,项目只有一根轴线则不起作用*/
                .cover-flex{   
                        display: flex;   justify-content横轴: center;   align-items竖轴: center}
                        flex-direction：设置容器主轴线的方向{row左到右,column上到下}     
                        flex-wrap：设置是否换行，每换一行意味着会多一条主轴线  {nowrap（默认值）不换行就挤着 ,wrap换行上到下}
                        align-content：多轴线对齐方式{}                                          
            flex项目(子元素)的属性:    
                1、order：排列顺序,默认为0 
                2、flex-grow：有空间给它伸时,最大可以伸多少倍;默认是0不伸张(在flex属性中默认是1);别人是1,它是2,那可以申时它就比别人多伸缩1倍
                   flex-shrink：空间不够需要它缩时,最多可以缩多少倍,默认是1
                3、flex-basis：初始大小,默认为auto原来大小, 数字没意义,要用px %
                4、align-self：覆盖容器的align-items
                    默认,flex:0 1 auto; /*放大 缩小?可空 默认大小*/ 'auto (1 1 auto) 和 none (0 0 auto)'
                        flex: 1/*flex为正，flex-grow:1，flex-shrink:1，flex-basis 取 0% */ ;   
                        flex: 30px/*flex-basis */;
            弹性盒子(弹性布局的元素)只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
                width(宽) + padding(内边距) + border(边框) = 元素实际宽度
                height(高) + padding(内边距) + border(边框) = 元素实际高度
    【Grid布局】display: grid/inline-grid;的布局。
            Flex指定"项目"在轴线的位置来布局，是一维布局。
            Grid指定"项目"所在单元格的"行""列"，是二维布局。  
            模板(复制直接用)  <div style="display: grid; grid-template-areas: 'a b c' 'd e f' 'g h i' 'j k l';"><div style="grid-area: a;">a</div><div style="grid-area: b;">b</div><div style="grid-area: c;">c</div><div style="grid-area: d;">d</div><div style="grid-area: e;">e</div><div style="grid-area: f;">f</div><div style="grid-area: g;">g</div><div style="grid-area: h;">h</div><div style="grid-area: i;">i</div><div style="grid-area: j;">j</div><div style="grid-area: k;">k</div><div style="grid-area: l;">l</div></div>                          
              0.grid-auto-flow:column; "Grid默认是一行一行的排下去" "我们改成一列一列排下去"
              1.grid-template-columns: repeat(3, 33.33%);
                                      100px 100px 100px; "定义列宽"                                      
                                      repeat(auto-fill, 500px);'每个500px,自动换行'
                                      1fr 500px '左伸缩 ,右500px'
                                      1fr 1fr;(分别占用剩余空间的1个分数单位,占所有fr的占比)  
                  /*grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高*/
              2. grid-template-areas: 'a b c'       
                                      'd e f'  
                                      'g h i';   /*然后就可以 grid-area: e; 或 grid-column-start:g;*/
                    /*grid-template:grid-template-columns、grid-template-rows和grid-template-areas的简写。*/
              3.grid-row-gap: 20px; /*行间距*/gap:20px;
                                         
            
              5."(所有格子为整体)在容器里面的水平位置" 
                    justify-content:start; "space-between实现分散对齐"
                    align-content:垂直
                    /*place-content:space-around space-evenly;/*align-content和justify-content的简写*/*/
                    
              6.grid-auto-columns:50px; "其它"浏览器自动创建的多余网格的列宽和行高   
              
              7.'所有格子里的内容'
                justify-items:center;"水平"
                align-items: center;"垂直" /*align-items和justify-items简写:place-items:start end; "在格子里的位置" "如居中"*/
                  
         单个项目格子item:               
              8.  grid-area: 1 / 1 / 3 / 3; /*左上角行列  右下角行列  <row-start> / <column-start> / <row-end> / <column-end>;*/  '定位置'
                      grid-area: e; /*格子放在哪*/                    
                         grid-column: 1/2; grid-row: 1/3;    /*第1列 的 第1和2格子合并*/
                          /*grid-column:grid-column-start和grid-column-end简写,grid-row同理              */
              9.justify-self
    
层级/层叠上下文:(表示z-index顺序)
    脱离默认层级(能让z-index生效的)的有: 
        'relative/aboslute/flex或grid的item, 且z-index不为auto',    换句话说,这是z-index生效的条件!!!!!!!!!!!!!!!!!!!!!!!!
        'opacity<1，那么该元素的层叠级别将会高于普通元素'效果等同'position:absolue;' 
        有transform/filter等
    从底到上:background/border --> z-index<0 --> （block盒子 --> float盒子 --> inline盒子） --> z-index:0/atuo --> z-index>0
    1.正常文档流的兄弟元素,后出现的在上面
    2.儿子总是显示在在爸爸上面
    3.z-index大小只用于兄弟的比较,父z-index会覆盖掉子的z-index
    
BFC块格式化上下文: 限定内容不会超过该独立 隔离的区域去显示 '重点'
    生成:
        display:inline-*/table-*/float/flex/grid;/*行内表格浮动最新*/
        position:absolute/fixed;/*绝对*/
        overflow: 不为visible的块元素 "最常用"
    3特性:(边距 撑高 互斥) /*内部子元素垂直边距会重叠 | 高度包括浮动子元素的高度 | 与外面的浮动元素互斥 */
    作用:
        特性1解决:解决外边距折叠(让二者不在同个BFC即可,因为两个元素只有在同一 BFC 内，才有可能发生垂直外边距的重叠)
            因为外边距折叠:只会发生在属于同一BFC的内部子元素
                    /*外边距折叠:标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin     */
        特性2解决:让float子元素能撑开父元素 /*默认不撑开所以父元素为0, 把父元素搞成bfc, 父元素的高度就被子元素撑开了*/
        特性3解决:去浮动(eg:b为float浮在a上面,那把a搞成bfc,就互斥了)   
        

父子边距折叠:子元素有margin-top和margin-bottom时，如果父元素不是BFC
            那么只有子元素本身的高度会撑起父元素，子元素的margin值是不会影响父元素的高度的。
            即父子height是一样的，而位置是根据子元素和父元素的margin-top的较大者来的
            那么父设为BFC后,是子在父这个BFC内, 而不是父子在同个BFC内,这样就触发了特性1
            边距就会被包进BFC进行折叠了(原先是边距跑出去了)

inline-block:使其既具有block的宽度高度特性,又具有inline的同行特性

为什么eleui的 table的 tr里的 td的 flex的div.cell里的 inline-block型div设置width:300px; 无效?        
        首先要知道:<tr>的宽度===<table>的宽度
                  div.cell的宽度===第一个<td>的宽度===<colgroup>的第一个<col>的宽度
        原因:flex容器的儿子默认flex为flex:0 1 auto; , 也就是默认空间不够会收缩,所以是这个属性覆盖掉了width属性
        解决:flex-shrink: 0;即可,即我就不收缩,我是多大就是多大

选择器权重:("就近原则")
    10000:!important  在css中，!important的权重相当的高，但是由于宽高会被max-width/min-width覆盖，所以!important会失效。
    1000:style=""
    100:#id{}
    10:.className{} \:hover{伪类}\[type="text"]{属性}\
    1:div{标签}\:after{伪元素}\
    0：儿孙选择器: *所有\>儿子\+兄弟(一个)\~兄弟们(多个)

a[target='_blank'] /*属性选择器,选取所有 target 属性值等于 "_blank" 的 <a> 元素/*/*
body,html {}逗号,表示两个都要
#id2 > p:nth-child(2) 选择id2下的第2个p
p.marked{ }/*: 为所有 class="marked" 的 p 元素指定一个样式。/*/*
a:hover:not(.active) {color: #ddd}  /*not的用法/*/*
p:after{ content:"台词："; } /*:after 选择器在被选元素的内容后面插入内容content,作为已选中元素的最后一个子元素*/
a:link /*单冒号(:)用于CSS3伪类(没有创建一个文档树之外的元素)，双冒号(::)用于CSS3伪元素(创建一个文档树之外的元素)::after。*/
ul{    & >li { }    }   等价于  ul > li {margin-bottom: 0;}
.parent  *  {  }  /*在儿子孙孙子查找/*/*
.parent  >  *  {  }  /*只在儿子中查找/*/*
/*类说明符之间的空格间距意味着爸爸->后代关系。/*/*
.class1   .class2 { } /*<span class="class1"><p class="class2">Something</p></span>/*/*
/*同元素多个类*/
.class1.class2 {  }/*<p class="class1 class2">Major heading</p>/*/*


media(媒体查询)("自适应网页设计"的核心)
    @media (max-width: 300px) { }   /* <300px */
    以下是三个等价写法:
        1.<link media="screen and (min-width: 400px) and (max-device-width: 600px)" //适配宽度在400px-600px之间
        2.@media screen and (min-width: 400px) and (max-device-width: 600px){}
        3.@import url("tinyScreen.css") screen and (max-device-width: 400px);
    /*@media与@media  screen的区别，@media  screen的css在打印设备里是无效的，@media在打印设备里是有效的*/
    @media only screen and (min-width:xxx) and (max-width:xxx){只(only)针对彩色屏幕设备
    横屏：(orientation: landscape)

/*全屏*/
    body,html { /*:root等同html*/      height:100%;  width:100%;      margin:0;  padding:0;    }
    
浏览器原生支持的变量:
   :root {      --main-bg-color: pink;    }    
   document.documentElement.style.setProperty("--main-bg-color","red"); js in css
    body {      background-color: var(--main-bg-color, blue/*备选值*/));    }

/*再让div 充满整个*/
    div{height:100% ; width:100%; position:absolute;}

网页背景图
    body,html{  height: 100%;}		
    body{  background: url('xxx.jpg') no-repeat fixed;/*背景相对于视口固定*/  background-size:cover;/*缩放背景图片以完全覆盖背景区，*/}
用border做三角形
    div{
      border: 20px solid;
      border-color: blue transparent transparent transparent;
    }

字体类型：
        TTF		所有主流浏览器都支持它
        WOFF 	字体均经过 WOFF 的编码工具压缩，文件大小一般比 TTF 小 40%，是字体格式的未来，目前主流的浏览器的新版本几乎都支持 //还有EOT 和 SVG\OTF
            
BEM:(CSS选择器命名规范):  /*解决命名空间污染问题,在较小的组件中没必要*/
        .el-picker-panel__body-wrapper{}
        .el-textarea__inner:hover{}
        .el-button--primary{}
        一个块中元素的类名必须用父级块的名称作为前缀。