前台CSS样式使用小结

最近做Vue前台相关的项目, 使用了一些前台CSS的知识, 作为笔记mark一下吧

1. 关于定位

**水平居中:** 
    文字(text-align: center;); 
    元素: (margin: 0px; auto)
**垂直居中:** 
    文字(line-height: 20px; height:20px;), 
    元素: (vertical-align: middle/sub;)
    于父元素定位: 父元素 (position: relative;) 
    子元素(position: absolute; left/top..)
    img居中显示: (height/width: 1px;position: relative;top: 50%;left: 50%;margin-top: -25px; /* 高度的一半 */margin-left: -25px; /* 宽度的一半 */)

2. 颜色

png/元素透明: (background-color: transparent;)
visibility：hidden; 则相当于完全从文档流中删除了该元素，但尺寸仍然保留。vue(v-show)/angularjs(n-show)
opacity：0; 则仅仅不可见，但仍可被浏览器发现，也就能触发各种事件
display: none; 元素被移除, 不被渲染; //在vue(v-if)/angularjs(n-if)

3. 伪元素:

背景

:before{
    content: "";
    position: absolute;
    top: 0px;right: 0px;
    width: 20px;height: 20px;
    background: url(/img/pic.png) no-repeat;
}

3. 优先级

强制优先: left: auto !important; /*!important*/

4. CSS 事件

屏蔽鼠标事件: pointer-events: none;
拖拽事件: draggable:false;
hover事件: li:hover{cursor: pointer;}

5. 选择器

li:last-child; &:first-child; /*less 写法: &: 当前的元素*/
li:nth-child(n+6) {display: none;} /*隐藏第5以后的元素*/
li:nth-child(3n) {display: none;} /*隐藏3的倍数的元素*/

6. 其他

鼠标样式: cursor: pointer/default;

scroll样式:

/*scroll body*/
scrollBody{
    overflow-y: scroll;
    overflow-x: visible;
}   
/*定义滚动条轨道 轨道背景*/
#class::-webkit-scrollbar-track
{
    width: 10px;
    background-color: #CCC;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*定义滚动条高宽及背景 滚动条整体部分*/
#class::-webkit-scrollbar
{
    width: 10px;
    background-color: rgba(0, 0, 0, 0.34);
}
/*定义滚动条 下移动的滑块*/
#class::-webkit-scrollbar-thumb
{
    background-color: #DBDBDB;
    border-radius: 10px;
}

---

列出来整体例子
Html

<div id="wrapper">
  <div class="scrollbar" id="style-default">
  <div class="force-overflow"></div>
   </div>

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

    <div class="scrollbar" id="style-2">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-3">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-4">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-5">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-6">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-7">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-8">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-9">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-10">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-11">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-13">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-14">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-15">
      <div class="force-overflow"></div>
    </div>
</div>

CSS

header
{
    font-family: 'Lobster', cursive;
    text-align: center;
    font-size: 25px;    
}

#info
{
    font-size: 18px;
    color: #555;