[程式] CSS Tips

• Center at horizontal
  
  width: <?px> or <?%>;
  display:block;
  margin: auto;
• Center at horizontal and vertical
  .<class name> or #<id> {
      height:    <?px> or <?%>;
      position: absolute;
      left:         0;
      right:       0;
      top:         0;
      bottom:   0;
      margin:   auto;
  }
• Make <div>'s width = content(text)
  
  display為default
  display: inline-block;
  
  
  
• 外框 with 箭頭 (標籤)
  利用margin和border形成方塊
  接著將除一邊以外的邊框設定為透明形成三角形
  再重疊與外框顏色相同的小三角形(以相同方式產生)造成箭頭
  
  
  // 外框
  .arrow_box {
    position: relative;                 // 作為箭頭的位置依據
    background: greenyellow;   // 背景顏色
    border-radius: 5px;              // 圓角程度設定
    border: 2px solid white;       // 邊框 粗細, 樣式, 顏色
  }
  
  // 箭頭位置
  .arrow_box:after,
  .arrow_box:before {
    position: absolute;                // 位置於外框的相對位置
    bottom: 100%;                      // 箭頭位於外框的上/下/左/右 => bottom/top/right/left
    left: 5%;                                // 箭頭離左上角的距離(中間設為50%)
                                                 // 箭頭位於外框的上/下 => left or right
                                                 // 箭頭位於外框的左/右 => top or bottom
    height:   0;
    width:    0;
    border:   solid transparent;  // 必須設定樣式才能順利顯示箭頭
    content:  " ";
  }
  
  // 箭頭外框(大方塊-大三角形)
  .arrow_box:before {
    border-color: transparent;      // 設定大方塊的邊框顏色為透明
    border-bottom-color: white;   // 設定大方塊下邊框顏色(與外框顏色相同)
    border-width: 18px;                // 設定箭頭大小
    margin-left: -18px;                  // 箭頭位於外框的上/下 => margin-left
                                                   // 箭頭位於外框的左/右 => margin-top
  }
  
  // 箭頭內部(小方塊-小三角形)
  .arrow_box:after {
    border-color: transparent;                // 設定小方塊的邊框顏色為透明
    border-bottom-color: greenyellow;   // 設定小方塊下邊框顏色(與外框背景顏色相同)
    border-width: 16px;                          // 設定箭頭框的粗細
    margin-left:   -16px;                          // 箭頭位於外框的上/下 => margin-left
                                                             // 箭頭位於外框的左/右 => margin-top
  }
  Ref: http://cssarrowplease.com/