知足常乐
小言

CSS3简介

浏览器私有前缀

在书写CSS3属性的时候,可能需要在属性前面加上浏览器的私有前缀,然后该浏览器才能识别对应的CSS3属性。

对于IE浏览器来说,暂时只有IE9及以上版本支持CSS3属性,对于IE6~IE8的兼容,我们可以借助ie-css3.htc这个扩展文本来实现。
私有前缀 对应的浏览器
-webkit- Chrome和Safari
-moz- Firefox
-ms- IE
-o- Opera
举个例子,如果我们想要使用CSS3来实现边框阴影效果,可能会这样写:
box-shadow: 5px 5px 10px red;

但是并非所有浏览器都能识别box-shadow这个属性,例如Chrome只能识别-webkit-box-shadow(前缀为-webkit-),而Firefox只能识别-moz-box-radius(前缀为-moz-)。因此,如果想要让所有主流浏览器都能实现边框阴影效果,我们需要这样写:

box-shadow: 5px 5px 10px red;
-webkit-box-shadow: 5px 5px 10px red;
-moz-box-shadow: 5px 5px 10px red;
-ms-box-shadow: 5px 5px 10px red;
-o-box-shadow: 5px 5px 举个例子,如果我们想要使用CSS3来实现边框阴影效果,可能会这样写:
box-shadow: 5px 5px 10px red;

但是并非所有浏览器都能识别box-shadow这个属性,例如Chrome只能识别-webkit-box-shadow(前缀为-webkit-),而Firefox只能识别-moz-box-radius(前缀为-moz-)。因此,如果想要让所有主流浏览器都能实现边框阴影效果,我们需要这样写:

box-shadow: 5px 5px 10px red;
-webkit-box-shadow: 5px 5px 10px red;
-moz-box-shadow: 5px 5px 10px red;
-ms-box-shadow: 5px 5px 10px red;
-o-box-shadow: 5px 5px 10px red;

新选择器

属性选择器

image-20210415174741117

