CSS3 常用易混的样式用法总结

╰半夏微凉° 2021-09-14 09:14 288阅读 0赞

本篇博客主要针对CSS3样式用法的一些知识点进行归纳总结，本篇通过以下几方面介绍样式用法：

*  字体样式
 *  盒子样式
 *  背景及边框样式
 *  变形样式
 *  动画样式
 *  Media Queries样式
 *  滤镜样式
 *  定位样式

# 字体样式 #

字体基础样式设置：

font-family：字体格式

font-size：字体大小

font-weight：字体粗细

text-shadow：字体阴影

效果图：  
![Center][]

关于font-size，em和rem的区别：

em单位：根据父元素的字体大小而计算出实际的字体大小  
rem单位：根据页面上的根元素，一般是指html元素的字体大小而计算出实际的字体大小

以下是转换对照图表：

![Center 1][]

关于font-family，如何引用系统外的字体？

方法：下载后缀名为.otf格式的文件，把该文件放到服务器中，可通过url链接引用到浏览器中：

效果图：  
![Center 2][]

# 盒样式 #

盒的阴影样式分为外阴影和内阴影，实现设置：box-shadow。

效果图：  
![Center 3][]

盒模型组成样式设置：box-sizing。

box-sizing: content-box; 不包含边框width（默认）。盒的width=盒内容width

box-sizing: border-box; 包含边框width。盒的width=盒边框width+盒内容width

效果图：  
![Center 4][]

盒显示样式设置：display，它包含多种效果设定：

display: inline; 表示元素的宽度只等于内容所在的宽度,设置width无效  
display: block; 表示元素的宽度占满了整个浏览器的宽度,且每一行只允许容纳一个block类型元素  
display: inline-block; 当没设置宽度时与inline效果相同，但设置width后，以width为准,常与vertical-align:middle配合使用  
display: table; 表示用div实现表格，通常tr设为display: table-row; td设为display: table-cell;  
display: inline-table; 当元素为table时，与inline-block效果相同  
display: none; 元素将不会被显示

效果图：  
![Center 5][]  
当盒中的段落超出盒子宽度时，我们常用的样式处理方法就是用省略号代替超出部分，代码如下：

效果图：  
![Center 6][]

要使盒宽高变为可动态拉伸，可以通过设置resize: both实现：

要使盒模型设置背景色、边框或内容等透明，可把要透明的属性设为transparent实现：

效果图：

![Center 7][]

# 背景及边框样式 #

背景基础样式设置：

background-clip : 指定背景的显示区域。  
——border-box:指定背景的显示范围包括边框，为默认设置。  
——padding-box:指定背景的显示范围不包括边框  
——content-box:指定背景的显示范围只包括内容

background-origin : 指定背景的绘制开始区域,当背景为纯色时，该值无效，参数值与background-clip相同

background-size : 指定背景图片的尺寸，参数值为宽和高。  
——当其中一个值为auto时，表示该值自动适应  
——当值为contain时，将把图片完全显示在元素中  
——当值为cover时，将把图片的宽或高经等比拉伸后填满元素内部

background-repeat : 指定背景图重复状态。  
——repeat: 按图像原大小尺寸重复铺满背景  
——no-repeat: 按单张图像原大小尺寸设置背景图  
——space: 按图像原大小尺寸重复铺满背景并不裁剪掉图像超出的部分，而是自动调整图像与图像间的间距  
——round: 重复铺满背景并不裁剪掉图像超出的部分，而是自动调整图像的尺寸

background-position : 设定显示背景图片的部位。

效果图：  
![Center 8][]

背景色渐变，包括线性渐变、圆形放射性渐变和椭圆形放射性渐变。

（1）线性渐变:  
background: linear-gradient(参数1：度数或线性方向，参数2：颜色渐变);  
——度数: 以图中心为原点，正上方位0deg，顺时针旋转

（2）圆形放射性: background-image: radial-gradient(circle,半径 at 坐标或起点位置，颜色渐变);  
——半径: 以像素为单位

——坐标：坐标值，如30px 30px

（3）椭圆形放射性:   
background-image: radial-gradient(ellipse,横向半径，纵向半径 at 起点位置或坐标,颜色渐变);

——横向半径，纵向半径: 以像素为单位

——起点位置: 9方向。同圆形放射性渐变。

——坐标位置：坐标值，如30px 30px

效果图：  
![Center 9][]

边框样式设置，通过border-radius实现：

border-radius : 指定圆角半径。

（1）当为一个参数时，表示4个角的圆角半径；

（2）当为两个参数时，第一个半径表示左上角和右下角，第二个半径表示右上角和左下角。

（3）当为4个角设置不同圆角半径时，使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius分别设置。

效果图：  
![Center 10][]

# 变形样式 #

变形样式可以通过设置transform实现：

transform: scale(); 缩放

transform: skew(); 斜切

transform: rotate(); 旋转

transform-origin: x.px y.px; 设置基点,默认为中心点

效果图：  
![Center 11][]

## 动画样式 ##

动画样式的设置原生提供的有两种方式：transition和animation。它们的区别在于在渐变过程中transition仅支持开始和结尾的状态渐变，而animation支持多种过渡状态渐变。

