CSS精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/wangfeijiu/article/details/107170221

CSS 指层叠样式表 (Cascading Style Sheets)，它定义如何显示 HTML 元素，使用外接CSS样式表可以把样式代码和HTML 分离。

CSS的语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS的形式

外联式Linking（也叫外部样式）：将网页链接到外部样式表。
嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

CSS选择器

元素选择器：通过元素的名称找到指定标签
🌰 h1{color:red}
类选择器：通过标签的class属性值选中指定元素，class可以在多个元素中使用
🌰 .box{color:red}
id选择器：通过id找到元素，一个HTML文件中id不能重复
🌰 #box{color:red}
派生选择器（后代选择器or嵌套选择器）：类似于路径，找到符合要求的元素，会匹配所有的后代元素
🌰 ul li p{color:red}
补充：匹配<ul>里面所有<li>中的全体<p>元素
子元素选择器：和后代类似，但是只能获得子元素
🌰 ul>li>p{color:red}
补充：匹配<ul>里面所有<li>中的子元素为<p>的元素

<ul>
<li><div><p>这个不是li的子元素</p></div></li>
</ul>

分组选择器：可以将多种选择器结合到一起使用，用来统一设定样式
🌰 h1,h2,#abc,.m{color:red}
属性选择器：根据元素的属性及属性值来选择元素
🌰 *[title]{color: red;} a[title][href]{color: red;}
相邻兄弟选择器：紧接在另一个元素后的元素，而且二者有相同的父元素
🌰 h3+i{color: red;}
补充：<h3>与<i>是相邻兄弟，为<i>的元素添加样式
伪类选择器：用于向某些选择器添加特殊的效果
🌰 a:first-child:link {color: red;} div:first-letter{color: red;}
补充：并非所有元素都可使用伪元素，区分块级元素和行内元素的

		/* 每个x元素的父元素中第 n 个且为x的子元素  n可以是odd表示奇数 even表示偶数*/
			/* x.parent.childern[n-1]==x   [0][1]...*/
			p:nth-child(2){
				background-color: cadetblue;
			}
			
			/* 每个x元素的父元素中倒数第 n 个且为x的子元素  */
			/* x.parent.childern[len-n]==x   [0][1]...*/
			p:nth-last-child(3){
				font-size: small;
			}
			
			/* 每个x元素的父元素中第 n 个x元素  */
			/* x.parent.xchildernArray[n-1]   */
			p:nth-of-type(2){
				color: red;
			}
			
			/* 每个x元素的父元素中最后1️⃣个x元素  */
			/* x.parent.xchildernArray[len-1]   */
			p:last-of-type{
				font-style: oblique;
			}
			
			/* 每个x元素的父元素中最后一个子元素且为x的元素 有点莫名其妙的是：x的父元素不能body  */
			/* x.parent.childern[len-1]==x&&x.parent!=body   */
			p:last-child{
				font-weight: bold;
			}

CSS选择器在线代码案例展示

xx-child()选择器在线演示

CSS 三大特性

层叠

层叠就是为了在二维界面模拟出三维视觉效果设置的规则。了解更多：《css层叠与继承》

继承

CSS 属性的继承分为默认继承的和默认不继承的，但所有属性都可以通过设置 inherit 实现继承。如：关于文本的样式属性大部分都是默认继承的。

优先级

如果某元素的某个属性设置了多个选择器中都设置了该属性的值，最终选取哪个的值呢？当然是权重大的属性值啊！!important>内联式 > 嵌入式 > 外联式> 浏览器默认样式(User Agent Stylesheet) 。了解更多：《css优先级》

CSS 属性缩写

能缩写的属性的属性值普遍都比较容易甄别，一般指的是单位没有冲突的属性。有一些属性缩写后对属性值排序顺序的没有强制要求，比如background，但是margin就对各个属性顺序有严格要求。

只列出几个常用的属性缩写，并非涵括了全部属性值进来，还可以附加更多的属性值。