//举例
<style type="text/css">
/*清除所有元素默认的padding和margin*/
*{padding:0;margin:0;}
/*清除列表项符号*/
ul{list-style-type:none;}
a
{
display:inline-block;
font-size:12px;
height:20px;
line-height:20px;
}
/*匹配doc文件*/
a[href$="doc"]::before
{
content:url("img/1.png");
}
/*匹配pdf文件*/
a[href$="pdf"]::before
{
content:url("img/2.png");
}
/*匹配ppt文件*/
a[href$="ppt"]::before
{
content:url(//举例
<style type="text/css">
/*清除所有元素默认的padding和margin*/
*{padding:0;margin:0;}
/*清除列表项符号*/
ul{list-style-type:none;}
a
{
display:inline-block;
font-size:12px;
height:20px;
line-height:20px;
}
/*匹配doc文件*/
a[href$="doc"]::before
{
content:url("img/1.png");
}
/*匹配pdf文件*/
a[href$="pdf"]::before
{
content:url("img/2.png");
}
/*匹配ppt文件*/
a[href$="ppt"]::before
{
content:url("img/3.png");
}

子元素伪类选择器

:first-child、:last-child、:nth-child(n)、:only-child

用子元素伪类选择器,可以让结构与样式分离,使得用子元素伪类选择器,可以让结构与样式分离,使得HTML结构更加清晰,更利于后期维护和搜索引擎优化(即SEO)。
选择器 说明
E:first-child 选择父元素下的第一个子元素(该子元素类型为E,以下类同)
E:last-child 选择父元素下的最后一个子元素
E:nth-child(n) 选择父元素下的第n个子元素或奇偶元素,n取值有3种:数字、odd和even,其中n从1开始
E:only-child 选择父元素下唯一的子元素,该父元素只有一个子元素
<-- 隔行换色 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li{ height:20px;}
/*设置奇数列的背景颜色*/
ul li:nth-child(odd)
{
background-color:red;
}
/*设置偶数列的背景颜色*/
ul li:nth-child(even)
{
background-color:green;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</<-- 隔行换色 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li{ height:20px;}
/*设置奇数列的背景颜色*/
ul li:nth-child(odd)
{
background-color:red;
}
/*设置偶数列的背景颜色*/
ul li:nth-child(even)
{
background-color:green;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

:first-child在选择父元素下的子元素时,不仅要区分元素类型,还要求是第一个子元素。而:first-child在选择父元素下的子元素时,不仅要区分元素类型,还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时,只需要区分元素类型,不要求是第一个子元素
选择器 说明
E:first-of-type 选择父元素下的第一个E类型的子元素
E:last-of-type 选择父元素下的最后一个E类型的子元素
E:nth-of-type(n) 选择父元素下的第n个E类型的子元素或奇偶元素,n取值有3种:数字、odd和even,n从1开始
E:only-of-type 选择父元素下唯一的E类型的子元素,该父元素可以有多个子元素

UI伪类选择器

对于指定的样式,在默认状态下不起作用,只有当元素处于某种状态时才起作用此外,记住一点,大多数对于指定的样式,在默认状态下不起作用,只有当元素处于某种状态时才起作用此外,记住一点,大多数UI伪类选择器都是针对表单元素的

:focus

使用:focus选择器来定义元素获取焦点时使用的样式。不过并不是所有的HTML元素都有焦点样式,具有“获取焦点”和“失去焦点”特点的元素只有两种。
1)表单元素(按钮、单选框、复选框、文本框、下拉列表)
2)超链接
------------------------------------------------------------------------------
input:focus
{
outline:使用:focus选择器来定义元素获取焦点时使用的样式。不过并不是所有的HTML元素都有焦点样式,具有“获取焦点”和“失去焦点”特点的元素只有两种。
1)表单元素(按钮、单选框、复选框、文本框、下拉列表)
2)超链接
------------------------------------------------------------------------------
input:focus
{
outline:1px solid red;
}

::selection

使用::selection选择器来定义页面中被选中文本的样式。注意,::selection选择器使用的是双冒号,而不是单冒号。实际上,单冒号往往都是伪类,而双冒号往往都是伪元素。
------------------------------------------------------------------------------
div::selection
{
color:white;
background-color:red;
}
div::-moz-selection
{
color:white;
background-color:red;
}
------------------------------------------------------------------------------
为整个页面的选中文本定义样式,我们只需要使用::selection{}就可以实现。
------------------------------------------------------------------------------
::selection
{
color:white;
background-color:red;
}
/*兼容Firefox浏览器*/
::-moz-selection
{
color:white;
使用::selection选择器来定义页面中被选中文本的样式。注意,::selection选择器使用的是双冒号,而不是单冒号。实际上,单冒号往往都是伪类,而双冒号往往都是伪元素。
------------------------------------------------------------------------------
div::selection
{
color:white;
background-color:red;
}
div::-moz-selection
{
color:white;
background-color:red;
}
------------------------------------------------------------------------------
为整个页面的选中文本定义样式,我们只需要使用::selection{}就可以实现。
------------------------------------------------------------------------------
::selection
{
color:white;
background-color:red;
}
/*兼容Firefox浏览器*/
::-moz-selection
{
color:white;
background-color:red;
}

:checked

使用:checked选择器来定义单选框或复选框被选中时的样式。
在兼容性方面,暂时只有Opera浏览器支持:checked
------------------------------------------------------------------------------
input:checked {
使用:checked选择器来定义单选框或复选框被选中时的样式。
在兼容性方面,暂时只有Opera浏览器支持:checked
------------------------------------------------------------------------------
input:checked {
background-color: red;
}

:enabled和:disabled

使用:enabled选择器来定义表单元素“可用”时的样式,也可以使用:disabled选择器来定义表单元素“不可用”时的样式。
------------------------------------------------------------------------------
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input:enabled
{
outline:1px solid red;
}
input:disabled
{
background-color:orange;
}
</style>
</head>
<body>
<form>
<p><label for="enabled">可用:</label><input id="enabled" type="text"/></p>
<p><label for="disabled">禁用:</label><input id="disabled" type="text" disabled/></p>
</form>
</使用:enabled选择器来定义表单元素“可用”时的样式,也可以使用:disabled选择器来定义表单元素“不可用”时的样式。
------------------------------------------------------------------------------
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input:enabled
{
outline:1px solid red;
}
input:disabled
{
background-color:orange;
}
</style>
</head>
<body>
<form>
<p><label for="enabled">可用:</label><input id="enabled" type="text"/></p>
<p><label for="disabled">禁用:</label><input id="disabled" type="text" disabled/></p>
</form>
</body>

:read-write和:read-only

使用:read-write选择器来定义表单元素“可读写”时的样式,也可以使用:read-only选择器来定义表单元素“只读”时的样式。
Firefox浏览器只能识别带有-moz-前缀的:read-write和:read-only。
------------------------------------------------------------------------------
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input:read-write
{
outline:1px solid red;
}
input:read-only
{
background-color:silver;
}
/*兼容Firefox浏览器*/
input:-moz-read-write
{
outline:1px solid red;
}
input:-moz-read-only
{
background-color:silver;
}
</style>
</head>
<body>
<form method="post">
<p><label for="txt1">读写:</label><input id="txt1" type="text" /></p>
<p><label for="txt2">只读:</label><input id="txt2" type="text" readonly /></p>
</form>
</使用:read-write选择器来定义表单元素“可读写”时的样式,也可以使用:read-only选择器来定义表单元素“只读”时的样式。
Firefox浏览器只能识别带有-moz-前缀的:read-write和:read-only。
------------------------------------------------------------------------------
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input:read-write
{
outline:1px solid red;
}
input:read-only
{
background-color:silver;
}
/*兼容Firefox浏览器*/
input:-moz-read-write
{
outline:1px solid red;
}
input:-moz-read-only
{
background-color:silver;
}
</style>
</head>
<body>
<form method="post">
<p><label for="txt1">读写:</label><input id="txt1" type="text" /></p>
<p><label for="txt2">只读:</label><input id="txt2" type="text" readonly /></p>
</form>
</body>

其他伪类选择器

:root

使用:root选择器来选择HTML页面的根元素
如果想要设置整个页面的背景色,我们应该针对html元素来设置,而不是body元素。
下面两句代码是等价的:
:root{background-color:gray;}
html{background-color:gray;}
(使用:root选择器来定义整个页面的背景色为灰色,然后将使用:root选择器来选择HTML页面的根元素
如果想要设置整个页面的背景色,我们应该针对html元素来设置,而不是body元素。
下面两句代码是等价的:
:root{background-color:gray;}
html{background-color:gray;}
(使用:root选择器来定义整个页面的背景色为灰色,然后将body元素的背景色定义为红色。)

:empty

使用:empty选择器来选择一个“不包含任何子元素和内容”的元素,也就是选择一个空元素。
对于表格中内容为空的单元格,我们往往为其设置不同的颜色,这样也会使得用户体验更好。

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
background-color: #FFA722;
}
td:empty
{
background-color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</使用:empty选择器来选择一个“不包含任何子元素和内容”的元素,也就是选择一个空元素。
对于表格中内容为空的单元格,我们往往为其设置不同的颜色,这样也会使得用户体验更好。

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
background-color: #FFA722;
}
td:empty
{
background-color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</body>

:target

:target选择器来选取页面中的某一个target元素。所谓的target元素,指的是id被当成页面的锚点链接来使用的元素。
:target选择器一般都是结合锚点链接来使用的,这样可以实现用户体验更好的导航效果。

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
:target h3
{
color:red;
}
</style>
</head>
<body>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的夏天</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</:target选择器来选取页面中的某一个target元素。所谓的target元素,指的是id被当成页面的锚点链接来使用的元素。
:target选择器一般都是结合锚点链接来使用的,这样可以实现用户体验更好的导航效果。

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
:target h3
{
color:red;
}
</style>
</head>
<body>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的夏天</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>

:not()

使用:not()选择器来选取某一个元素之外的所有元素。这个选择器非常重要,在实际开发中用得非常多,大家要重点掌握。

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li:not(.first)
{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="first">绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
</ul>
</使用:not()选择器来选取某一个元素之外的所有元素。这个选择器非常重要,在实际开发中用得非常多,大家要重点掌握。

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li:not(.first)
{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="first">绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
</ul>
</body>

文本样式

文本阴影:text-shadow

W3C坐标系

  • 数学坐标系:y轴正方向向上。

  • W3C坐标系:y轴正方向向下。

    img

text-shadow属性简介

为文本添加阴影效果
text-shadow:x-offset y-offset blur color;

x-offset是“水平阴影”,表示阴影的水平偏移距离,单位可以是px、em和百分比等。由于CSS3采用的是W3C坐标系,因此如果值为正,则阴影向右偏移;如果值为负,则阴影向左偏移。

y-offset是“垂直阴影”,表示阴影的垂直偏移距离,单位可以是px、em和百分比等。由于CSS3采用的是W3C坐标系,因此如果值为正,则阴影向下偏移;如果值为负,则阴影向上偏移。

blur是“模糊距离”,表示阴影的模糊程度,单位可以是px、em、百分比等。blur值越大,则阴影越模糊;blur值越小,则阴影越清晰。此外,blur不能为负值。如果不需要阴影模糊效果,可以把blur值设置为0。

color是“阴影颜色”,表示阴影的颜色。

可以使用text-shadow属性为文本定义多个阴影,并且针对每个阴影使用不同的颜色。当定义多个阴影时,text-shadow属性是一个以英文逗号隔开的值列表,例如:
text-shadow:0 0 4px red, 0 -5px 4px green, 2px -10px 6px blue;


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display: inline-block;
padding: 16px;
font-size: 32px;
font-weight: bold;
background-color: #CCC;
color: #ddd;
text-shadow: -1px 0 0 #333, /*向左阴影*/
0 -1px 0 #333, /*向上阴影*/
1px 0 0 #333, /*向右阴影*/
0 1px 0 #333; /*向下阴影*/
}
</style>
</head>
<body>
<div>绿叶学习网</div>
</body>
</为文本添加阴影效果
text-shadow:x-offset y-offset blur color;

x-offset是“水平阴影”,表示阴影的水平偏移距离,单位可以是px、em和百分比等。由于CSS3采用的是W3C坐标系,因此如果值为正,则阴影向右偏移;如果值为负,则阴影向左偏移。

y-offset是“垂直阴影”,表示阴影的垂直偏移距离,单位可以是px、em和百分比等。由于CSS3采用的是W3C坐标系,因此如果值为正,则阴影向下偏移;如果值为负,则阴影向上偏移。

blur是“模糊距离”,表示阴影的模糊程度,单位可以是px、em、百分比等。blur值越大,则阴影越模糊;blur值越小,则阴影越清晰。此外,blur不能为负值。如果不需要阴影模糊效果,可以把blur值设置为0。

color是“阴影颜色”,表示阴影的颜色。

可以使用text-shadow属性为文本定义多个阴影,并且针对每个阴影使用不同的颜色。当定义多个阴影时,text-shadow属性是一个以英文逗号隔开的值列表,例如:
text-shadow:0 0 4px red, 0 -5px 4px green, 2px -10px 6px blue;


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display: inline-block;
padding: 16px;
font-size: 32px;
font-weight: bold;
background-color: #CCC;
color: #ddd;
text-shadow: -1px 0 0 #333, /*向左阴影*/
0 -1px 0 #333, /*向上阴影*/
1px 0 0 #333, /*向右阴影*/
0 1px 0 #333; /*向下阴影*/
}
</style>
</head>
<body>
<div>绿叶学习网</div>
</body>
</html>

文本描边:text-stroke

给文字添加边框。
text-stroke:width color;

Crhome和Firefox这两个浏览器都只能识别-webkit-前缀的text-stroke属性。

text-stroke是一个复合属性,它是由text-stroke-wdith和text-stroke-color两个子属性组成。
(1)text-stroke-width:定义边框的宽度。
(2)text-stroke-color:定义边框的颜色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
font-family:Verdana;
font-size:50px;
font-weight:bold;
color:transparent; /*设置文字颜色为透明*/
text-stroke:2px red;
-webkit-text-stroke:2px red;
}
</style>
</head>
<body>
<div>lvyestudy</div>
</body>
</给文字添加边框。
text-stroke:width color;

Crhome和Firefox这两个浏览器都只能识别-webkit-前缀的text-stroke属性。

text-stroke是一个复合属性,它是由text-stroke-wdith和text-stroke-color两个子属性组成。
(1)text-stroke-width:定义边框的宽度。
(2)text-stroke-color:定义边框的颜色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
font-family:Verdana;
font-size:50px;
font-weight:bold;
color:transparent; /*设置文字颜色为透明*/
text-stroke:2px red;
-webkit-text-stroke:2px red;
}
</style>
</head>
<body>
<div>lvyestudy</div>
</body>
</html>

文本溢出:text-overflow

定义文本的溢出样式。
text-overflow:取值;
只能实现“单行文本”的省略号效果。如果想要实现“多行文本”的省略号效果必须借助JavaScript或jQuery才行。

单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果,我们还需要结合white-space和overflow这两个属性来实现,这三个是固定搭配的,下面是完整的语法:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
(white-space:nowrap;规定段落中的文本不进行换行:)

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{
width:200px;
height:100px;
border:1px solid silver;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>绿叶学习网成立于2015年4月1日,是一个最富有活力的Web技术学习网站。在这里,我们只提供互联网最好的Web技术教程和最佳的学习体验。每一个教程、每一篇文章、甚至每一个知识点,都体现绿叶精品的态度。没有最好,但是我们可以做到更好!</div>
</body>
</定义文本的溢出样式。
text-overflow:取值;
只能实现“单行文本”的省略号效果。如果想要实现“多行文本”的省略号效果必须借助JavaScript或jQuery才行。

单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果,我们还需要结合white-space和overflow这两个属性来实现,这三个是固定搭配的,下面是完整的语法:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
(white-space:nowrap;规定段落中的文本不进行换行:)

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{
width:200px;
height:100px;
border:1px solid silver;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>绿叶学习网成立于2015年4月1日,是一个最富有活力的Web技术学习网站。在这里,我们只提供互联网最好的Web技术教程和最佳的学习体验。每一个教程、每一篇文章、甚至每一个知识点,都体现绿叶精品的态度。没有最好,但是我们可以做到更好!</div>
</body>
</html>
属性值 说明
ellipsis 当文本溢出时,显示省略号,并且隐藏多余的文字
clip 当文本溢出时,不显示省略号,而是将溢出的文字裁切掉

强制换行:word-wrap、word-break

一般情况下,我们只会用到word-wrap:break-word;或word-break:break-all这两个来实现强制换行。
word-wrap和word-break这两个属性都是针对英文页面来说的,在中文页面中很少用到

word-wrap

word-wrap:break-word;会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话再进行单词内的断句。

word-wrap:取值;

word-wrap属性只有2个取值,如下表所示。

属性值 说明
Normal 自动换行(默认值)
break-word 强制换行

word-break

word-break:break-all不会尝试把长单词挪到下一行,而是直接就进行单词内的断句。

word-break:取值;

word-break属性有3个取值,如下表所示。

属性值 说明
normal 自动换行(默认值)
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行

嵌入字体:@font-face

可以使用@font-face方法来加载服务器端的字体,从而使得所有用户都能正常显示该字体。不建议使用@font-face来实现嵌入中文字体。这是因为中文字体文件大多数都是10MB以上。这么大的字体文件,会严重影响页面的加载速度,导致用户体验非常差。

@font-face方法不仅可以用于嵌入字体,最重要的还可以实现字体图标技术(即iconfont)

如果想要实现嵌入字体,一般需要以下两步。

①使用@font-face定义字体。
②使用font-family引用字体。

@font-face
{
font-family: 字体名称;
src:url(@font-face
{
font-family: 字体名称;
src:url(文件路径);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义字体*/
@font-face
{
font-family: myfont; /*定义字体名称为myfont*/
src: url("css/font/Horst-Blackletter.ttf");
}
div
{
font-family:myfont; /*使用自定义的myfont字体*/
font-size:60px;
background-color:#ECE2D6;
color:#626C3D;
padding:20px;
}
</style>
</head>
<body>
<div>lvyestudy</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义字体*/
@font-face
{
font-family: myfont; /*定义字体名称为myfont*/
src: url("css/font/Horst-Blackletter.ttf");
}
div
{
font-family:myfont; /*使用自定义的myfont字体*/
font-size:60px;
background-color:#ECE2D6;
color:#626C3D;
padding:20px;
}
</style>
</head>
<body>
<div>lvyestudy</div>
</body>
</html>

颜色样式

opacity透明度

我们可以使用opacity属性来定义元素的透明度。

opacity属性取值是一个数值,取值范围为0.0~1.0。其中0.0表示完全透明,1.0表示完全不透明。

opacity属性不仅作用于元素的背景颜色,还会作用于内部所有子元素以及文本内容。

opacity属性大多数时候都是配合:hover来定义鼠标移动到某个按钮或图片上时,改变透明度来呈现动态的效果。

opacity:数值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a
{
display:inline-block;
padding:5px 10px;
font-family:微软雅黑;
color:white;
background-color:hotpink;
cursor:pointer;
}
a:hover
{
opacity:0.6;
}
</style>
</head>
<body>
<a>调试代码</a>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a
{
display:inline-block;
padding:5px 10px;
font-family:微软雅黑;
color:white;
background-color:hotpink;
cursor:pointer;
}
a:hover
{
opacity:0.6;
}
</style>
</head>
<body>
<a>调试代码</a>
</body>
</html>

RGBA颜色

RGBA中的透明度只会针对当前设置的属性起作用。

下面几种有关RGBA颜色的写法都是正确的:

rgba(255, 255, 0, 0.5)
rgba(50%, 80%, 50%, rgba(255, 255, 0, 0.5)
rgba(50%, 80%, 50%, 0.5)
rgba(R, G, B, rgba(R, G, B, A)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
list-style-type:none;
width:200px;
}
li
{
height:30px;
line-height:30px;
font-size:20px;
font-weight:bold;
text-align:center;
}
/*第1个li,透明度为1.0*/
li:first-child
{
background-color:rgba(255,0,255,1.0);
}
/*第2个li,透明度为0.6*/
li:nth-child(2)
{
background-color:rgba(255,0,255,0.6);
}
/*第3个li,透明度为0.3*/
li:last-child
{
background-color:rgba(255,0,255,0.3);
}
</style>
</head>
<body>
<ul>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
</ul>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
list-style-type:none;
width:200px;
}
li
{
height:30px;
line-height:30px;
font-size:20px;
font-weight:bold;
text-align:center;
}
/*第1个li,透明度为1.0*/
li:first-child
{
background-color:rgba(255,0,255,1.0);
}
/*第2个li,透明度为0.6*/
li:nth-child(2)
{
background-color:rgba(255,0,255,0.6);
}
/*第3个li,透明度为0.3*/
li:last-child
{
background-color:rgba(255,0,255,0.3);
}
</style>
</head>
<body>
<ul>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
</ul>
</body>
</html>

CSS3渐变

在真正的开发中,大多数渐变效果都是线性渐变

线性渐变

线性渐变,指的是在一条直线上进行的渐变。我们见到的大多数渐变效果都是线性渐变。

线性渐变也可以接受一个“值列表”,用于同时定义多种颜色的线性渐变,颜色值之间用英文逗号隔开即可。

background:background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background:background:linear-gradient(方向, 开始颜色, 结束颜色)

线性渐变的“方向”取值有两种:一种是使用角度(单位为deg);另外一种是使用关键字,如下表所示。

属性值 对应角度 说明
to top 0deg 从下到上
to bottom 180deg 从上到下(默认值)
to left 270deg 从右到左
to right 90deg 从左到右
to top left 从右下角到左上角(斜对角)
to top right 从左下角到右上角(斜对角)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right,blue,yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right,blue,yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

径向渐变

径向渐变,指的是颜色从内到外进行的圆形渐变

position用于定义圆心位置。shape size用于定义形状大小,由两部分组成,shape定义形状,size定义大小。start-color和stop-color分别用于定义开始颜色和结束颜色。

其中,position和shape size都是可选参数。如果省略,则表示采用默认值。start-color和stop-color都是必选参数,可以有多个颜色值。

background:background:radial-gradient(position, shape size, start-color, stop-color)
圆心位置position

常用取值有两种:一种是“长度值”(如10px);另外一种是“关键字”(如top),,如下表所示。Chrome和Firefox只能识别以-webkit-作为前缀的径向渐变属性。

属性值 说明
center 中部(默认值)
top 顶部
bottom 底部
left 左部
right 右部
top center 靠上居中
top left 左上
top right 右上
left center 靠左居中
center center 正中
right center 靠右居中
bottom left 左下
bottom center 靠下居中
bottom right 右下
shape size

shape

属性值 说明
ellipse 椭圆形(默认值)
circle 圆形

size

属性值 说明
closet-side 指定径向渐变的半径长度为从圆心到离圆心最近的边
closet-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角
#div1
{
background:-webkit-radial-gradient(ellipse, orange,blue);
}
#div2
{
background:#div1
{
background:-webkit-radial-gradient(ellipse, orange,blue);
}
#div2
{
background:-webkit-radial-gradient(circle,orange,blue);
}
start-color和stop-color

默认情况下,径向渐变的颜色节点是均匀分布的,不过我们可以为每一种颜色添加百分比,从而使得各个颜色节点不均匀分布。

边框样式

圆角效果:border-radius

在前端开发中,我们都是秉着“尽量少用图片”的原则。能用CSS实现的效果,就尽量不要用图片。因为每一个图片都会引发一次HTTP请求,加上图片体积大,会极大影响页面的加载速度。

我们可以使用border-radius属性为元素添加圆角效果。

border-radius属性取值是一个长度值,单位可以是px、em和百分比等。

border-radius:取值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:200px;
height:150px;
border:1px solid gray;
border-radius:20px;
}
</style>
</head>
<body>
<div></div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:200px;
height:150px;
border:1px solid gray;
border-radius:20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

border-radius属性值的4种写法

border-radius:10px;表示4个角的圆角半径都是10px

border-radius:10px 20px;表示左上角和右下角的圆角半径是10px,右上角和左下角的圆角半径都是20px

border-radius:10px 20px 30px;表示左上角的圆角半径是10px,左下角和右上角的圆角半径都是20px,右下角圆角半径是30px

border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角和左下角的圆角半径,依次是10px、20px、30px、40px,按照顺时针方向来记忆。

border-radius实现半圆和圆

半圆

把高度(height)设为宽度(width)的一半,并且左上角和右上角的圆角半径定义与元素的高度一致,而右下角和左下角的圆角半径定义为0。

元素的宽度和高度定义为相同值,然后4个角的圆角半径定义为宽度(或高度)的一半(或者50%)。

border-radius实现椭圆

border-radius:x/y;

当border-radius属性取值为一个值时,例如,“border-radius:30px;”表示圆角水平半径和垂直半径为30px,也就是说“border-radius:30px;”等价于“border-radius:30px/30px”,前者是后者的缩写。

实现椭圆,原理如下:元素的宽度和高度不相等,其中4个角的圆角水平半径定义为宽度的一半,垂直半径定义为高度的一半。

div
{
width:160px;
height:100px;
border:1px solid gray;
border-radius:80px/div
{
width:160px;
height:100px;
border:1px solid gray;
border-radius:80px/50px;
}

border-radius的派生子属性

  • border-top-right-radius:右上角
  • border-bottom-right-radius:右下角
  • border-bottom-left-radius:左下角
  • border-top-left-radius:左上角

边框阴影:box-shadow

使用box-shadow属性轻松为元素添加阴影效果。

style取值有两种:outset和inset。当取值为outset时(默认值),表示外阴影;当取值为inset时,表示内阴影。

当x-offset和y-offset都为0时,阴影都是向外发散或者向内发散。

box-shadow:x-offset  y-offset  blur  spread  color  style;
  • x-offset:定义水平阴影的偏移距离,可以使用负值。由于CSS3采用的是W3C坐标系,因此x-offset取值为正时,向右偏移;取值为负时,向左偏移。
  • y-offset:定义垂直阴影的偏移距离,可以使用负值。由于CSS3采用的是W3C坐标系,因此y-offset取值为正时,向下偏移;取值为负时,向上偏移。
  • blur:定义阴影的模糊半径,只能为正值。
  • spread:定义阴影的大小。
  • color:定义阴影的颜色。
  • style:定义是外阴影还是内阴影。

个方向阴影独立样式

box-shadow:左阴影, 上阴影, 下阴影, 右阴影;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{padding:100px;}
div
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
box-shadow:-5px 0 12px red,
0 -5px 12px yellow,
0 5px 12px blue,
5px 0 12px green;
}
</style>
</head>
<body>
<div></div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{padding:100px;}
div
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
box-shadow:-5px 0 12px red,
0 -5px 12px yellow,
0 5px 12px blue,
5px 0 12px green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

多色边框:border-colors

1border-colors属性兼容性很差,并没有得到各大主流浏览器支持,暂时只有Firefox浏览器支持。
2)不能使用-moz-border-bolors属性为4条边同时设定颜色,必须像上面语法那样分别为4条边设定颜色。
3)如果边框宽度(即1border-colors属性兼容性很差,并没有得到各大主流浏览器支持,暂时只有Firefox浏览器支持。
2)不能使用-moz-border-bolors属性为4条边同时设定颜色,必须像上面语法那样分别为4条边设定颜色。
3)如果边框宽度(即border-width)为n个像素,则该边框可以使用n种颜色,即每像素显示一种颜色。
border-top-colors:颜色值;
border-right-colors:颜色值;
border-bottom-colors:颜色值;
border-left-colors:颜色值;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:200px;
height:100px;
border-width:7px;
border-style:solid;
-moz-border-top-colors:red orange yellow green cyan blue purple;
-moz-border-right-colors: red orange yellow green cyan blue purple;
-moz-border-bottom-colors: red orange yellow green cyan blue purple;
-moz-border-left-colors: red orange yellow green cyan blue purple;
}
</style>
</head>
<body>
<div></div>
</body>
</border-top-colors:颜色值;
border-right-colors:颜色值;
border-bottom-colors:颜色值;
border-left-colors:颜色值;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:200px;
height:100px;
border-width:7px;
border-style:solid;
-moz-border-top-colors:red orange yellow green cyan blue purple;
-moz-border-right-colors: red orange yellow green cyan blue purple;
-moz-border-bottom-colors: red orange yellow green cyan blue purple;
-moz-border-left-colors: red orange yellow green cyan blue purple;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

边框背景:border-image

border-image属性简介

可以使用border-image属性为边框添加背景图片。现在所有主流浏览器最新版本都支持border-image属性。

border-image属性需要定义3个方面的内容。
1)图片路径。
2)切割宽度:四条边的切割宽度,依次为上边、右边、下边、左边(顺时针)。
3)平铺方式:有3种取值,分别为repeat、round和stretch。