（1）transition实现动画

（2）animation实现动画

（注）此处就不贴动态效果图了。

# MediaQueries样式 #

mediaQueries是指根据不同的浏览器宽高，可以实现不同的显示样式布局的效果。比如同一个网页文件，根据PC端、IPAD端和手机端显示不同的布局效果。其中主要用到了@media only screen and...

测试代码：

<!DOCTYPE html>
    <meta charset="utf-8" />
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style>
    			#container {
    				width: 960px;
    				margin: 0px auto;
    			}
    			
    			#wrapper {
    				width: 740px;
    				float: left;
    			}
    			
    			#sub01 {
    				width: 200px;
    				float: left;
    				background-color: orange;
    			}
    			
    			#main {
    				width: 520px;
    				float: right;
    				background-color: yellow;
    			}
    			
    			#sub02 {
    				width: 200px;
    				float: right;
    				background-color: green;
    			}
    			
    			#main,
    			#sub01,
    			#sub02 {
    				line-height: 600px;
    				text-align: center;
    				font-weight: bold;
    				font-size: 2em;
    			}
    			
    			@media only screen and (min-width: 1000px) {
    				#container {
    					width: 960px;
    				}
    				#wrapper {
    					width: 740px;
    					float: left;
    				}
    				#sub01 {
    					width: 200px;
    					float: left;
    				}
    				#main {
    					width: 520px;
    					float: right;
    				}
    				#sub02 {
    					width: 200px;
    					float: right;
    				}
    			}
    			
    			@media only screen and (min-width: 640px) and (max-width: 999px) {
    				#container {
    					width: 640px;
    				}
    				#wrapper {
    					width: 640px;
    					float: none;
    				}
    				#sub01 {
    					width: 200px;
    					float: left;
    				}
    				#main {
    					width: 420px;
    					float: right;
    				}
    				#main,
    				#sub01,
    				{
    					line-height: 400px;
    				}
    				#sub02 {
    					width: 100%;
    					float: right;
    					clear: both;
    					line-height: 150px;
    					margin-top: 10px;
    				}
    			}
    			
    			@media only screen and (max-width: 639px) {
    				#container {
    					width: 100%;
    				}
    				#wrapper {
    					width: 100%;
    					float: none;
    				}
    				#sub01 {
    					width: 100%;
    					float: none;
    				}
    				#main {
    					margin-top: 10px;
    					width: 100%;
    					float: none;
    				}
    				#sub01,
    				#main {
    					line-height: 250px;
    				}
    				#sub02 {
    					width: 100%;
    					float: none;
    					margin-top: 10px;
    					line-height: 150px;
    				}
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="container">
    			<div id="wrapper">
    				<div id="sub01">
    					SUB 01
    				</div>
    				<div id="main">
    					MAIN
    				</div>
    			</div>
    			<div id="sub02">
    				SUB 02
    			</div>
    		</div>
    	</body>
    	<script>
    	</script>
    
    </html>

效果图：  
![Center 12][]

![Center 13][]

![Center 14][]

# 滤镜样式 #

滤镜样式设置通过filter实现，测试代码如下：

<!DOCTYPE html>
    <meta charset="utf-8" />
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style>
    			div {
    				display: flex;
    				flex-direction: row;
    			}
    			
    			figure {
    				width: 50%;
    				text-align: center;
    				color: red;
    			}
    			
    			#f2 {
    				/*filter: grayscale(100%);
    				-webkit-filter: grayscale(100%);*/
    				/*灰度滤镜*/
    				/*filter: sepia(100%);
    				-webkit-filter: sepia(100%);*/
    				/*棕褐色滤镜*/
    				/*filter: saturate(200%);
    				-webkit-filter: saturate(200%);*/
    				/*饱和度滤镜*/
    				filter: hue-rotate(180deg);
    				-webkit-filter: hue-rotate(180deg);
    				/*光环滤镜*/
    				/*filter: invert(100%);
    				-webkit-filter: invert(100%);*/
    				/*颜色翻转滤镜*/
    				/*filter: opacity(10%);
    				-webkit-filter: opacity(10%);*/
    				/*透明度滤镜*/
    				/*filter: contrast(200%);
    				-webkit-filter: contrast(200%);*/
    				/*对比度滤镜*/
    				/*filter: blur(2px);
    				-webkit-filter: blur(2px);*/
    				/*模糊滤镜*/
    				/*filter: drop-shadow(4px -4px 6px purple);
    				-webkit-filter: drop-shadow(4px -4px 6px purple);*/
    				/*阴影滤镜*/
    			}
    		</style>
    	</head>
    
    	<body>
    		<div>
    			<figure id="f1">
    				<img src="../../../img/img.jpg" />
    				<figcaption>原图</figcaption>
    			</figure>
    			<figure id="f2">
    				<img src="../../../img/img.jpg" />
    				<figcaption>滤镜</figcaption>
    			</figure>
    		</div>
    	</body>
    	<script>
    	</script>
    
    </html>

效果图：  
![Center 15][]

# 定位样式 #

