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>
    
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form><legend>health information</legend>

 

 

  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;// 定義寬度