对于border-image属性,我们总结如下:
1)在制作边框背景图片时,应该制作4条边,中间部分需要挖空。
2)边框背景图片每条边的宽度跟对应的边框宽度(即border-width)应该相同。

border-image属性的平铺方式有3种:repeat、round、stretch。
1)取值为repeat时,表示4条边的小方块会不断重复,超出元素部分将会被剪切掉。
2)取值为round时,表示4条边的小方块会铺满。为了铺满,边框图片会压缩或拉伸。
3)取值为stretch时,表示可以使用border-image属性为边框添加背景图片。现在所有主流浏览器最新版本都支持border-image属性。

border-image属性需要定义3个方面的内容。
1)图片路径。
2)切割宽度:四条边的切割宽度,依次为上边、右边、下边、左边(顺时针)。
3)平铺方式:有3种取值,分别为repeat、round和stretch。

对于border-image属性,我们总结如下:
1)在制作边框背景图片时,应该制作4条边,中间部分需要挖空。
2)边框背景图片每条边的宽度跟对应的边框宽度(即border-width)应该相同。

border-image属性的平铺方式有3种:repeat、round、stretch。
1)取值为repeat时,表示4条边的小方块会不断重复,超出元素部分将会被剪切掉。
2)取值为round时,表示4条边的小方块会铺满。为了铺满,边框图片会压缩或拉伸。
3)取值为stretch时,表示4条边的小方块会拉伸,边长有多长就拉多长。

