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>
    

链接：
参考文档