1、CSS重置

*{
     box-sizing:border-box;
     margin:0;
     padding:0
}

2、繼承盒模型

html {    
    box-sizing: border-box;  
}    
*, *:before, *:after {    
    box-sizing: inherit;  
}

3、flex避免margin問題

.flex-container{
  display:flex;
  justify-content:space-between; 
  /* 橫向對齊方式
    flex-start : 居左
    flex-end : 居右
    center : 所有元素作為一個整體 居中
    space-between : 不同元素分開 居中
    space-around : 不同元素分開 居中（first之前、last之後）
    initial : 預設
    inherit : 跟隨父元素
  
 
*/
}
.flex-container .item{              
  flex-basis:23%;
}

4、:not() 解決list邊框問題

ul li:not(:last-child) {    
    border-right: 1px solid #666;  /* ul下的除了最後一個li元素  其他li元素都增加的樣式 */
}
#first_ul li + li {
    border-left: 1px solid #f00;
}
#first_ul li:first-child ~li {
    border-left: 1px solid #f00;
}
/*
 
 以上三個都可以滿足，但not更具語義化也更容易理解 */

5、body增加line-height樣式

body {
    line-height: 1.5; /* 渲染行高是 渲染字型大小的1.5倍 */
}

6、垂直居中任何元素

html, body {
    height: 100%;    
    margin: 0;
}    
body {    
    -webkit-align-items: center;    
    -ms-flex-align: center;    
    align-items: center;    
    display: -webkit-flex
 
;    
    display: flex;  
}

7、“OWL選擇器”

* + * {    
    margin-top: 1.5rem;  /* 跟在其他元素後面的元素，他們之間至少1.5rems的間距 */
}

8、一致的垂直結構

.intro > * {   
   margin-bottom: 1.25rem;  
}

9、針對同一元素中的內容換行樣式不和諧的處理方法

.p {
  display: inline-block;
  width:100px;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

10、使用屬性選擇器顯示空連結

<a href="https://www.baidu.com"></a>

a[href^="http"]:empty::before {    
    content: attr(href);  
}

11、等寬表格單元格

.calendar {    
    table-layout: fixed;  
}

12、樣式‘預設’連結

a[href]:not([class]) {    
    color: #999;    
    text-decoration: none;  
    transition: all ease-in-out .3s;
}

13、隱藏未靜音的視/音訊

video[autoplay]:not([muted]) {    
    display: none;  
}

14、表單元素設定字型大小

input[type="text"],  
input[type="number"],  
select,  
textarea {    
    font-size: 16px;  
}

15、CSS變數

:root {
  --main-color: #06c;
  --accent-color: #999;
}

h1, h2, h3 {
  color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
 color: var(--accent-color);
}