img

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:170px;
height:110px;
line-height:110px;
text-align: center;
border:30px solid gray;
margin-top:20px;
}
/*第1个div平铺方式为:repeat*/
#div1{border-image:url(img/border.png) 30 repeat;}
/*第2个div平铺方式为:round*/
#div2{border-image:url(img/border.png) 30 round;}
/*第3个div平铺方式为:stretch*/
#div3{border-image:url(img/border.png) 30 stretch;}
</style>
</head>
<body>
<div id="div1">repeat</div>
<div id="div2">round</div>
<div id="div3">stretch</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:170px;
height:110px;
line-height:110px;
text-align: center;
border:30px solid gray;
margin-top:20px;
}
/*第1个div平铺方式为:repeat*/
#div1{border-image:url(img/border.png) 30 repeat;}
/*第2个div平铺方式为:round*/
#div2{border-image:url(img/border.png) 30 round;}
/*第3个div平铺方式为:stretch*/
#div3{border-image:url(img/border.png) 30 stretch;}
</style>
</head>
<body>
<div id="div1">repeat</div>
<div id="div2">round</div>
<div id="div3">stretch</div>
</body>
</html>

border-image的派生子属性

border-image属性可以分开,分别为4条边设置相应的背景图片,这4条边的属性如下表所示。

子属性 说明
border-top-image 定义上边框背景图片
border-bottom-image 定义下边框背景图片
border-left-image 定义左边框背景图片
border-right-image 定义右边框背景图片

背景样式

背景大小:background-size

可以使用background-size属性来定义背景图片的大小

背景图片跟普通图片(即img标签)是不同的东西!width和height这两个属性只能用来定义img标签图片的大小,是不能用于控制背景图片的大小。

background-size属性取值有两种:一种是长度值,如px、em、百分比等;另外一种是使用关键字,如下表所示。

属性值 说明
cover 即“覆盖”,表示将背景图片等比缩放来填满整个元素
contain 即“容纳”,表示将背景图片等比缩放至某一边紧贴元素边沿为止
background-size:取值;

背景位置:background-origin

可以使用background-origin属性来定义背景图片是从什么地方开始平铺的,也就是定义背景图片的位置。

background-origin往往都是配合background-position来使用的,其中background-origin定义background-position相对于什么位置来定位。

background-origin:取值;
属性值 说明
border-box 从边框开始平铺
padding-box 从内边距开始平铺(默认值)
content-box 从内容区开始平铺

img

背景剪切:background-clip

background-clip属性用于指定背景图片在元素盒子模型中的哪些区域被剪切。

background-clip:取值;
属性值 说明
border-box 从边框开始剪切(默认值)
padding-box 从内边距开始剪切
content-box 从内容区开始剪切

img

多背景图片

在实际开发中,我们并不建议使用多背景图片,而是应该制作一张复合图片来实现。因为多一张图片就会多引发一次HTTP请求,影响页面加载速度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:400px;
height:200px;
border:1px solid silver;
background:url(img/frame1.png) bottom left no-repeat,
url(img/frame2.png) top right no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:400px;
height:200px;
border:1px solid silver;
background:url(img/frame1.png) bottom left no-repeat,
url(img/frame2.png) top right no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

CSS3变形

可以使用transform属性来实现元素的变形效果。

方法 说明
translate() 平移
scale() 缩放
skew() 倾斜
rotate() 旋转

平移:translate()

单位可以为px、em和百分比等

采用的坐标系都是W3C坐标系

