css常用样式记录

记录常用的css样式，对不了解的地方进行掌握。

div span 超出显示成省略号：
.title{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap; //规定段落中的文本不进行换行
word-break:keep-all;
}

圆：
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-width: 1200px) {
css-code;
}

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

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

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

@media screen and (max-width: 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-width:500px;// 定义宽度

 

计算 ： calc(100vh-150px)

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

 

点击出现蒙层：

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

　　

转载于:https://www.cnblogs.com/wilsunson/p/9438154.html