●暗夜风格：E:/wjm/能耗监测管理系统/能耗监测网页pc版v2暗色版/index_night_layer.html 🤣😂😅🤤😒😓😤😢😰😱😭🥵🥶🤪😡😠🙀🙊🙉◆💦😋

◆◆▼※★○◇□☆▷♤♡♢♧▲▼●◆■★▶◀♠♥♦♣☼☽♀☺◐☑√✔☜☝☞㏂㏘☛☚☚✘×☒◑☹♂☾☀•▪‥…▁▂▃▄▅▆▇█∷※░▒▓▏▎▍▌▋▊▉♩♫♬〼〼¤◎۞℗©㏇℡〓▬卐¶‖♮♯♭〓▬卍¶☌☋㉿☊☋◮◪◔◕@㈱№♍♓♓♑♐♏♎♌㊣▨▤▧◤㊤◥☴☲☷▩▦▥▫◈▣⋛⊱⋌￢▔†‡☰*✲❈❈❉✿❀❃❃❁☸✚✄✌✍✎ி❧❦ღ❤✪☁☂☃☄♨☇☈☡➷✉☏۩〠☎ஐ☩➹〄☮☠☣☢✙✟☤☥☦☧☨☫☬♟♙♜♔♚♕♛♗♝♞♖

█远程操作：Windows加r，输入字母mstsc（47.118.56.116/AutoFlow666）

最小字号推荐 12px，正文字号推荐 14px，标题字号推荐 18px、20px、24px、28px、32px 等，尽可能使用偶数。而行间距一般为字号的 1.5-1.8 倍。