transform: translateX(x);         /*沿X轴方向平移*/
transform: translateY(y); /*沿Y轴方向平移*/
transform: translate(x, y); transform: translateX(x); /*沿X轴方向平移*/
transform: translateY(y); /*沿Y轴方向平移*/
transform: translate(x, y); /*沿X轴和Y轴同时平移*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{padding: 100px;}
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:translate(20px, 40px);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{padding: 100px;}
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:translate(20px, 40px);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>

缩放:scale()

当x或y取值为0~1之间时,元素进行缩小;当x或y取值大于1时,元素进行放大。

transform: scaleX(x);         /*沿X轴方向缩放*/
transform: scaleY(y); /*沿Y轴方向缩放*/
transform: scale(x, y); transform: scaleX(x); /*沿X轴方向缩放*/
transform: scaleY(y); /*沿Y轴方向缩放*/
transform: scale(x, y); /*沿X轴和Y轴同时缩放*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:scale(1.2, 1.5);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:scale(1.2, 1.5);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>

倾斜:skew()

参数x表示元素在x轴方向的倾斜度数,单位为deg(即degree的缩写)。如果度数为正,则表示元素沿下x轴方向逆时针倾斜;如果度数为负,则表示元素沿x轴方向顺时针倾斜。

由于元素限定了高度为100px,而skewX()方法是沿着x轴方向倾斜的。因此只要倾斜角度不超过180°,元素都会保持100px的高度,同时为了保持倾斜,元素只能沿着x轴方向拉长本身。

transform: skewX(x);        /*沿X轴方向倾斜*/
transform: skewY(y); /*沿Y轴方向倾斜*/
transform: skew(x, y); transform: skewX(x); /*沿X轴方向倾斜*/
transform: skewY(y); /*沿Y轴方向倾斜*/
transform: skew(x, y); /*沿X轴和Y轴同时倾斜*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: lightskyblue;
transform:skew(10deg, 20deg);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: lightskyblue;
transform:skew(10deg, 20deg);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>

旋转:rotate()

参数angle表示元素相对于中心原点旋转的度数,单位为deg。如果度数为正,则表示顺时针旋转;如果度数为负,则表示逆时针旋转。

transform: transform: rotate(angle);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: lightskyblue;
transform:rotate(30deg);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: lightskyblue;
transform:rotate(30deg);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>

中心原点:transform-origin

默认情况下,元素的中心原点位于x轴和y轴的50%处

ransform-origin属性取值有两种:一种是“长度值”;另外一种是“关键字”。当取值为长度值时,单位可以为px、em和百分比等。

关键字 百分比 说明
top left 0 0 左上
top center 50% 0 靠上居中
top right 100% 0 右上
left center 0 50% 靠左居中
center center 50% 50% 正中
right center 100% 50% 靠右居中
bottom left 0 100% 左下
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下
transform-origin: 取值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
margin:100px
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
background-color: lightskyblue;
transform-origin:right center;
transform:rotate(30deg);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
margin:100px
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
background-color: lightskyblue;
transform-origin:right center;
transform:rotate(30deg);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>

CSS3过渡

使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”,从而来实现动画效果

凡是涉及CSS3过渡,我们都是结合:hover伪类,来实现过渡效果

transition: 过渡属性 过渡时间 过渡方式 延迟时间;

transition是一个复合属性,主要包括4个子属性

属性 说明
transition-property 对元素的哪一个属性进行操作
transition-duration 过渡的持续时间
transition-timing-function 过渡的速率方式
transition-delay 过渡的延迟时间(可选参数)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block;
padding:5px 10px;
border-radius:5px;
color:white;
background-color:hotpink;
cursor:pointer;
transition:background-color 1s linear 0s;
}
div:hover
{
background-color:purple;
}
</style>
</head>
<body>
<div>从0到1系列</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block;
padding:5px 10px;
border-radius:5px;
color:white;
background-color:hotpink;
cursor:pointer;
transition:background-color 1s linear 0s;
}
div:hover
{
background-color:purple;
}
</style>
</head>
<body>
<div>从0到1系列</div>
</body>
</html>

过渡属性:transition-property

可以使用transition-property属性来定义过渡效果操作的是哪一个属性。

transition-property属性取值是“CSS属性”。

transition-property: 取值;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:50px;
background-color:lightskyblue;
transition-property:height;
transition-duration:0.5s ;
transition-timing-function:linear;
transition-delay:0s;
}
div:hover
{
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</transition-property: 取值;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:50px;
background-color:lightskyblue;
transition-property:height;
transition-duration:0.5s ;
transition-timing-function:linear;
transition-delay:0s;
}
div:hover
{
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

过渡时间:transition-duration

使用transition-duration属性来定义过渡的持续时间。

transition-duration属性取值是一个时间,单位为秒(s),可以取小数。

transition-duration: 时间;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
background-color:lightskyblue;
transition-property:border-radius;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay:0s;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</transition-duration: 时间;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
background-color:lightskyblue;
transition-property:border-radius;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay:0s;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

过渡方式:transition-timing-function

使用transition-timing-function属性来定义过渡方式。

transition-timing-function: 取值;

transition-timing-function属性取值共有5种,如下表所示。

属性值 说明 速率
ease 默认值,由快到慢,逐渐变慢 img
linear 匀速 img
ease-in 速度越来越快(即渐显效果) img
ease-out 速度越来越慢(即渐隐效果) img
ease-in-out 先加速后减速(即渐显渐隐效果) img
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:50px;
line-height:50px;
text-align:center;
margin-top:5px;
background-color:lightskyblue;
transition-property:width;
transition-duration:2s ;
transition-delay:0s;
}
#div1{transition-timing-function:linear;}
#div2{transition-timing-function:ease;}
#div3{transition-timing-function:ease-in;}
#div4{transition-timing-function:ease-out;}
#div5{transition-timing-function:ease-in-out;}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:50px;
line-height:50px;
text-align:center;
margin-top:5px;
background-color:lightskyblue;
transition-property:width;
transition-duration:2s ;
transition-delay:0s;
}
#div1{transition-timing-function:linear;}
#div2{transition-timing-function:ease;}
#div3{transition-timing-function:ease-in;}
#div4{transition-timing-function:ease-out;}
#div5{transition-timing-function:ease-in-out;}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>

延迟时间:transition-delay

使用transition-delay属性来定义过渡效果的延迟时间。

transition-delay属性取值是一个时间,单位为秒(s),可以是小数,默认值为0s。也就是说,当我们没有定义transition-delay时,过渡效果就没有延迟时间。

transition-delay: 时间;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
background-color:lightskyblue;
transition-property:border-radius;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay: 2s;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</transition-delay: 时间;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
background-color:lightskyblue;
transition-property:border-radius;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay: 2s;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

深入了解transition属性

transition-property取值为all

以使用transition属性同时对多个CSS属性来实现过渡效果

transition:all 1s linear transition:all 1s linear 0s;

transition-delay的省略

transition-delay属性是一个可选属性,因此当transition-delay取值为0s时,这个参数可以省略。

transition:all 1s linear 0s;
//上面这句代码可以等价于:
transition:all transition:all 1s linear 0s;
//上面这句代码可以等价于:
transition:all 1s linear;

transition属性的位置

如果把transition属性写在悬浮状态内的话,移出时没有过渡效果。

div:hover
{
border-radius:50px;
background-color:hotpink;
/*transition属性放到:hover{}中*/
transition:all div:hover
{
border-radius:50px;
background-color:hotpink;
/*transition属性放到:hover{}中*/
transition:all 0.5s linear;
}

CSS3动画简介

  • 对于transition属性来说,它只能将元素的某一个属性从一个属性值过渡到另一个属性值。
  • 对于animation属性来说,它可以将元素的某一个属性从第1个属性值过渡到第2个属性值,然后还可以继续过渡到第3个属性值,以此类推。

transition属性(即CSS3过渡)只能实现一次性的动画效果,而animation属性(即CSS3动画)可以实现连续性的动画效果。

使用animation属性实现CSS3动画需要两步

(1)定义动画。(2)调用动画。

animation: 动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;

animation是一个复合属性,主要包括6个子属性,如下表所示。

