css常用样式记录

记录常用的css样式，对不了解的地方进行掌握。div span 超出显示成省略号：

.title{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap; //规定段落中的文本不进行换行
word-break:keep-all;
}

多行文本省略：
1 确定溢出 .mls-ellipsis {
overflow: hidden;
position: relative;
max-height: 90px;
&::after {
position: absolute;
right: 0;
bottom: 0;
padding-left: 40px;
background: linear-gradient(to right, transparent, #fff 50%);
content: "...";
}
}
2.不确定溢出：

{

       100%;

      min-height: 141px;

      word-break: break-all;

      overflow: hidden;

       text-overflow: ellipsis;

         display: -webkit-box;

         word-break: break-all;

            -webkit-line-clamp: 5; // 最大行数

            -webkit-box-orient: vertical;

    }

圆：
border-radius:70%;

图片和文字同一列中心：
span{
    height:100%;
    vertical-align:middle;}
img{
    vertical-align:middle;}
    

灰色：#bbbec4;

父div中两个子div左右排列？
<div id="father" style="overfloat:hidden">
<div id="childen1" style="float:left"></div>
<div id="childen2" style="float:right"></div>
</div>

dom操作css
:style="{backgroundPositionY: -(positionY%7)*2.5 + 'rem'}",大小驼峰
:class="item.is_premium? 'premium': ''"
:class="{className: 表达式（boolean）}"

div section article ，语义是从无到有，逐渐增强的。div 无任何语义，
仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，
而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。
原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，
那么就不要使用 section 。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和
aside 更合适的情况下，也不要使用 section 了。
http://www.php.cn/html5-tutorial-5719.html

@media
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
@media screen and (min- 1200px) {
css-code;
}

@media screen and(min- 960px) and (max- 1199px) {css-code;
}

@media screen and(min- 768px) and (max- 959px) {css-code;
}

@media screen and(min- 480px) and (max- 767px) {
css-code;
}

@media screen and (max- 479px) {
css-code;
}
https://www.jianshu.com/p/b8f375b52a61

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

 

  padding: 8px 16px;
  background-color: #ecf8ff; // 淡黄色#fff3d4  淡橘色#ffe8d4 浅红#ffe7e8
  border-radius: 4px;
  border-left: 5px solid #50bfff; // 深黄色#f6b73c 深橘色#f69d3c 深红#e66465
  font-family: 'Helvetica Neue';
  font-weight: normal;
  margin-bottom: 5px;
  font-size: 15px;
  color: #5e6d82;
　max-500px;// 定义宽度

计算 ： calc(100vh-150px)

cssText介绍:https://www.cnblogs.com/majingyi/p/6840818.html

 

点击出现蒙层：

div:active{
      background-color: #F0F4F8;
      opacity:0.9;
    }

。。。loading

.loaddata {
          span {
            font-size: 14px;
            margin-top: 40px;
            color: #141f33;
          }
          span::after {
            content: '.';
            animation: loading 2s ease infinite;
            -webkit-animation: loading 2s ease infinite;
          }
          @keyframes loading {
            33% {
              content: '..';
            }
            66% {
              content: '...';
            }
          }
        }

 li标签 黑点处理 

list-style:none
//disc实心圆，默认值
//circle空心圆
//square实心方块
//decimal阿拉伯数字
//lower-roman小写罗马数字
//upper-roman大写罗马数字
//lower-alpha小写英文字母
//upper-alpha大写英文字母

关于vue css深度作用表达式： https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html