position属性规定了元素的定位类型，通过定位，可准确地定义元素相对于其正常位置而应该出现的位置，或者是相对于父元素、另一元素和浏览器窗口等的位置。

position属性主要包含有4个属性值，分别为static、relative、absolute、fixed。

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#c0c0c0;">属性值</td> 
   <td style="border-color:#c0c0c0;">描述</td> 
   <td style="border-color:#c0c0c0;">所属类别</td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;">static</td> 
   <td style="border-color:#c0c0c0;"> <p style="margin-left:10px;">默认值，元素遵循默认的文档流。</p> </td> 
   <td style="border-color:#c0c0c0;">默认</td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;">relative</td> 
   <td style="border-color:#c0c0c0;"> <p>元素遵循默认的文档流。</p> <p>相对于元素的原位置进行移动，周围元素忽略该元素的移动。</p> <p>需要设置top、bottom、left、right值进行定位。</p> </td> 
   <td style="border-color:#c0c0c0;">相对定位</td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;">absolute</td> 
   <td style="border-color:#c0c0c0;"> <p>元素脱离正常文档流。</p> <p>相对于包含该元素的最近一级的非静态定位（即static默认值）的元素进行定位，若不满足条件，则会根据最外层的window进行定位。</p> <p>需要设置top、bottom、left、right值进行定位。</p> </td> 
   <td style="border-color:#c0c0c0;">绝对定位</td> 
  </tr> 
  <tr> 
   <td style="border-color:#c0c0c0;">fixed</td> 
   <td style="border-color:#c0c0c0;"> <p>元素脱离正常文档流。</p> <p>相对于最外层的window进行定位，固定在屏幕上的某个位置，不因屏幕滚动而消失。</p> <p>需要设置top、bottom、left、right值进行定位。</p> </td> 
   <td style="border-color:#c0c0c0;">绝对定位</td> 
  </tr> 
 </tbody> 
</table>

（注）文档流是指标签中会默认从左至右，从上到下排列元素的规则，如div元素默认情况会独占一行。

参考案例：

<!DOCTYPE html>
    <meta charset="utf-8" />
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="holder.js"></script>
    		<style>
    			#all {
    				width: 500px;
    				height: 400px;
    				border: dashed 5px black;
    				margin-left: 100px;
    				position: absolute;
    			}
    			/*黑色虚线边框*/
    			
    			#container {
    				width: 300px;
    				height: 300px;
    				border: dashed 5px orange;
    				margin-left: 100px;
    				/*position: absolute;*/
    			}
    			/*橙色虚线边框*/
    			
    			#d1 {
    				background-color: yellow;
    				width: 100px;
    				height: 100px;
    				position: absolute;
    				top: 0px;
    				left: 0px;
    			}
    			
    			#d2 {
    				background-color: #B0E0E6;
    				width: 100px;
    				height: 100px;
    				position: relative;
    				top: 0px;
    				left: 100px;
    			}
    			
    			#d3 {
    				background-color: #FFC0CB;
    				width: 100px;
    				height: 100px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="all">
    			<div id="container">
    				<div id="d1">
    					div1
    				</div>
    				<div id="d2">
    					div2
    				</div>
    				<div id="d3">
    					div3
    				</div>
    			</div>
    		</div>
    	</body>
    
    </html>

效果图：  
![Center 16][]  
解析：上例中\#d1为absolute布局，所以它以最近一级非静态定位的父结构元素为参考坐标系，即黑色虚线边框的\#all。\#d2为relative布局，所以它以当前容器为参考坐标系，其位移不会影响到周围元素，即\#d3。

[Center]: /images/20210813/58df1b7e42e84ef4b97985c03857a8c0.png
[Center 1]: /images/20210813/35870831e18a4acbabc567da8f2d782d.png
[Center 2]: /images/20210813/7be1c537658f4b0589d1726c39e64ca9.png
[Center 3]: /images/20210813/105476b7b6fa43b591d4966280325263.png
[Center 4]: /images/20210813/6c0ae5204ff945248618625e06eec2a4.png
[Center 5]: /images/20210813/52e6113e6c304513ac33bd0ec2643b8f.png
[Center 6]: /images/20210813/3e7d59497c61405ba3ee395ae51f748e.png
[Center 7]: /images/20210813/c0e9ce91a0af4360b01f9920122e6a44.png
[Center 8]: /images/20210813/096de414f3ee44a5890033974d86e13f.png
[Center 9]: /images/20210813/3f8c1ff75ffa45ebb2d59433f6a09a2b.png
[Center 10]: /images/20210813/30b1a60ca72744d3960f08b06c0eea40.png
[Center 11]: /images/20210813/473fcb3e95834e42ab5e823d6bd07972.png
[Center 12]: /images/20210813/d43f082c1ac6472ca84f883fa6601b21.png
[Center 13]: /images/20210813/f054ff2db9e44030b9080ac8c15bff74.png
[Center 14]: /images/20210813/3c515c7542b346dfae7c1299b2c4c654.png
[Center 15]: /images/20210813/c26eee207fad4032b650732f9e174b92.png
[Center 16]: /images/20210813/03143596272c42d889303b84fab4122e.png