属性 说明
animation-name 对哪一个CSS属性进行操作
animation-duration 动画的持续时间
animation-timing-function 动画的速率方式
animation-delay 动画的延迟时间
animation-iteration-count 动画的播放次数
animation-direction 动画的播放方向,正向还是反向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:100px;
border-radius:50px;
background-color:red;
}
/*定义动画*/
@keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
/*调用动画*/
div:hover
{
animation:mycolor 5s linear;
}
</style>
</head>
<body>
<div></div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:100px;
border-radius:50px;
background-color:red;
}
/*定义动画*/
@keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
/*调用动画*/
div:hover
{
animation:mycolor 5s linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

@keyframes

在调用动画之前,我们必须先使用@keyframes规则来定义动画

@keyframes 动画名
{
0%{}
……
100@keyframes 动画名
{
0%{}
……
100%{}
}

0%表示动画的开始,100%表示动画的结束,0%和100%是必须的。

如果仅仅只有0%和100%这两个百分比的话,此时0%和100%可以使用关键字from和to来代替,其中0%对应from,100%对应to。

@keyframes mycolor
{
from{color:red}
to{@keyframes mycolor
{
from{color:red}
to{color:green}
}

动画名称:animation-name

animation-name调用的动画名需要和@keyframes规则定义的动画名完全一致(区分大小写),如果不一致将不会产生任何动画效果。

只需要把调用动画的代码放在div元素,而不是在:hover伪类中,就能在打开页面就能自动执行动画

animation-name: 动画名;

持续时间:animation-duration

animation-duration属性取值是一个时间,单位为秒(s),可以是小数。

CSS3动画大多数时候都是配合CSS3变形一起使用,然后来实现各种绚丽复杂的动画效果。

animation-duration: 时间;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@keyframes mytranslate
{
0%{}
100%{transform:translateX(160px);}
}
#container
{
display:inline-block;
width:200px;
border:1px solid silver;
}
#div1,#div2
{
width:40px;
height:40px;
margin-top:10px;
border-radius:20px;
background-color:red;
animation-name:mytranslate;
animation-timing-function:linear;
}
#div1{animation-duration:2s;}
#div2{animation-duration:4s;}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</animation-duration: 时间;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@keyframes mytranslate
{
0%{}
100%{transform:translateX(160px);}
}
#container
{
display:inline-block;
width:200px;
border:1px solid silver;
}
#div1,#div2
{
width:40px;
height:40px;
margin-top:10px;
border-radius:20px;
background-color:red;
animation-name:mytranslate;
animation-timing-function:linear;
}
#div1{animation-duration:2s;}
#div2{animation-duration:4s;}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>

动画方式:animation-timing-function

使用animation-timing-function属性来定义动画的动画方式。所谓“动画方式”,指的是动画在过渡时间内的速率变化方式。

animation-timing-function属性取值共有5种,这个跟CSS3过渡的 transition-timing-function是一样的

animation-timing-function: 取值;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义动画*/
@keyframes mytransform
{
0%{ }
100%{width:300px;}
}
div
{
width:100px;
height:50px;
line-height:50px;
text-align:center;
margin-top:10px;
border-radius:0;
background-color:lightskyblue;
/*调用动画*/
animation-name:mytransform;
animation-duration:5s;
}
#div1{animation-timing-function:linear;}
#div2{animation-timing-function:ease;}
#div3{animation-timing-function:ease-in;}
#div4{animation-timing-function:ease-out;}
#div5{animation-timing-function:ease-in-out}
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</animation-timing-function: 取值;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义动画*/
@keyframes mytransform
{
0%{ }
100%{width:300px;}
}
div
{
width:100px;
height:50px;
line-height:50px;
text-align:center;
margin-top:10px;
border-radius:0;
background-color:lightskyblue;
/*调用动画*/
animation-name:mytransform;
animation-duration:5s;
}
#div1{animation-timing-function:linear;}
#div2{animation-timing-function:ease;}
#div3{animation-timing-function:ease-in;}
#div4{animation-timing-function:ease-out;}
#div5{animation-timing-function:ease-in-out}
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>

延迟时间:animation-delay

使用animation-delay属性来定义动画的延迟时间

animation-delay属性取值是一个时间,单位为秒(s),可以为小数,其中默认值为0s。也就是说,当我们没有定义animation-delay时,动画就没有延迟时间。

animation-delay: 时间;

播放次数:animation-iteration-count

animation-iteration-count属性取值有两种:一种是“正整数”;另外一种是“infinite”。当取值是n(正整数)时,表示动画播放n次;当取值为infinite时,表示动画播放无数次,也就是循环播放。

animation-iteration-count: 取值;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@keyframes mytranslate
{
0%{}
50%{transform:translateX(160px);}
100%{}
}
#ball
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
animation-name:mytranslate;
animation-timing-function:linear;
animation-duration:2s;
animation-iteration-count:infinite; /*循环播放*/
}
#container
{
display:inline-block;
width:200px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="container">
<div id="ball"></div>
</div>
</body>
</animation-iteration-count: 取值;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@keyframes mytranslate
{
0%{}
50%{transform:translateX(160px);}
100%{}
}
#ball
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
animation-name:mytranslate;
animation-timing-function:linear;
animation-duration:2s;
animation-iteration-count:infinite; /*循环播放*/
}
#container
{
display:inline-block;
width:200px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="container">
<div id="ball"></div>
</div>
</body>
</html>

播放方向:animation-direction

animation-direction属性在实际开发中用得很少

animation-direction: 取值;

animation-direction属性取值有3个,如下表所示。
image-20210417155248906

播放状态:animation-play-state

animation-play-state: 取值;

animation-play-state属性只有2个取值,如下表所示。

属性值 说明
running 播放(默认值)
paused 暂停

多列布局

列数:column-count

定义多列布局的列数。

column-count: 取值;

column-count属性取值有2种,如下表所示。

属性值 说明
auto 列数由column-width属性决定(默认值)
n(正整数) 自动划分为n列
body
{
width:400px;
padding:10px;
border:1px solid silver;
column-count:body
{
width:400px;
padding:10px;
border:1px solid silver;
column-count:3;
}

列宽:column-width

定义多列布局中每一列的宽度。

column-width属性取值有2种,如下表所示。

属性值 说明
auto 列数由column-count属性决定(默认值)
长度值 单位可以为px、em和百分比等

间距:column-gap

定义列与列之间的间距。

column-gap: 取值;

column-gap属性取值有2个,如下表所示。

属性值 说明
normal 浏览器默认长度值
长度值 单位可以为px、em和百分比等

边框:column-rule

定义列与列之间的边框样式。

column-rule: width style color;

column-rule:column-rule: width style color;

column-rule:1px dashed red;

column-rule属性跟border属性是非常相似的,它也是一个复合属性,由3个子属性组成。

  • column-rule-width:定义边框的宽度。
  • column-rule-style:定义边框的样式。
  • column-rule-color:定义边框的颜色。

跨列:column-span

实现多列布局的跨列效果

跨列在CSS3多列布局中也是很常见的效果。

column-span: 取值;

column-span属性取值只有2种,如下表所示。

属性值 说明
none 不跨列
all 跨所有列(跟none相反)

滤镜效果

亮度:brightness()

亮度滤镜可以减弱或增强图片的亮度。

brightness()方法的取值是一个百分比,其中0%~100%表示减弱图片的亮度,例如0%就是完全黑色。100%以上表示增强图片的亮度,例如200%就是将亮度提高2倍。

filter: filter: brightness(百分比);

灰度:grayscale()

灰度滤镜可以将彩色图片转换成黑白图片

grayscale()方法的取值是一个百分比,其中0%表示不做任何修改,100%表示完全灰度(即黑白图片)。

filter: filter: grayscale(百分比)

复古:sepia()

实现复古滤镜效果。复古滤镜,也叫褐色滤镜。

sepia()方法的取值是一个百分比,取值范围为0%~100%。其中,0%表示没有转换,100%表示复古效果。

filter: filter: sepia(百分比)

反色:invert()

实现反色滤镜效果的。反色,指的是将红、绿、蓝3个通道的像素取各自的相反值。

invert()方法的取值是一个百分比,取值范围为0%~100%。其中,0%表示没有转换,100%表示反转所有颜色。

filter: filter: invert(百分比)

旋转(色相):hue-rotate()

实现色相旋转的滤镜效果。

hue-rotate()方法的取值是一个度数,单位为deg(即degree的缩写)。其中,0deg表示不旋转,360deg表示旋转360°,也就是相当于一个循环。

filter: hue-filter: hue-rotate(度数)

阴影:drop-shadow()

drop-shadow()方法的参数有4个,每一个参数说明如下。

  • (1)x-offset:定义水平阴影的偏移距离,可以使用负值。由于CSS3采用的是W3C坐标系,因此x-offset取值为正时,向右偏移;取值为负时,向左偏移。
  • (2)y-offset:定义垂直阴影的偏移距离,可以使用负值。由于CSS3采用的是W3C坐标系,因此y-offset取值为正时,向下偏移;取值为负时,向上偏移。
  • (3)blur:定义阴影的模糊半径,只能为正值。
  • (4)color:定义阴影的颜色。
filter: drop-shadow(x-offset y-offset blur color)

#after
{
filter:drop-shadow(5px 5px filter: drop-shadow(x-offset y-offset blur color)

#after
{
filter:drop-shadow(5px 5px 10px red);
}

透明度:opacity()

opacity()方法的取值是一个百分比,取值范围为0%~100%。其中,0%表示完全透明,100%表示完全不透明。

filter: filter: opacity(百分比)

模糊度:blur()

使用blur()方法来实现模糊度滤镜效果,也就是“马赛克”。

blur()方法的取值是一个像素值,取值越大,模糊效果越明显。

filter: blur(像素)

#after
{
filter:blur(filter: blur(像素)

#after
{
filter:blur(5px);
}

对比度:contrast()

contrast()方法的取值是一个百分比。其中,0%~100%表示减弱对比度,例如0%则是灰度图片。100%以上表示增强对比度,例如200%表示增强对比度为原来的2倍。

filter: filter: contrast(百分比)

饱和度:saturate()

saturate()方法的取值是一个百分比。其中,0%~100%表示减弱饱和度,100%以上表示增强饱和度。

filter: filter: saturate(百分比)

多种滤镜

为某个元素同时定义多种滤镜效果,我们可以将filter属性的取值设置为一个“值列表”的形式来实现。

在值列表中,两个值之间需要用空格隔开。

filter: 值列表;

#after
{
filter:brightness(120%) contrast(200%) blur(filter: 值列表;

#after
{
filter:brightness(120%) contrast(200%) blur(1px);
}

弹性盒子模型

通过弹性盒子模型,我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局,使得响应式布局的实现更加容易。

在使用弹性盒子模型之前,必须为父元素定义“display:flex;”或“display:inline-flex;”,这个父元素才具有弹性盒子模型的特点。

子元素宽度之和小于父元素宽度。因此,所有子元素最终的宽度就是原来定义的宽度。

子元素宽度之和大于父元素宽度。因此,子元素会按比例来划分宽度。

响应式布局的关键是使用@media来实现媒体查询

放大比例:flex-grow

定义弹性盒子内部子元素的放大比例。也就是当所有子元素宽度之和小于父元素的宽度时,子元素如何分配父元素的剩余空间。

在使用flex-grow时,一般是不需要对弹性盒子内部的子元素定义宽度或高度的,否则会影响flex容器的比例分配。

flex-grow属性取值是一个数值,默认值为0。当取值为0时,表示不索取父元素的剩余空间。当取值大于0时,表示索取父元素的剩余空间(即子元素放大)。取值越大,索取得越多。

由于所有子元素都没有指定宽度,因此我们可以看成:所有子元素宽度之和小于父元素的宽度。接着我们只需要使用flex-grow属性给每一个子元素指定一个值,然后浏览器就会自动计算每个子元素所占的比例,自动划分宽度。

举个例子,父元素下有两个子元素:A和 B。其中父元素宽400px,A宽为100px,B宽为200px。那么父元素的剩余空间为400-100-200=100px。

  • (1)如果A和B都不索取,也就是A和B的flex-grow为0,则父元素的剩余空间为100px。
  • (2)如果A索取,B不索取。其中A设置flex-grow:1,那么最终A的宽为100+100=200px,B的宽不变还是200px。
  • (3)如果A和B同时索取剩余空间,其中A设置flex-grow:1,B设置flex-grow:1,那么最终A的宽为100+100×1/(1+1)=150px,B的宽为200+100×1/(1+1)=250px。
  • (4)如果A和B同时索取剩余空间,其中A设置flex-grow:1,B设置flex-grow:3,那么最终A的宽为100+100×1/(1+3)=125px,B的宽为200+100×3/(1+3)=275px。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wrapper
{
display:flex;
width:200px;
height:150px;
}
#box1
{
background:red;
flex-grow: 1;
}
#box2
{
background:blue;
flex-grow: 2;
}
#box3
{
background:orange;
flex-grow: 1;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wrapper
{
display:flex;
width:200px;
height:150px;
}
#box1
{
background:red;
flex-grow: 1;
}
#box2
{
background:blue;
flex-grow: 2;
}
#box3
{
background:orange;
flex-grow: 1;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>

缩小比例:flex-shrink

当所有子元素宽度之和大于父元素的宽度时,子元素如何缩小自己的宽度。

flex-shrink属性取值是一个数值,默认值为1。当取值为0时,表示子元素不缩小。当取值大于1时,表示子元素按一定的比例缩小。取值越大,缩小得越厉害。

只有当所有子元素宽度之和小于弹性盒子的宽度时,flex-grow才会生效,而此时flex-shrink无效;只有当所有子元素宽度之和大于弹性盒子的宽度时,flex-shrink属性才会生效,而此时flex-grow无效。也就是说,flex-grow和flex-shrink是互斥的,不可能同时生效。

  • (1)对于定义了flex-grow:0或者flex-shrink:0;的子元素,宽度为原来定义的宽度,并且不会参与划分。
  • (2)flex-grow的默认值为0,而flex-shrink的默认值为1。

在实际开发中,我们更多的是使用flex-grow属性,很少会用flex-shrink属性。

flex-shrink: 数值;

举个例子,父元素下有两个子元素:A和 B。其中父元素宽400px,A宽为200px,B宽为300px。那么A和B宽度之和超出父元素宽度为:200+300-400=100px。

  • (1)如果A和B都不缩小,也就是A和B都设置flex-shrink:0,那么会有100px的宽度超出父元素。
  • (2)如果A不缩小,B缩小。其中A设置flex-shrink:0;,B设置flex-shrink:1;(默认值)。那么最终A的宽不变还是200px,B的宽为300-100=200px(自身宽度-超出父元素的宽度)。
  • (3)如果A和B同时缩小,其中A设置flex-shrink:1,B设置flex-shrink:1,那么最终A的宽为200-100×(200×1)/(200×1+300×1)=160px(A自身宽度-A减小的宽度),B的宽为300-100×(300×1)/(200×1+300×1)=240px(B自身宽度-B减小的宽度)。
  • (4)如果A和B同时缩小,其中A设置flex-shrink:3,B设置flex-shrink:2,那么最终A的宽为200-100×(200×3)/(200×3+300×2)=150px(A自身宽度-A减小的宽度),B的宽为300-100×(300×2)/(200×3+300×2)=250px(B自身宽度-B减小的宽度)。

元素宽度:flex-basis

定义弹性盒子内部子元素的在分配空间之前,该子元素所占的空间大小。浏览器会根据这个属性,然后计算父元素是否有多余空间。

在弹性盒子中,flex-basis的语义会比width好一点。flex-basis和width都可以用来设置子元素的宽度,但是我们应该使用flex-basis而不是width,这也是为了更好的语义化。

flex-basis属性取值有两个:一个是“auto”,即该子元素的宽度是根据内容多少来定的;另外一个是“长度值”,单位可以为px、em和百分比等。

flex-basis属性用来设置子元素的宽度,当然,width属性也可以用来设置子元素的宽度。如果某一个子元素同时设置flex-basis和width,那么flex-basis的值会覆盖width的值。

flex-basis是针对弹性盒子(父元素)下的子元素而已的,不能用于设置弹性盒子的宽度。

复合属性:flex

可以使用flex属性来同时设置flex-grow、flex-shrink、flex-basis这3个属性。

参数grow是flex-grow的取值,参数shrink是flex-shrink的取值,参数basis是flex-basis的取值。因此,flex属性的默认值为“0 1 auto”。

在实际开发中,优先使用flex属性,而不是单独写flex-grow、flex-shrink、flex-basis这3个属性。

flex:1;”其实等价于“flex:1 1 auto;”,而“flex:2;”等价于“flex:2 1 auto;”。也就是说flex取值只有一个数时,表示只设置了flex-grow这个属性的取值。事实上,在实际开发中我们一般也是只需要设置flex-grow属性,很少用得上另外两个属性。

flex: grow shrink basis;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wrapper
{
display:flex;
width:200px;
height:150px;
}
#box1
{
background:red;
flex: 1;
}
#box2
{
background:blue;
flex: 2;
}
#box3
{
background:orange;
flex: 1;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wrapper
{
display:flex;
width:200px;
height:150px;
}
#box1
{
background:red;
flex: 1;
}
#box2
{
background:blue;
flex: 2;
}
#box3
{
background:orange;
flex: 1;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>

排列方向:flex-direction

定义弹性盒子内部“子元素”的排列方向。也就是定义子元素是横着排,还是竖着排。

flex-direction属性是在弹性盒子(即父元素)上定义的。

flex-direction: 取值;

flex-direction属性取值有4个,如下表所示。

属性值 说明
row 横向排列(默认值)
row-reverse 横向反向排列
column 纵向排列
column-reverse 纵向反向排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wrapper
{
display:flex;
flex-direction:row-reverse;
width:200px;
height:150px;
}
#box1,#box2,#box3
{
height:150px;
line-height: 150px;
text-align: center;
font-size:30px;
color:white;
}
#box1
{
background:red;
flex: 1;
}
#box2
{
background:blue;
flex: 2;
}
#box3
{
background:orange;
flex: 3;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wrapper
{
display:flex;
flex-direction:row-reverse;
width:200px;
height:150px;
}
#box1,#box2,#box3
{
height:150px;
line-height: 150px;
text-align: center;
font-size:30px;
color:white;
}
#box1
{
background:red;
flex: 1;
}
#box2
{
background:blue;
flex: 2;
}
#box3
{
background:orange;
flex: 3;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</div>
</body>
</html>

多行显示:flex-wrap

使用flex-wrap属性来定义弹性盒子内部“子元素”是单行显示还是多行显示。

flex-wrap: 取值;

flex-wrap属性常见取值有3个,如下表所示。

属性值 说明
nowrap 单行显示(默认值)
wrap 多行显示,也就是换行显示
wrap-reverse 多行显示,但是却是反向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 公用样式 */
.wrapper1,.wrapper2,.wrapper3
{
display: flex;
color: white;
font-size:24px;
width:400px;
height: 100px;
line-height:50px;
border:1px solid gray;
text-align: center;
}
.wrapper1 div,.wrapper2 div,.wrapper3 div
{
height: 50%;
width: 50%;
}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}
/* 弹性盒子样式 */
.wrapper1 {flex-wrap: nowrap;}
.wrapper2 {flex-wrap: wrap;}
.wrapper3 {flex-wrap: wrap-reverse;}
</style>
</head>
<body>
<h3>1、flex-wrap:nowrap(默认值)</h3>
<div class="wrapper1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h3>2、flex-wrap:wrap</h3>
<div class="wrapper2">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h3>3、flex-wrap:wrap-reverse</h3>
<div class="wrapper3">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 公用样式 */
.wrapper1,.wrapper2,.wrapper3
{
display: flex;
color: white;
font-size:24px;
width:400px;
height: 100px;
line-height:50px;
border:1px solid gray;
text-align: center;
}
.wrapper1 div,.wrapper2 div,.wrapper3 div
{
height: 50%;
width: 50%;
}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}
/* 弹性盒子样式 */
.wrapper1 {flex-wrap: nowrap;}
.wrapper2 {flex-wrap: wrap;}
.wrapper3 {flex-wrap: wrap-reverse;}
</style>
</head>
<body>
<h3>1、flex-wrap:nowrap(默认值)</h3>
<div class="wrapper1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h3>2、flex-wrap:wrap</h3>
<div class="wrapper2">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h3>3、flex-wrap:wrap-reverse</h3>
<div class="wrapper3">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</body>
</html>

复合属性:flex-flow

使用flex-flow属性来同时设置flex-direction、flex-wrap这两个属性。

在实际开发中,我们更倾向于使用flex-flow这种简写形式。

参数direction是flex-direction的取值,参数wrap是flex-wrap的取值。因此,flex-flow属性的默认值为“row nowrap”。

flex-flow: direction wrap;

排列顺序:order

使用order属性来定义弹性盒子内部“子元素”的排列顺序。

order属性取值是一个正整数,即1、2、3等。****

order:整数

#box1
{
background:red;
flex: 1;
order:order:整数

#box1
{
background:red;
flex: 1;
order:2;
}

水平对齐:justify-content

使用justify-content属性来定义弹性盒子内部子元素在“横轴”上的对齐方式。

justify-content属性有很多,常见的如下表所示。

属性值 说明
flex-start 所有子元素在左边(默认值)
center 所有子元素在中间
flex-end 所有子元素在右边
space-between 所有子元素平均分布
space-around 所有子元素平均分布,但两边留有一定间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*定义整体样式*/
.flex
{
display: flex;
flex-flow: row nowrap;
background-color:lightskyblue;
margin-bottom:5px;
}
.item
{
width: 80px;
padding:10px;
text-align: center;
background-color:hotpink;
box-sizing: border-box;
}
/*定义justify-content*/
.start{justify-content: flex-start;}
.center {justify-content: center;}
.end {justify-content: flex-end;}
.between {justify-content: space-between;}
.around {justify-content: space-around;}
</style>
</head>
<body>
<h3>1、flex-start:</h3>
<div class="flex start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>2、center:</h3>
<div class="flex center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>3、flex-end:</h3>
<div class="flex end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>4、space-between:</h3>
<div class="flex between">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>5、space-around:</h3>
<div class="flex around">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*定义整体样式*/
.flex
{
display: flex;
flex-flow: row nowrap;
background-color:lightskyblue;
margin-bottom:5px;
}
.item
{
width: 80px;
padding:10px;
text-align: center;
background-color:hotpink;
box-sizing: border-box;
}
/*定义justify-content*/
.start{justify-content: flex-start;}
.center {justify-content: center;}
.end {justify-content: flex-end;}
.between {justify-content: space-between;}
.around {justify-content: space-around;}
</style>
</head>
<body>
<h3>1、flex-start:</h3>
<div class="flex start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>2、center:</h3>
<div class="flex center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>3、flex-end:</h3>
<div class="flex end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>4、space-between:</h3>
<div class="flex between">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3>5、space-around:</h3>
<div class="flex around">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>

垂直对齐:align-items

使用align-items属性来定义弹性盒子内部子元素在“纵轴”上的对齐方式。

align-items: 取值;

align-items属性有很多,常见的如下表所示。

属性值 说明
flex-start 所有子元素在上边(默认值)
center 所有子元素在中部
flex-end 所有子元素在下边
baseline 所有子元素在父元素的基线上
strecth 拉伸子元素以适应父元素高度

其他样式

outline属性

使用outline属性来定义表单中文本框的轮廓线样式。

第1个值指的是轮廓线宽度(outline-width),第2个值指的是轮廓线样式(outline-sytle),第3个值指的是轮廓线颜色(outline-color)。

outline属性相当有用,特别是在美化搜索框样式的时候经常用到。

outline: width style color;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input[type="text"]:focus
{
outline:1px solid red;
}
</style>
</head>
<body>
<input id="txt" type="text">
</body>
</outline: width style color;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input[type="text"]:focus
{
outline:1px solid red;
}
</style>
</head>
<body>
<input id="txt" type="text">
</body>
</html>

initial取值

使用“initial”这个值来直接将某个CSS属性重置为它的默认值,并不需要事先这个CSS属性的默认值是多少,因为浏览器会自动设置的。

property是一个CSS属性名,“property:initial;”表示设置property这个属性的取值为默认值。此外,initial取值可以用于任何HTML元素上的任何CSS属性。

property: initial<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{color:red;}
#select{color:initial;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
<div id="select">绿叶学习网</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{color:red;}
#select{color:initial;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
<div id="select">绿叶学习网</div>
</body>
</property: initial<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{color:red;}
#select{color:initial;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
<div id="select">绿叶学习网</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{color:red;}
#select{color:initial;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
<div id="select">绿叶学习网</div>
</body>
</html>

calc()函数

使用calc()函数通过“计算”的方式来定义某一个属性的取值。’

在实际开发中,calc()函数非常好用,特别是在自适应布局中涉及不同单位之间的运算时用得非常多。

属性: 属性: calc(表达式)

我们可以使用calc()函数以计算的方式给元素的width、margin、padding、font-size等来定义属性值。对于calc()函数,有以下5条运算规则。

  • (1)只能使用加(+)、减(-)、乘(*)和除(/)这4种运算。
  • (2)可以使用px、em、rem、百分比等单位。
  • (3)可以混合使用各种单位进行运算。
  • (4)表达式中有加号(+)和减号(-)时,其前后必须有空格。
  • (5)表达式中有乘号(*)和除号(/)时,其前后可以没有空格,但建议保留。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
.col-3
{
float: left;
width: calc(100% / 3 - 5px);
margin-right: calc(5px * 3 /2);
margin-bottom: calc(5px * 3 /2);
height: 60px;
line-height: 60px;
text-align: center;
font-size: 24px;
background: #EEEEEE;
color: #333333;
}
.col-3:nth-child(3){margin-right: 0;}
</style>
</head>
<body>
<div class="container">
<div class="col-3">1</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
</div>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
.col-3
{
float: left;
width: calc(100% / 3 - 5px);
margin-right: calc(5px * 3 /2);
margin-bottom: calc(5px * 3 /2);
height: 60px;
line-height: 60px;
text-align: center;
font-size: 24px;
background: #EEEEEE;
color: #333333;
}
.col-3:nth-child(3){margin-right: 0;}
</style>
</head>
<body>
<div class="container">
<div class="col-3">1</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
</div>
</body>
</html>

overflow-x和overflow-y

overflow-x属性用来定义内容超出元素“宽度”时应该如何处理,而overflow-y属性用来定义内容超出元素“高度”时应该如何处理。

overflow-x: 取值;
overflow-x: 取值;
overflow-y: 取值;

overflow-x和overflow-y这两个属性都有4种取值,如下表所示。

属性值 说明
visible 内容超出时,不剪切内容,也不添加滚动条
hidden 内容超出时,剪切内容,但只显示y轴滚动条而不显示x轴滚动条
scroll 内容超出时,显示所有滚动条
auto 跟scroll效果一样
属性值 说明
visible 内容超出时,不剪切内容,也不添加滚动条
hidden 内容超出时,剪切内容,但只显示x轴滚动条而不显示y轴滚动条
scroll 内容超出时,显示所有滚动条
auto 跟scroll效果一样
#view
{
display:inline-block;
width:160px;
height:160px;
background-color:#F1F1F1;
border:1px solid gray;
#view
{
display:inline-block;
width:160px;
height:160px;
background-color:#F1F1F1;
border:1px solid gray;
overflow-x:visible;
}

pointer-events属性

使用pointer-events属性来定义元素是否禁用鼠标单击事件。pointer-events属性是一个与JavaScript有关的属性。

pointer-events: 取值;

pointer-events属性取值只有2个,如下表所示。

属性值 说明
auto 不禁用鼠标单击事件(默认值)
none 禁用鼠标单击事件
.disable
{
pointer-events: none;
color:.disable
{
pointer-events: none;
color:#666666;
}