.bg1{background: #4184de}.bg3{background: #508be6}.bg2{background: #e44545}.bg4{background: #51dcb6}.bg5{background: #37b984}.bg6{background: #7380e0}.bg7{background: #5a98ea}.bg8{background: #c7d239}.bg9{background: #dcb830}.bg10{background: #f16060}  .bg11{background: #6f8dd0}.bg12{background: #6c6f71}.bg13{background: #02d9c7!important}

★1、手机端（991宽度屏幕以下）：

@media only screen and (max-width: 991px){

}

手机视口默认是980px宽度，如果pc网页内有宽度大于980px的dom，会导致pc页面在手机端变变形，将大于980px的改成100%即可

★2、图片：<img src="images/shadow1.png" alt=""/>

★3、清除浮动：

.fn-clear:after {  content:"\200B"; display:block; height:0; clear:both; }

.fn-clear {*zoom:1;}

★4、溢出文字隐藏并加省略号

.i1{overflow:hidden; white-space: nowrap; text-overflow:ellipsis; width:100px} /*一定要加宽度,单行*/

●多行：【.clamp3{max-height:76px;line-height:26px;-webkit-line-clamp: 3; word-break: break-word;white-space: normal;overflow: hidden; text-overflow: ellipsis;-webkit-box-orient: vertical;display: -webkit-box;}】

●表格：table{border:1px solid #ccc;width:60%;text-align: center;border-collapse:collapse;table-layout: fixed;}

    td,th{height: 30px;border:1px solid #ccc;word-break: break-all;}

    td.ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

★阴影

-moz-box-shadow:2px 2px 5px #333333;-webkit-box-shadow:2px 2px 5px #333333;

box-shadow:2px 2px 5px #333333;

box-shadow:2px 2px 5px （10px）rgba(0,0,0,0.6)  【例子：box-shadow: 0 0px 10px rgba(0,0,0,.1);border: 1px solid #e6e6e6;】【box-shadow: 0 0px 25px 2px #e2f0fc;//柔和浅色短阴影】【box-shadow: 0px 7px 11px 3px rgba(69,95,231,.4);//右下蓝色大投影】

box-shadow:阴影水平偏移值（可取正负值）| 阴影垂直偏移值 （可取正负值）| 阴影模糊值  |（阴影尺寸）| 阴影颜色（rgba中前三个值为颜色rgb的值，最后一位为Alpha即透明度，取值0-1）

  ●文字阴影

text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,.4)

  ●文字描边:text-shadow: #000 -1px 0 1px,#000 0 -1px 1px,#000 1px 0 1px,#000 0 2px 1px;

  ●内阴影

.in{box-shadow:0px 0px 10px 5px #aaa inset;}

  ●四边阴影

box-shadow:

-2px 0 3px -1px green, //左边阴影

0 -2px 3px -1px blue, //顶部阴影

0 2px 3px -1px red, //底部阴影

2px 0 3px -1px yellow; //右边阴影

★6、渐变

background: linear-gradient(to top right, #CDDC39 0%, #8BC34A 25%, #FFEB3B 100%);to top right不写默认为从上到下

【background: linear-gradient(-30deg, #2252ad , #5c8dd1)】

background: linear-gradient(140deg, rgba(120,206,119, 0.2) 3%, rgba(94,181,86, 0.3) 70%)

渐变字：

background:-webkit-linear-gradient(-30deg, #2252ad 10%, #5c8dd1 25%,#2252ad 45%)/*其实是给background-image 设置为渐变色，不是 background-color*/;

-webkit-background-clip: text;/*②*/

color: transparent;/* 让文字为透明色，就是让后面背景色显示出来*/

width: 100px/*注意容器的宽度，渐变是基于它的。*/

https://www.runoob.com/wp-content/uploads/2014/07/7B0CC41A-86DC-4E1B-8A69-A410E6764B91.jpg

★换行

强制不换行：white-space:nowrap;

自动换行 word-wrap: break-word;word-break: normal;

强制英文单词断行：word-break:break-all;

★9、图片等元素垂直居中

●【.czmid{height: 100%;text-align: center;white-space:nowrap;}.czmid>*{display:inline-block;* display:inline;zoom:1;vertical-align: middle;white-space: normal}.czmid::before{content:'' ;display:inline-block;* display:inline;zoom:1;height: 100%;vertical-align: middle}/*czmid是父级,垂直居中，子级不定高度*/】

●transform方法【.cs3mid{position: relative;text-align: center;top: 50%;/*li高度的一半*/transform: translateY(-50%); /*再向上移动自身的50%*/}】

●完全居中：.center-layout {|position: absolute;top: 50%;left: 50%;text-align: center;transform: translate(-50%, -50%); }

/* transform: translate(x, y)

// x表示元素在水平方向（x轴）的移动距离，y表示元素在水平方向（y轴）的//移动距离。

//注意，Y是一个可选参数，如果没有设置Y值，则表示元素仅仅沿着X轴正方形移动。*/

★动画animation和transition

1：transition需要一个事件来触发，比如hover，所以没法在网页加载时自动发生

2: transition是一次性的，不能重复发生，除非一再触发。

3：transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

4：一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

transition: width 2s ease-in;【transition: all .3s;】

▶-moz-transition: width 2s ease-in; /* Firefox 4 *-webkit-transition: width 2s ease-in; /* Safari 和 Chrome */-o-transition: width 2s ease-in; /* Opera */

animation：.c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; }.c:hover{animation: 2s change ease-in infinite alternate;}时间/动画名/运动速度曲线/次数infinite=无限/是否来回。【animation: light3 1s infinite】

animation:myAnim 1s linear 1s infinite alternate both running;（动画名 运行时间 运动速度曲线 延迟 次数无限 来回播放 动画执行前/执行后的关键帧 是否正在运行或已暂停）

        @keyframes change {

            0% { background: orange; }

            50% { background: pink;width: 200px; }

            100% { background: red;height: 300px; }}

●animation-fill-mode : forwards //设置对象状态为动画结束时的状态 |none //恢复原状

●transform-origin: 50% 100%; //缩放中心点，默认是中间

★css3动画常用属性：

旋转：div{transform:rotate(7deg);}

缩放（放大缩小）：transform:scale(1.5);transform-origin:0 50%/left/right //缩放中心点：x坐标 y坐标 ，0 0是左上角

镜像： .mirrorRotateLevel { transform: rotateY(180deg);  /* 水平镜像翻转 */}

        .mirrorRotateVertical {transform: rotateX(180deg);  /* 垂直镜像翻转 */}

多重属性：transform: rotate(45deg) translate(100px, 100px);

●.表格模式

.box {display: table-cell;vertical-align:middle;text-align:center;*display: block;*font-size: 175px; *font-family:Arial;

width:200px;height:200px;border: 1px solid #eee;}

.box img {vertical-align:middle;}

<div class="box"><img src="地址" /></div>

★垂直、水平完美居中【-webkit-transform: translate(-50%,-50%);  -ms-transform: translate(-50%,-50%);  transform: translate(-50%,-50%);top: 50%; left: 50%; 】

●flex外层：【 display: flex; align-items: center; justify-content: center;padding: 0;margin: 0;height: 200px;】justify-content: center;/*水平居中*/ lign-items: center;/*垂直居中*/

★列表：list-style:square inside

★7、css实现分栏等高

  ▶ .box {display:flex;}

.el1 {height:auto;background:green;width:100px;}

.el2 {background:blue;flex:1;}

  ▶ span{display: table-cell;border: 1px solid #000;width: 100px}

table-cell会被其他一些CSS属性破坏，例如float, position:absolute

★float元素浮动后高度不一致导致错位

给换行后的第一个li添加clear:left 如

.c{clear:left;}

3.加元素√

.qq {width:500px;display:table-cell;height:400px;text-align:center;vertical-align:middle;border: 1px solid #000}

i {display:inline-block;height:100%;vertical-align:middle}

.qq img {vertical-align:middle;}

<div class="qq"><i></i><img src="http://www.baidu.com/img/baidu_logo.gif" /></div>

★标题不占高度100%的容器

.afull{position: relative;box-sizing: border-box;padding-top: 40px}

.afull>h2{font-size: 18px;line-height: 40px;box-sizing: border-box;height: 40px;border: 1px solid #000;width: 100%;background: #ccc;position: absolute;left: 0;top:0;text-align: center}

.afull>div{height: 100%;box-sizing: border-box;padding: 10px}

★选择器

▶部分选择

^  开头：class为gk-col-pc开头的li：li[class^="gk-col-pc"]{border: 1px solid #000}

*  包含：选择src包含abc的a：a[src*="abc"]

$  结尾：a[src$=\.pdf]。\用于转义“点”，也可以用单双引号a[src$=".pdf"]

▶后代兄弟选择器

，    混合选择$("#div1,.class1,span")

空格　后代　：分层选择$(".class2 span")或者$(".class2").find('span') | div p：该选择器选择所有div下的p后代元素

>　　 子　：只从子层中选择    $(".class2>span") | div > p 表示div的儿子辈的元素

~　　 兄弟　：选择 #id2 后面同一层级的所有(*)对象    $("#id2~*")  、div~p

+　　 下一个 ：选择所有紧跟在 div 后面的 span    $(".class2+span")

:　　 子(多功能)

*    div * p表示div的孙子辈及之后的元素。

input:checked  选中  选择选中的input元素

:not(p)       不是  选择不是p元素的元素 ■p:not(.demo)，$(".demo:not(.intro)")选择不包括.intro的.demo ■ul li:not(:first-child):not(:last-child)  //not可叠加使用

:hidden       不可见 选取所有不可见元素     p:hidden //元素p 隐藏的元素

:visible      可见  选取所有可见元素              p:visible'//元素p 显示的元素

":hidden"选取所有不可见的元素，有的浏览器还包含了<header>内所有标签，而且这里所指的不可见元素是样式为“display:none”和表单“type="hidden"”两种，而不包含“visibility:hidden”的隐藏元素。另外提醒大家，“:hidden”有的会导致选择中<header>内所有标签,所以建议前面加个元素标签。

▶label和input的绑定for<input type="radio" name = "fruit" id = "check1"/><label for="check1"></label>  :checked + label

▶选择子元素

序号写法：

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

:nth-child(n+4)选取大于等于4标签 /*4-无穷*/，“n”表示从整数

:nth-child(-n+4)选取小于等于4标签【第1到第4个】

倍数写法：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

倍数分组匹配：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

CSS 伪类 :nth-child(an+b)匹配在文档树中前面有an+b-1个兄弟元素的元素，此时n大于或等于0，并且该元素具有父元素。简而言之，该选择器匹配多个位置满足an+b的子元素。

:nth-of-type(n) 见下面p:first-of-type

示例：

1n+0，或n，匹配每一个子元素。

2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。

2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。

3n+4匹配位置为4、7、10、13…的子元素。

【循环颜色】

.safe_shigu_in>div:nth-child(5n+1) {background: #0292d9}

.safe_shigu_in>div:nth-child(5n+2) {background: #21a783}

.safe_shigu_in>div:nth-child(5n+3) {background: #c91b24}

a与b的值必须为整数，第一个子元素的位置为1，也就是说，该伪类匹配所有位置落在集合{an+b;n=0,1,2,…}中的元素。

tr:nth-child(2n+1)  表示HTML表格中的奇数行。

tr:nth-child(odd)    表示HTML表格中的奇数行。

tr:nth-child(2n)    表示HTML表格中的偶数行。

tr:nth-child(even)  表示HTML表格中的偶数行。

span:nth-child(0n+1) 表示子元素中第一个且为span的元素，与 :first-child 选择器作用相同。

span:nth-child(1)    同上。

span:nth-child(-n+3) 匹配前三个子元素中的span元素。

p:last-child        选择父级的最后一个子元素，是p可选，不是p则匹配不到任何元素

p:first-of-type      匹配到父元素里面的第一个<p>，无论它是第几个元素<div><img/><a></a>【<p></p>】</div>；

div:nth-last-child(n)  匹配属于其父元素的第N个子元素（从后往前）

div:only-child 匹配属于其父元素的唯一子元素

★8、透明度

背景透明度：background: rgba(255,204,51, 0.5)

整体透明度：.tm{-webkit-opacity: 0.5;-moz-opacity: 0.5;opacity: .5;filter:alpha(opacity=50);}

.byl{ color:rgb(255,0,0，0.5);}//文字透明

border: 1px solid transparent; //边框透明

★10、立体效果的边框border: 3px groove #7FBA57

★11、可输入的div

<div contenteditable="true"></div>

（要为block元素）

CSS代码：

.test_box {width: 400px; min-height: 120px; max-height: 300px;height: 120px;margin-left: auto; margin-right: auto;padding: 3px;outline: 0; border: 1px solid #a0b3d6;    font-size: 12px;    word-wrap: break-word;    overflow-x: hidden;    overflow-y: auto;    _overflow-y: visible;}

HTML代码：

<div class="test_box" contenteditable="true"><br /></div>

1、 现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框，而实际上textarea是没有虚框显示的，此迹象会暴露出div是个冒牌货，所以，需要添加下面的样式：

outline:0;

2、 Firefox浏览器下可编辑模式的div如果内部元素是空空的，那么其在获取焦点是时候，光标不可见或是与外部div齐高，这也是会暴露出自己是textarea冒牌货的，所以，默认情况下，我们可以在此div中增加一个孤单的<br />换行标签。但是，IE8下，如果有个默认的br标签，光标位置可能会在第二行闪来闪去，所以，IE8下可编辑div里面默认是不能有br标签的，这个嘛，您自己想办法清掉吧。

3、 IE浏览器下（IE6~8），输入文字回车的时候，div内部是会自动产生p标签包含每行元素的，而其他浏览器貌似是产生br标签（这里尚未全部测试，如有不准，欢迎指正）。由于默认的p标签是有1em大小的上下margin值的，为了效果统一，我们可以设置诸如下面的样式清除p标签的margin值：

.test_box p{ margin: 0; }

5、 IE6浏览器不支持max-height属性，所以，只用CSS是无法实现超过一定高度出现滚动条的效果，需要js配合实现。

6、 可编辑模式的div标签与textarea一样，是支持focus, blur事件的。自然也支持focus伪类，demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的:focus。

★12、自适应背景边框（ie7以下不支持）

background: url(地址) top left no-repeat,

url(地址) top right no-repeat,

url(地址) bottom left no-repeat,

url(地址) bottom right no-repeat,

url(地址) top repeat-x,

url(地址) bottom repeat-x,

url(地址) left repeat-y,

url(地址) right repeat-y;

    box-shadow: 0 0 2px #000;

  ▶自适应宽度标题（ie7以下不支持）

background: url(http://joymepic.joyme.com/wiki/images/dq10/7/73/Nav-left.png?v=201610261145)left no-repeat,

url(http://joymepic.joyme.com/wiki/images/dq10/4/44/Nav-right.png?v=201610261145)right no-repeat,

url(http://joymepic.joyme.com/wiki/images/dq10/2/2c/Nav-center.png?v=201610261145)center repeat-x;

    height: 39px;

    line-height: 39px;

    text-align: center;

▼ 多重背景最下面的图会被上面的覆盖

★多重背景

    ●background:  url(../images/sms-index_05_02_02-01.png) no-repeat center top,

          url(../images/sms-index_05_02_01.png) repeat-x #fff;

    ●background:url(../images/sms-index_06_02_02-01.png) no-repeat center -1046px;

    ●background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");

  background-repeat: no-repeat, no-repeat, no-repeat; 

  background-position: 0 0, 200px 0, 400px 201px;

★css选择器去除最后的元素：

选择除最后一个.post元素以外的.post元素

.post:not(:last-of-type) {

  border-bottom: 1px solid #eee;

  margin-bottom: .5rem;

  padding-bottom: .5rem;

}

★div设置高度百分比：将所有的父级都设置高度

html,body{height:100%;}

.page{min-height:100%; position:relative;}

.page .footer{position:absolute; left:0; bottom:0; height:200px; width:100%;}

通过以上实现了.：

1.当内容大于100%时，背景会自动扩充。如果.page使用height:100%，则会出现到一屏之后的背景断了。

2.当内容小于100%时，背景按照100%显示。

以上适用于需要做背景层始终靠在底部的。同时为了防止背景层遮住其它层，最好在footer上面一层加多一个padding-bottom:200px;(与背景层同高)

★5、div 加滚动条的方法：

<div style="height:400px; overflow:auto"></div>

★\n

\n仅对pre和js内容如console有效,仅innerText方式可用：document.write 和.text()

innerHTML 的方式，不能用：.innerHTML，换行用<br />

★rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高，1rem=1html的文字大小px

★box-sizing:content-box（padding和边框不计算在元素的宽高中）

/border-box（padding和边框都算在元素宽高中→加padding和边框，元素大小不变）√

★伪元素，如:before,:after,如果没有content，是无效的，可设为content:" "，空

content: " (" attr(id) ")";    :before,:after的内容为本体的id值<i id="wwwww"></i>  →结果：wwwww

content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";  →结果：【图片】MOZILLA:

  ▶content仅可用在:before,:after上！

★input-placeholder点击消失（chrome内核）

input:focus::-webkit-input-placeholder {color: transparent;} 

▶input-placeholder样式修改 （没有统一写法，必须分开写）

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {/* WebKit browsers */color: #666;}   

input:-moz-placeholder, textarea:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #666;}

input::-moz-placeholder, textarea::-moz-placeholder {/* Mozilla Firefox 19+ */color: #666;}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {/* Internet Explorer 10+ */color: #666;} 

★input-点击聚焦时原生边框颜色去除

border修改无用

input{outline:none} 

input:focus { outline: none; }

★/*滚动条样式*/

        .innerbox::-webkit-scrollbar {/*滚动条整体样式*/

            width: 4px;    /*高宽分别对应横竖滚动条的尺寸*/

            height: 4px;

        }

        .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

            border-radius: 5px;

            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

            background: rgba(0,0,0,0.2);

        }

        .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/

            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

            border-radius: 0;

            background: rgba(0,0,0,0.1);

        }

★标题栏的title前添加网站logo

1.将像素大小为16*16的图片命名为 favicon.ico,(图片使用的颜色好像不能超过16色),放到网站根目录下就可以了;

2.在head标签中添加代码(这种方法图标可以随意命名,也可以不放在根目录下):

　　标题栏: <link rel="icon" href="ico地址" type="image/x-icon"/>

　　收藏夹: <link rel="shortcut icon" href="ico地址" type="image/x-icon"/>

★关于内层DIV设置margin-top不起作用的，如下结构会发生

<div>上部层</div>

<div> <!--父层--><div style="margin-top:200px;">子层</div></div>

1、使用浮动来解决，即将子层代码改为：<div style="margin-top:200px;float:left";>子层</div>（不推荐，会导致塌陷）

2、使用padding-top来解决，父层加padding-top：1px即可（√）

3、给外层DIV加：

A、float: left或right

B、position: absolute

C、display: inline-block或table-cell或其他 table 类型

D、overflow: hidden或auto

★地址/路径

"."      代表目前所在的目录，相对路径。 如：<a href="./abc">文本</a> 或 <img src="./abc" />

".."    代表上一层目录，相对路径。 如：<a href="../abc">文本</a> 或 <img src="../abc" />

"../../" 代表的是上一层目录的上一层目录，相对路径。 如：<img src="../../abc" />

"/"      代表根目录,绝对路径。 如：<a href="/abc">文本</a> 或 <img src="/abc" />

"D:/abc/"代表根目录,绝对路径。

★h5原生日期选择

<input type="date" id="datePicker">

  ●赋值默认值为当天：document.getElementById('datePicker').valueAsDate = new Date();

<input type="date" value="2017-06-01" /> //自己设定默认值

::-webkit-datetime-edit – 控制编辑区域的

::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的

::-webkit-datetime-edit-text – 这是控制年月日之间的斜线或短横线的

::-webkit-datetime-edit-month-field – 控制月份

::-webkit-datetime-edit-day-field – 控制具体日子

::-webkit-datetime-edit-year-field – 控制年文字, 如2017四个字母占据的那片地方

::-webkit-inner-spin-button – 这是控制上下小箭头的

::-webkit-calendar-picker-indicator – 这是控制下拉小箭头的

::-webkit-clear-button –这是控制清除按钮的

  ●value赋值

<input type="date" value="2017-06-01" /> <input type="time" value="22:52" />

★mui选择列表<select>带三角符号

.sel1{ border:1px solid #ccc!important;-webkit-appearance:menulist; width: 85%; vertical-align: middle;}

select {

  /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/

  /*将默认的select选择框样式清除*/

  appearance:none;-moz-appearance:none;-webkit-appearance:none;

  /*如果要加入自定义图片， 就增加这个属性 background: url或者在html中直接加入图标也行*/}

/*清除iIE的默认选择框样式*/

select::-ms-expand { display: none; }

★图片从中间剪切 剪裁

图片有大有小，但是有时候我们需要图片显示的大小是一样，而且不能变形，那么我们需要加入以下代码

1.给图片设置宽高

2.加入object-fit: cover;这行代码

img{

display: block;

width:100%;

height: 6.917rem;

object-fit: cover;

} /*保持原有尺寸比例。但部分内容可能被剪切*/

★单选框的name一样表示是一组

★iframe出现奇怪的滚动条

第一种，设置iframe的vertical-align:top

第三种，改变iframe的内联元素性质，改为块级元素，display:block

★table一个表格太长导致不好看

如果某一个td的内容太多的话就导致样式混乱难看： 

要让table的宽度固定我们可以给table元素设置table-layout:fixed;样式，但这样表格的宽度问题是解决了，但是里面的内容并不会自动换行。我们还需要给td设置word-break: break-all; word-wrap:break-word;即可完美解决。

★好看的数字：font-family: "georgia", "STHeiti", "Microsoft YaHei", "simsun", "sans-serif", Arial;font-style: italic;

★穿透绝对定位的层使下面的链接可点击：pointer-events: none;ie6-10加hack“\9”，“*”

★absolute 元素的百分比宽高：是相对于其最近的 父级别的absolute／relative 元素来计算的（如没有则对body）

相对应的数值为  自身区域＋ padding 的区域总和

★空格【&nbsp;】 一个；  【&ensp;】 “en空格”两个普通空格的宽度； 【&emsp;】 4个

★计算写法calc(）：跟box-sizing:border-box冲突

●基础：【height: calc(100vh - 80px)】 【font-size: calc(3vw + 2px); width:  calc(100% - 20px)】

●复杂：【 width: calc( 100% / calc(100px * 2) );】 【width: calc((100% - 79px)*0.3)】

●部分属性的内作为单独的值：【margin: 10px calc(2vw + 5px);border-radius: 15px calc(15px / 3) 4px 2px;transition: transform calc(1s - 120ms);】【 background: #1E88E5 linear-gradient( to bottom,#1E88E5,#1E88E5 calc(50% - 10px), #3949AB calc(50% + 10px),#3949AB);】

●例子：一个两边靠边、中间空隙为5px的3等分写法

.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}

.col-3:nth-child(3n){margin-right: 0;}

●文字大小：html {  font-size: calc(100vw / 30);} ：在页面上的任何文本，将会根据你的视口自动缩放。更进一步，相同比例的视口总会显示相同的文本数量，不管视口的真实尺寸是多少

●calc(100%-10px)这个calc的百分比参考的是父级元素；height:100% 是基于父元素的 height 的高度。 width:100% 是基于父元素的 width 的宽度。但是 margin 和 padding 都是基于父元素的█宽度█计算的。和高度没啥关系。 所以100%是一样的。

████████████████████████████████████

★<iframe>

<iframe src="gk_list.html" width="100%" height= "100%" name="mainFrame" scrolling="No"  noresize="noresize" frameborder="0" id="mainFrame" style="vertical-align:top "></iframe>

<a class="" href= "gk_list.html" target= "mainFrame">

█栅格<div style="padding:30px;" class="bbg2">

            <!--不顶边30间隔的栅格-->

          <div class="layui-row layui-col-space30 bbg1" style="margin: 0">

            <div class="layui-col-md7 bg0">

              <div class="bg2">【不要用在100%高度，下面会缩回】layui-row要加，一个块元素的组，仅加了清除样式的功能</div>

            </div>

            <div class="layui-col-md5 bg1">

              <div class="bg2">30间隔的栅格</div>

            </div>

          </div>

        </div>

●圆圈+图标： i{width: 54px;height: 54px;border: 2px solid #367dfc;border-radius: 50%;text-align: center;line-height: 54px;font-size: 30px;color: #367dfc;margin-top: 24px}

●after右侧线：.box0 li::after{content: '';position: absolute;right: 0;top:10px;bottom: 0;width: 1px;background: red}

.box0 li:last-child::after{display: none}

display: flex;

  place-items: center;