HTML Css[记录]

圣杯布局：

.lyt{padding:0 100px 0 100px;}
.lyt:after{clear: both;content: " ";display: table;}
.lytCon,.lytR,.lytL{float: left;}
.lytCon{width: 100%;}
.lytL{width: 100px;margin-left: -100px;}
.lytR{width: 100px;margin-right: -100px;float: right;}

左右居中
　　.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;box-sizing: border-box;}

input 取消默认提示框
　　autocomplete="off"

ico添加
 <link type="image/x-icon" rel="shortcut icon" href="${ctxPath}/favicon.ico" />

改变鼠标

　　cursor: url(images/1.cur),auto;

html font-size: 26.666666666667vw;

1dp  ==  2px

<div class="cGray cSf">登录账号：12144545645</div>
display: flex;align-items: center;justify-content: center" p

Flex 布局：  

　　参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

圣杯布局
　　.cLytGrail,.cCouList li{padding:0 0.88rem 0 1.14rem;}
　　.cLytGrail:after,.cCouList li:after {clear: both;content: " ";display: table;}
　　.cLytGrail > div,.cCouList li > div{float: left;}
　　.cLytGrail_con{ 100%;}
　　.cLytGrail_l{ 1.04rem;margin-left: -1.14rem;}
　　.cLytGrail_r{ 0.88rem;margin-right: -0.88rem;float: right;}

　　圣杯布局 上下错开 fontsize

　　更多参考：https://www.cnblogs.com/lyzg/p/5160570.html

禁止横向滚动条出现

　　.noOvx{overflow:hidden;overflow-y:auto;overflow-x:hidden; 100%;}
　　.noOvx::-webkit-scrollbar { display: none }

CSS隐藏滚动条
　　.dom::-webkit-scrollbar {display:none}
　　兼容：https://www.cnblogs.com/alice626/p/6206760.html

background连写

　　background: url("") no-repeat right top / 100% 100%;

　　background: url("") no-repeat right top;   background-size:100% auto;

显示两行...

　　.ellipL2{
　　　　220px;
　　　　word-break:break-all;
　　　　display:-webkit-box;
　　　　-webkit-line-clamp:2;
　　　　-webkit-box-orient:vertical;
　　　　overflow:hidden;
　　　　background-color: burlywood;
　　}
　　line-height: 20px; max-height: 40px;

　　将height设置为line-height的整数倍，防止超出的文字露出。
　　给p::after添加渐变背景可避免文字只显示一半。
　　由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；
　　兼容ie8需要将::after替换成:after。

　　ellipL2{...}
　　ellipL2::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
　　　　background: -webkit-linear-gradient(left, transparent, #fff 55%);
　　　　background: -o-linear-gradient(right, transparent, #fff 55%);
　　　　background: -moz-linear-gradient(right, transparent, #fff 55%);
　　　　background: linear-gradient(to right, transparent, #fff 55%);
　　}

li     空行 -- 灰色     - - >       border-bottom    ||     margin

透明度

　　rgba（不继承）     opcity  （继承）

--------------------------------------------------------------

border-radius 小月亮
　　display: block;height: 0.18rem;border-left: 0.03rem solid #6e08a8;border-radius: 1rem;padding-left: 0.08rem;color: #333;