background
background: silver url(img/building_small.jpg) no-repeat ;

background-color: silver;
background-image: url(img/building_small.jpg);
background-repeat: no-repeat;

border
border: 1px solid yellow;

border-width: 1px;
border-style: solid;
border-color: yellow;

font
font: italic bold 20px/35px arial, sans-serif, "微软雅黑";

font-style: italic;
font-weight: bold;
font-size: 20px;
line-height: 35px;
font-family: arial, sans-serif, "微软雅黑";

margin

.margin1{margin:10px 15px 10px 15px;}/* 上 右 下 左 */
.margin3{margin: 10px 15px 10px;}/* 上 左右 下 */
.margin4{margin: 10px 15px }/* 上下 左右  */
.margin5{margin: 10px;}/* 上下左右  */

list-style
list-style: square url('https://www.w3school.com.cn//i/eg_arrow.gif') inside;

list-style-type: square;
list-style-image: url('https://www.w3school.com.cn//i/eg_arrow.gif');
list-style-position: inside;

CSS属性缩写在线代码案例展示

CSS盒子模型

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

content

设置元素的width和heigh实际设置了什么？

<div style="padding: 10px 0;height: 100px;width: 100px;"></div>

在这里插入图片描述

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

元素的总宽度=内容区域的宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度=内容区域的高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

padding

padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
padding可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

border

可以通过单独对边设置样式，设置出好看效果

p{
		border-left-style: solid;
		border-left-width: 5px;
		border-left-color: blue;
		background-color: #87CEEB;
	}

在这里插入图片描述
3D边框样式，需要结合边框颜色才能更好体现

p {border-color: pink;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}

在这里插入图片描述

更多边框样式：CSS边框样式在线代码案例展示

margin

margin(外边距)属性定义元素周围的空间。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。支持负值。

外边距合并(外边距凹陷)

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
在这里插入图片描述
只有普通文档流中块框的垂直外边距才会发生外边距合并，左右边框不会。行内框、浮动框或绝对定位之间的外边距不会合并。

outline

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline: red dotted thick;

outline-color: red;
outline-style: dotted;
outline-width: thick;

例子

p {
		border:1px solid red;
		outline:green  dashed thick;
	}

在这里插入图片描述
可见轮廓位于边框边缘的外围。

outline-offset

距离margin的偏差量

div
{
	margin:20px;
	width:150px; 
	padding:10px;
	height:70px;
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
}

在这里插入图片描述

position (定位)

元素可以使用的顶部，底部，左侧和右侧属性定位，但这些属性是建立在设定position属性的基础上的。它们也有不同的工作方式，这取决于定位方法。

position 属性的五个值（除去四大通用属性）：

static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

relative

相对定位元素的定位是相对其正常位置。移动相对定位元素后，它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

在这里插入图片描述
第二块相对它本身位置的起点进行了一个偏移，但是它原来所占据的位置依然还在，即使我们把偏移量设置的再大一些，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开。

我们可以设置它的的z-index属性来调整它的堆叠顺序。

fixed

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
fixed定位使元素的位置与文档流无关，脱离了文档流，因此不占据空间。fixed定位的元素和其他元素重叠。

 position:fixed;
 top:30px;
 right:5px;

absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<body>。absolute 定位使元素的位置与文档流无关，因此不占据空间。这也是为什么绝对定位元素经常被用来作为相对定位元素的容器块原因。

sticky

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。这个特定阈值指的是 top, right, bottom 或 left 之一。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>

<p>尝试滚动页面。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

在这里插入图片描述

CSS 浮动

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

<style>
		div{height: 100px;width: 100px;line-height: 100px;text-align: center;border: 2px pink groove;margin: 2px;}
		#div1{background-color: red;float: left;}
		#div2{background-color: blue;float: left;}
		#div3{background-color: green;}
</style>

<div id="div1" >1</div>A
<div id="div2">2</div>B
<div id="div3">3</div>C

