CSS樣式（一）

1. 盒模型

   1. 模型分爲盒子模型和內容模型，
   2. 內容模型就是 寬高 = content
   3. 盒子模型就是寬高= content + padding + border

   // css
   html {
   	box-sizing: border-box;
     }
     *,*::before,*::after {
     	box-sizing: inherit;
     }
     .box {
     	display: inline-block;
     	width: 150px;
     	height: 150px;
     	padding: 10px;
     	background: tomato;
     	color: white;
     	border: 10px solid red;
     }
     .content-box {
     	box-sizing: content-box;
     }
   
   // html
   <div class="box">border-box</div>
   <div class="box content-box">content-box</div>
   

2. 清除浮動

   1. 無需藉助輔助元素進行浮動的清除。
   2. 注意：這僅在使用float佈局時纔有用。實際場景中請考慮使用Flexbox佈局或者網格佈局

   // css
   .clearfix {
     	border: solid 1px red;
     }
     .clearfix:after {
     	content: '';
     	display: block;
     	clear: both;
     }
     .floated {
     	float: left;
     	margin-left: 20px;
     }
     // html
   	<div class="clearfix">
   	 	<div class="floated">a</div>
   	 	<div class="floated">b</div>
   	 	<div class="floated">c</div>
   	 </div>
   

3. 不變寬高比

   1. width:50% 只設置父級元素的寬度
   2. ::before 爲父級元素定義一個僞元素
   3. padding-top:100% 設置僞元素的內上邊距，這裏的百分比的值是按照寬度計算的，所以會呈現爲一個響應式的元素塊
   4. float: left 浮動元素會生成一個塊級框，使百分比的內邊距生效
   5. 此方法還允許將內容正常放置在元素內

   // css
     .constant-width-to-height-ratio {
     	background: #eee;
     	width: 50%;
     }
     .constant-width-to-height-ratio::before {
     	content: '';
     	padding-top: 100%;
     	float: left;
     	background: tomato;
     }
     .constant-width-to-height-ratio::after {
     	content: '';
     	display: block;
     	clear: both;
     	background: yellow;
     }
   
     // html
    <div class="constant-width-to-height-ratio">
    	<p>aaa</p>
    </div>
   

4. 讓圖片在容器中顯示的更舒適

   1. object-fit:contain 容器內顯示整個圖像，並且保持寬高比
   2. object-fit:cover 用圖像填充容器，並保持寬高比
   3. object-position:[x][y] 對圖像的顯示部位進行調整

   	// css
   	 .image {
   	  	background: #eee;
   	  	border: 1px solid #eee;
   	  	width: 200px;
   	  	height: 200px;
   	  }
   	  .image-contain {
   	  	object-fit: contain;
   	  	object-position: center;
   	  }
   	  .image-cover {
   	  	object-fit: cover;
   	  	object-position: right top;
   	  }
   	  // html
   	<div>
   		<img class="image image-contain" src="./preview.jpeg">
   		<img class="image image-cover" src="./preview.jpeg">
   	</div>
   

5. 使最後一項佔滿剩餘高度

   	// css
   	 .container {
   	  	height: 500px;
   	  	display: flex;
   	  	flex-direction: column;
   	  }
   	  .container > div:first-child {
   	  	flex: 1;
   	  	background: tomato;
   	  }
   		
   	 // html
   	  <div class="container">
   	 	<div>a</div>
   	 	<div>b</div>
   	 	<div>c</div>
   	 </div>
   

6. 使用transform居中子元素

   // css
     .parent {
     	border: 1px solid #eee;
     	height: 250px;
     	position: relative;
     	width: 250px;
     }
     .child {
     	position: absolute;
     	left: 50%;
     	top: 50%;
     	transform: translate(-50%, -50%);
     	text-align: center;
     }
   // html
   <div class="parent"><div class="child">center</div></div>
   

7. 自定義文本選擇的樣式

   // css
     ::selection {
     	background: aquamarine;
     	color: black
     };
     .custom-text-selection::selection {
     	background: deeppink;
     	color: white;
     };
   	
   // html
   <p class="custom-text-selection">Select some of the word</p>
   

8. :not 僞類選擇器

   1. :not僞選擇器對於設置一組元素的樣式非常有用，同時保留最後一個（指定的）元素的樣式

   	// css
   	 .css-not-selector-shortcut {
   	  	display: flex;
   	  }
   	
   	  ul {
   	  	padding-left: 0;
   	  }
   	
   	  li {
   	  	list-style-type: none;
   	  	margin: 0;
   	  	padding: 0 0.75rem;
   	  }
   	  li:not(:last-child) {
   	  	border-right: 2px solid #eee;
   	  }
   		
   	  // html
   	  <div class="container">
   	 	<div>a</div>
   	 	<div>b</div>
   	 	<div>c</div>
   	 </div>
   

9. 重置所有樣式

   1. all屬性允許您將所有樣式（繼承或不繼承）重置爲默認值

   // css
     .reset-all-styles {
   	  all: initial;
   	}
   // html
   <p class="reset-all-styles">aaa</p>
   

10. 內容無法選取

    	// css
    	.unselectable {
    	  user-select: none;
    	}
    
    	// html
        <p class="unselectable">this is a content </p>
    

11. 計算函數 Calc()

    1. 允許加法，減法，乘法和除法
    2. 可以爲表達式中的每個值使用不同的單位（例如，像素和百分比）
    3. 允許嵌套calc（）函數

    	// css
    		width: calc(100% + 48px);
    

12. css 自定義變量

    1. 包含要重用的特定值的CSS變量

    	// css
    	custom-variables {
    	  	--some-color: #da7800;
    	  	--some-keyword: italic;
    	  	--some-size: 1.25em;
    	  	--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
    	  	color: var(--some-color);
    	  	font-size: var(--some-size);
    	  	font-style: var(--some-keyword);
    	  	text-shadow: var(--some-complex-value);
        }
    	  // html
    	  <p class="custom-variables">CSS is awesome!</p> 
    

13. 屏外隱藏元素

    1. 刪除所有邊框
    2. 使用 clip 隱藏元素
    3. 設置寬高爲1px
    4. 使用margin：-1px取消元素的高度和寬度
    5. 隱藏元素的溢出
    6. 移除所有的padding
    7. 絕對定位元素，使其不佔用DOM中的空間

    	// css
    	.offscreen {
    	  	border: 0;
    	  	clip: rect(0 0 0 0);
    	  	width: 1px;
    	  	height: 1px;
    	  	margin: -1px;
    	  	overflow: hidden;;
    	  	padding: 0;
    	  	position: absolute;
    	  }
      // html
      <a class="button">Learn <span class="offscreen"> ablout </span></a>
    

鏈接：
參考文檔