前端知识随笔-css篇

随着实战项目的不断增多和平常知识的累积，但就css而言，五花八门的知识越来越多，有些是之前已知的，有些是现在未知的。决定来篇随笔记录下，方便日后。

1. 使用纯CSS阻止鼠标点击事件

通常情况下，我们会使用JS的preventDefault来阻止鼠标点击事件

  <!--html-->
  <a id="jianshu" href="http://www.jianshu.com/">简书</a>

  // js
  document.getElementById('jianshu').onclick = function(e) {
     e.preventDefault();
  }

其实纯CSS一行代码就搞定

  /*css*/
  #jianshu { pointer-events: none }

---

2.文字两端对齐

在CSS中，文字默认居左，可以设置居中或者居右；

text-align: left; // 居左
text-align: center; // 居中
text-align: right; // 居右

在一段文字中，如果有中英文相间还有标点符号的话，这样在这篇段落的右边难免会出现不对齐的情况，如下图所示：

image.png

这时候就要用到text-align的另外一个属性，justify

text-align: justify; // 两端对齐

设置之后，如下图所示：

image.png

---

3.calc 左边定宽，右边自适应

  <!--html-->
  <div>
      <div class="left">
          left
      </div>
      <div class="right">
          right
      </div>
  </div>

   /*css*/
   .left {
      width: 220px;
      float: left;
   }
   .right {
      width: calc(100% - 220px);
      width: -moz-calc(100% - 220px);
      width: -webkit-calc(100% - 220px);
      float: left;
      background-color: teal;
   }