效果图如下：
在这里插入图片描述
浮动会让元素脱离文档流，不再影响不浮动的元素。实际上并不完全如此。如果浮动的元素后面有行内元素，则会围绕在浮动元素周围；如果后面是是块级元素，块级元素框会按文档流正常排，往往会被覆盖掉，但是框内的文本不会跟随框变化而变化。

总之要么全设置浮动，要么采用position来解决框定位，图片则用浮动，否则偶尔会出现小怪异问题。

毕竟，float设计最初的主要效果和功能就是要让文本环绕图片，如果给块状元素设定float，就是文本环绕块状元素

clear

clear 属性规定元素的哪一侧不允许其他浮动元素。left right both

img
  {
  float:left;
  clear:both;
  }

在这里插入图片描述

居中

水平居中
垂直居中
垂直水平居中

水平居中

行内元素：text-align:center
块状元素：margin:auto

对此，应该灵活使用display这个布局属性。display:block可以将行内元素变为块状元素，display:inline-block可以将块状元素转为行内元素，当然它的值还可以还有table，flex

行内元素水平居中
<div style="text-align: center;">行内元素水平居中</div>

定宽块状元素水平居中
<div style="margin: auto;width: 50%;">定宽块状元素水平居中</div>

不定宽度元素水平居中
<div style="text-align: center;"><div style="display: inline-block;">不定宽度元素水平居中</div></div>

<div style="display: table;margin: auto;">不定宽度元素水平居中</div>

垂直居中

垂直居中指的是块状元素里面其他元素的定位方式

里面的元素时块状元素：如道宽高度的块状元素可以使用position定位属性来调整
里面的元素时行内元素：如单行元素可以直接使line-height的值等于父块状元素height值即可

单行元素垂直居中
<div style="line-height: 100px;height: 100px;border: 1px solid #000000;">单行元素垂直居中</div>

定宽高块状元素水平居中
<div style="position: relative;height: 200px;border: solid 2px red;">
	<div style="position: absolute;border: 2px dashed blue;height: 20px;top: 90px;width: 50px;"></div>
</div>

另类思路 透明元素占位
<div style="height: 300px;width: 300px;background-color: blue;">
	<div style="height: 25%;width: 1px;visibility: hidden;"></div>
	<div style="margin: auto;height: 50%;width: 50%;background-color: yellow;">
		另类思路
	</div>
</div>


不定宽高块状元素垂直居中
<div style="background-color: blue;width: 400px;height: 200px;display: flex;">
	<div style="background-color: yellow;width: 50%;height: 50%;align-self: center;"></div>
</div>

水平垂直居中

结合水平居中属性和垂直居中一起即可，当然还有很多办法

<style>
   .box {
           display: flex;
           justify-content: center; /* 水平居中 */
           align-items: center;     /* 垂直居中 */
           width: 1000px;
           height: 600px;
           border: 1px solid red;
       }
   .inner {
       width: 300px;
       height: 200px;
       background-color: red;
   }
</style>

#outer{
	height: 400px;
	width: 400px;
	border: 1px solid black;
	display: flex;
}
#inner{
	margin: auto;
	background-color: pink;
}

动画效果

transform 2D&3D变形效果

在这里插入图片描述
📌注：以上动画是加了过渡效果的

div:hover	{
	transform: rotate(30deg);
	-ms-transform: rotate(30deg); /* IE 9 */
	-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

在这里插入图片描述

transition 过渡效果

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间

在原元素定义过渡属性，在触发事件后设置需要过渡的属性。如果原元素没有指定哪个css属性作为过渡属性，比如只设置了transition-duration: 5s;则会在触发过渡后将所有触发属性一同过渡。
在这里插入图片描述

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}
//等价
div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

🌰

div{
	height: 200px;
	width: 200px;
	background-color: red;
	/*指定过渡css属性，若不指定css属性却设置了过渡属性，则会过渡成hover的全部属性*/
	 transition: width 2s, height 2s, transform 2s;
	    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
	    /* transition-duration: 2s; */
}
div:hover{
	width: 300px;
	height: 300px;
	transform: rotate(180deg);
}

在这里插入图片描述

animation 动画

@keyframes 规则是用来创建动画的，指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

需要将@keyframes 创建的动画绑定到一个选择器，否则动画不会有任何效果。

在选择器中添加animation属性，其值至少含有：

规定动画的名称
规定动画的时长

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

@keyframes leftin {
  from {
    opacity: .1;
    transform: translateX(-200px) scale(0.7);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
div{
	width: 300px;
	height: 500px;
	background-color: rgba(80,120,60,.5);
	animation: leftin 2s;
}

在这里插入图片描述

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

在这里插入图片描述

@media 媒介响应式

@media 规则使你有能力在同一份样式表中，针对不同的媒介使用不同的样式规则。

在这里插入图片描述

语法

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

使用

@media screen and (max-width:500px) {
				body{background-color: black;}
}

Flex Box

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

详见：《Flex Box》

flex布局可以实现盒子完美居中水平垂直居中（参看上文居中例子）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				display: flex;
				height: 250px;
				width: 400px;
				background-color: pink;
				justify-content: space-around;
			}
			.test1{
				height: 100px;
				width: 100px;
				background-color: blue;		
			}
			.test2{
				
				border: solid 1px black;
				flex: 1;
			}
			
			.test3{
				border: solid 1px black;
				flex: 2;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="test1">水平均匀</div>
			<div class="test1">水平均匀</div>
			<div class="test1">水平均匀</div>
		</div>
		<br>
		<div class="box">
			<div class="test2">等比分配</div>
			<div class="test2">等比分配</div>
			<div class="test3">等比分配</div>
		</div>
	</body>
</html>

在这里插入图片描述

伪类&伪元素

伪类和伪元素的根本区别在于：它们是否创造了新的元素, 这个新创造的元素就叫 “伪元素” 。

伪类 :link :hover
伪元素 ::before ::after（:after :link是CSS2的写法）

伪元素

不存在于DOM中，是虚拟的元素，仅仅是在 CSS 渲染层加入。这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。伪元素要配合content属性一起使用。伪元素的特效通常要使用:hover伪类样式来激活。

伪类

存在DOM文档中，只有符合触发条件时才能看到。

注：伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span:hover::after{
				content: url(img/building_small.jpg);
			}
			li:last-child::first-letter{color: red;}
		</style>
	</head>
	<body>
		<span>悬浮后显示图片</span>
		<ul>
			<li>hello</li>
			<li>world</li>
		</ul>
	</body>
</html>

在这里插入图片描述

CSS 部分属性介绍

auto

自动设置，这样做的结果会依赖于浏览器设置的默认值。

background-attachment【背景图像固定】

背景图像是否固定（fixed）或者随着页面的其余部分滚动(scroll)

body{background: url(img/building_small.jpg) left top grey no-repeat fixed;}

text-indent【缩进文本】

p{text-indent: 20px;}

lvha【链接状态排序】

a{text-decoration: none;}
a:link{color: blue;}
a:visited{color: red;}
a:hover{color: green;}
a:active{color: grey;}

按顺序定义样式，原因：伪类的权重等价于class的权重，也就是这几个伪类的的权重是一样的，当属性一样时候，那么后面的样式会覆盖前面的样式。

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

一个未被访问过的<a>标签在鼠标经过时同时具有link,hover 两个属性，而如果link在后面，那么就仍然显示link的效果，忽略hover。同理，如果hover 在 visited前，那么hover仍然会被忽略。

hover要写在visited之后，因为visited后假如再次hover，链接样式就是变成hover时候的样式，也就是visited会被写在后面的hover覆盖掉。同理，active要写在hover之后。link 和 visited 的顺序无所谓，那为什么一般都要把 link 放在前面呢？一个链接，页面一上来其状态一定是未访问。从视觉顺序来排，link 在前面。

link伪类存在的意义之一就是把超链接与锚点区分开，link伪类只匹配具有href的<a>标签（即超链接），而非锚点

border-collapse 【折叠边框表格单边框】

表格默认情况下是由双边框的，这是由于 table、th 以及 td 元素都有独立的边框。可以设置为单线条边框

table {border-collapse:collapse;}

display visibility 【显示隐藏】

display:none;
visibility:hidden;

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

overflow

在这里插入图片描述
scroll会出现横向滚动条和纵向滚动条，横向的不会滚动；auto则不会出现横向滚动条，只有纵向的。

单纯只要横向滚动条：

div{
	overflow-x: scroll;
	height: 150px;
	width: 150px;
	overflow-y: hidden;
	white-space: nowrap;//防止文本自动折行
	}

linear-gradient & radial-gradient 渐变色

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

详见：渐变色

#grad1{
	height: 200px;
	width: 200px;
	background-image: linear-gradient(#aaaaff,#aaffff);
	/* background-image: linear-gradient(to bottom right, red, yellow); */
}
#grad2 {
	height: 200px;
	width: 200px;
  background-image: radial-gradient(circle, red, yellow, green);
}

在这里插入图片描述

多列文本

<style>
.multi{
	column-count: 3;
	column-gap: 40px;
	column-rule-style: ridge;
	column-rule-color: pink;
	column-rule-width: 5px;
}
</style>
<div class="multi">...</div>

在这里插入图片描述

调整元素大小可拉伸

div
			{
			    border:2px solid;
			    padding:10px 40px; 
			    width:300px;
			    resize:both;
			    overflow:auto;
			}

在这里插入图片描述

圆角圆形图片（头像）

<img src="img/building_small.jpg" style="border-radius: 8px;" />
<img src="img/building_small.jpg" style="border-radius: 50%;" />

在这里插入图片描述

漂亮按钮

.button{
	display: inline-block;
	padding: 15px 32px;
	background-color: darkseagreen;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	margin: 4px 2px;
	font-size: 16px; /* 可以通过该值大小控制按钮大小 */
}

在这里插入图片描述

更炫的按钮样式：codepen在线体验按钮效果
在这里插入图片描述

calc() 函数用于动态计算长度值

div左右留白50px

div{
				position: absolute;
				left: 50px;
				height: 100px;
				width: calc(100% - 100px);
				border: 1px solid black;
			}

在这里插入图片描述

object-fit

指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

<div><img src='' style="object-fit: fill;"></div>

在这里插入图片描述

@import

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

filter 滤镜效果

滤镜变灰色

<img src="img/building_small.jpg" style="filter: grayscale();" />

在这里插入图片描述

CSS基础知识点快速回忆

CSS的语法

CSS的形式

CSS选择器

CSS 三大特性

层叠

继承

优先级

CSS 属性缩写

CSS盒子模型

content

padding

border

margin

外边距合并(外边距凹陷)

outline

outline-offset

position (定位)

static

relative

fixed

absolute

sticky

CSS 浮动

clear

居中

水平居中

垂直居中

水平垂直居中

动画效果

transform 2D&3D变形效果

transition 过渡效果

animation 动画

@media 媒介 响应式

语法

使用

Flex Box

伪类&伪元素

伪元素

伪类

CSS 部分属性介绍

auto

background-attachment【背景图像固定】

text-indent【缩进文本】

lvha【链接状态排序】

border-collapse 【折叠边框 表格单边框】

display visibility 【显示隐藏】

overflow

linear-gradient & radial-gradient 渐变色

多列文本

调整元素大小 可拉伸

圆角圆形图片（头像）

漂亮按钮

calc() 函数用于动态计算长度值

object-fit

@import

filter 滤镜效果

@media 媒介响应式

border-collapse 【折叠边框表格单边框】

调整元素大小可拉伸