目录
4、<hr>
16、background: linear-gradient( )
17、background: repeating-linear-gradient( )
1、text-align
用于指定元素文本的水平对齐方式
2、width
设置元素的宽度
3、height
设置元素的高度
属性值与 width 一致
4、<hr>
可以创建一条宽度撑满父元素的水平线 (它是一个单标签)
5、background-color
设置一个元素的背景颜色 (背景包括元素的总大小、padding、border)
使用 rgba() 可以半透明效果,rgba()
函数解释如下:
alpha
值可以在 0 到 1 之间,其中 0 代表完全透明,1 代表完全不透明
6、box-shadow
用来给元素添加阴影,该属性值是由逗号分隔的一个或多个阴影列表
box-shadow
属性的参数描述:
其中,blur-radius 和 spread-radius 是可选参数。
示例:
还可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。
CSS代码:
div {
width: 150px;
height: 150px;
background-color: #fff;
box-shadow: 120px 80px 40px 20px #0ff;
/* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
/* blur-size 和 spread-size 是可选的 (默认为 0) */
图解:
7、opacity
用来设置元素的透明度
属性值在 0 - 1 之间,0 代表完全透明,1 代表完全不透明
透明度会应用到元素内的所有内容,不论是图片,还是文本,或是背景色。
rgba 和 opacity 效果对比:
8、text-transform
用来改变英文
字母的大小写
9、font-weight
用来设置文本的粗细
10、font-size
用于设置字体大小
它可以应用于任何包含文字的元素内
单位: 长度单位(px、em)、绝对大小值(small, large)、百分比 (%)
11、line-height
用来设置行间的距离(行高),行高就是每行文字所占据的垂直空间
12、链接伪类选择器
(1):hover 鼠标悬停到链接上就为样式做更改
(2):link 链接未被访问时的样式
(3):visited 链接已被访问后的样式
(4):active 当链接被鼠标点击时的样式
不止是用于链接,块元素、行内元素都可以应用
示例代码:
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
运行结果:
13、position
盒模型:
在 CSS 里一切 HTML 元素皆为盒子,也就是通常所说的 盒模型
块级元素: 会自动从新的一行开始(比如标题
、段落
以及 div)
行内元素: 会排列在上一个元素后,默认不会新起一行(比如图片以及 span)
普通流: 元素默认按照的布局方式,就称为文档的普通流
CSS 提供了 position
属性来覆盖普通流,可使用 position
指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
sticky | 粘性定位,该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
initial | 设置该属性为默认值 |
使用 absolute(绝对定位) :
absolute
定位会将元素从当前的文档流里面移除,周围的元素会忽略它;
absolute
定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素;
如果它的父元素没有添加定位规则(默认是 position:relative;
),浏览器会继续寻找直到默认的 body 标签
<style>
h2 {
position: absolute;
left: 100px;
top: 150px;
}
</style>
<h2>这是一个绝对定位了的标题</h2>
<p>
用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100
px和距离页面的顶部150 px的元素。.
运行结果:
使用 relative(相对定位) :
<style>
h2.pos_left {
position: relative;
left: -50px;
}
h2.pos_right {
position: relative;
left: 50px;
}
</style>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素本身的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
运行结果:
使用 fixed(固定定位) :
它是一种特殊的绝对(absolute)定位,区别是其参照物是浏览器窗口;
会将元素从当前的文档流里面移除,其它元素会忽略它的存在;
fixed
定位和 absolute
定位的最明显的区别是 fixed
定位元素不会随着屏幕滚动而移动
<style>
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #767676;
}
</style>
<body>
<nav id="navbar">
<ul>
<li><a href="/">网站首页</a></li>
<li><a href="/about/about.html">联系我们</a></li>
</ul>
</nav>
14、float
用来设置元素的浮动定位
浮动元素不在文档流中,它向左或向右浮动;
直到它的外边缘碰到包含框或另一个浮动框的边框为止;
浮动元素之后的元素将围绕它;
浮动元素之前的元素将不会受到影响
示例:
图像添加了右浮动,在它下面的文本将环绕在它左边
<style>
img {
float: right;
}
</style>
<body>
<p>
在下面的段落中,我们添加了一个
<b>float:right</b> 的图片。导致图片将会浮动在段落的右边。
</p>
<p>
<img
src="https://atts.w3cschool.cn/attachments/image/20201019/1603097333917107.png"
width="95"
height="84"
/>
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
运行结果:
15、z-index
可以指定元素的堆叠次序,它的取值是整数,数值大的元素优先于数值小的元素显示
图解:
16、background: linear-gradient( )
CSS提供的 background
里面的 linear-gradient()
方法,可以实现HTML 元素背景色的线性渐变,它是利用最后一个颜色把位置填充完
语法:
background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);
参数1:指定了颜色过渡的方向,它的值是角度 (如: 90deg 代表垂直渐变,45deg 和反斜杠方向差不多)
其余参数:指定了渐变颜色的顺序
示例:
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
运行结果:
17、background: repeating-linear-gradient( )
repeating-linear-gradient() 方法与 linear-gradient( ) 的区别是,它是用重复的效果去填充没有填充的位置
语法:
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
参数及描述:
Value | 描述 |
---|---|
angle | 定义渐变的角度方向。从 0deg 到 360deg,默认为 180deg。 |
side-or-corner | 指定线性渐变的起始位置。由两个关键字组成:第一个为指定水平位置(left 或 right),第二个为指定垂直位置(top 或bottom)。 顺序是随意的,每个关键字都是可选的。 |
color-stop1, color-stop2,... | 指定渐变的起止颜色,由颜色值、停止位置(可选,使用百分比指定)组成。 |
单位可以用百分比或像素值
示例:
运行结果:
18、transform
transform
属性有很多函数,可以对元素进行调整大小、移动、旋转、翻转等操作
值 | 描述 |
---|---|
none | 定义不进行转换。 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate(x,y) | 定义 2D 转换。 |
translate3d(x,y,z) | 定义 3D 转换。 |
translateX(x) | 定义转换,只是用 X 轴的值。 |
translateY(y) | 定义转换,只是用 Y 轴的值。 |
translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 |
scale(x[,y]?) | 定义 2D 缩放转换。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
perspective(n) | 为 3D 转换元素定义透视视图。 |
(1)scale( )
可以定义 2D 缩放转换
示例:
p {
transform: scale(2);
}
div {
width:50px;
height: 50px;
tranform: scale(2, 3);
}
只写一个值表示同比例放大,两个值表示宽、高各自放大多少倍;
元素里的文字会跟着变化
图示:
使用伪类描述元素的指定状态时(如 :hover
),transform
属性可以方便的给元素添加交互
示例:
p:hover {
transform: scale(2.5);
// 表示当用户悬停段落元素时,段落大小缩放到原始大小 2.5 倍
}
(2)skewX()、skewY()
skewX() 能使选择的元素沿着 X 轴(横向)翻转指定的角度
值是度数,可以是正数也可以是负数
示例:
div {
width: 70%;
height: 100px;
margin: 50px auto;
background-color: blue;
transform: skew(28deg);
}
运行结果:
skewY()
能使指定元素沿 Y 轴(垂直方向)翻转指定角度
示例:
div {
width: 70%;
height: 100px;
margin: 50px auto;
background-color: orange;
transform: skewY(-15deg);
}
运行结果:
transform 属性的其他函数,可自己到编辑器里去测试
19、使用 CSS 创建一个图形
(1)巧用 box-shadow、border-radius 属性,创建新月图形
代码:
<style>
body {
background-color: black;
}
.newmoon {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0px 10px white;
}
</style>
<body>
<div class="newmoon"></div>
</body>
运行结果:
(2)使用 CSS 和 HTML 创建更复杂的形状
(2.1)先认识一下 ::before
和 ::after
伪类
::before
和 ::after
伪类用来在选择元素之前和之后添加一些内容;
这个属性通常用来给元素添加内容诸如图片或者文字;
::before
和 ::after
必须配合 content
来使用;
当 ::before
和 ::after
伪类用来添加某些形状而不是图片或文字时,content
属性仍然是必需的,但是它的值可以是空字符串。
示例:
使用::before
伪类元素给 .box 元素添加一个正方形
<style>
.box::before {
content: "";
background-color: blue;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
}
</style>
<body>
<div class="box"></div>
</body>
运行结果:
创建一个心形
代码:
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: " ";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class="heart"></div>
运行结果:
20、animation属性和@keyframes规则
它们一起使用可以给元素添加动画,animation
属性控制动画的外观,@keyframes
规则控制动画中各阶段的变化。
创建动画的原理:将一套 CSS 样式逐渐变化为另一套样式
语法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 | 说明 |
---|---|
animation-name | 指定要绑定到选择器的关键帧的名称 |
animation-duration | 动画指定需要多少秒或毫秒完成 |
animation-timing-function | 设置动画将如何完成一个周期 |
animation-delay | 设置动画在启动前的延迟间隔。 |
animation-iteration-count | 定义动画的播放次数。 |
animation-direction | 指定是否应该轮流反向播放动画。 |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 |
animation-play-state | 指定动画是否正在运行或已暂停。 |
initial | 设置属性为其默认值。 阅读关于 initial的介绍。 |
inherit | 从父元素继承属性。 阅读关于 initinherital的介绍。 |
animation共有8个属性,其中最常用的属性是 animation-name 和 animation-duration
(1)基本使用
示例:
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
/* 给选择的id为 rect 的元素添加animation属性 */
animation-name: rainbow;
animation-duration: 4s;
}
/* @keyframes要引用创建的动画名称 */
@keyframes rainbow {
/* 以百分比来规定改变的时间,或者通过关键词“from”和“to”,等价于 0% 和 100% */
0%{
background-color: blue;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}
</style>
<div id="rect"></div>
0%是动画以什么样子开头,100%就是动画怎么结束;
不是只有开始和结束的过渡可以设置,0% 到 100% 间的任意百分比都可以设置
。
(2)使用CSS动画在鼠标悬停时改变元素的样式
示例:
<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: button;
animation-duration: 500ms;
/* animation-fill-mode 指定了在动画结束时元素的样式 */
animation-fill-mode: forwards;
}
@keyframes button {
/* 可以只添加一个规则 */
100% {
background-color: #4791d3;
}
}
</style>
<button>注册</button>
(3)使用 CSS 动画创建运动
当元素的 position
被指定,如 fixed
或者 relative
时,
CSS 偏移属性 right
、left
、top
和 bottom
可以用在动画规则里创建动作
示例:
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
left: 0;
}
50% {
background-color: green;
top: 50px;
left: 100px;
}
100% {
background-color: yellow;
top: 0px;
left: -100px;
}
}
</style>
<div id="rect"></div>
(4)使元素渐隐
示例:
<style>
#ball {
width: 70px;
height: 70px;
margin: 50px auto;
position: fixed;
left: 20%;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: fade;
animation-duration: 6s;
animation-iteration-count: infinite;
}
@keyframes fade {
50% {
left: 60%;
opacity: 0.1;
}
}
</style>
<div id="ball"></div>
(5)制作一个持续跳动的球
这次要利用到 animation-iteration-count 属性,它可以控制动画循环的次数,它的值可以是数字(指定循环多少次) 或者 infinite(永久循环)
示例:
<style>
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
border: 1px solid #888;
background: linear-gradient(35deg,
#8800cc,
#ff00ff);
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
(6)制作无限跳动的心形
示例:
<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>
这个心跳动画的每一秒包含两个部分:
heart
元素(包括:before
和:after)
使用transform
属性改变其大小;- 背景
div
使用background
属性改变其颜色
(7)绘制星空(简易)
<style>
.stars {
background-color: white;
height: 10px;
width: 10px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
margin-top: 35%;
margin-left: 60%;
animation-name: twinkle-1;
/* 若是给 animation-duration 指定不同的动画时长,也可以让星星以不同频率闪烁 */
animation-duration: 1s;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-name: twinkle-2;
animation-duration: 1s;
}
.star-3 {
margin-top: 5%;
margin-left: 45%;
animation-name: twinkle-3;
animation-duration: 1s;
}
.star-4 {
margin-top: -60%;
margin-left: 10%;
animation-name: twinkle-4;
animation-duration: 1s;
}
/* 给星星不同的 @keyframes 规则,使小星星以不同的频率闪烁 */
@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}
@keyframes twinkle-2 {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
@keyframes twinkle-3 {
40% {
transform: scale(0.5);
opacity: 0.5;
}
}
@keyframes twinkle-4 {
80% {
transform: scale(0.5);
opacity: 0.5;
}
}
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
<div class="star-4 stars"></div>
cubic-bezier 贝塞尔曲线,它是 animation-timing-function 属性里的一个函数,可以更好的控制动画的速度曲线。
曲线的形状代表了动画的速度;
曲线在 1*1 的坐标系统内,曲线的 X 轴代表动画的时间间隔(类似于时间比例尺),Y 轴代表动画的改变;
cubic-bezier
函数包含了 1 * 1 网格里的4个点:p0
、p1
、p2
和 p3;
其中 p0
和 p3
是固定值,代表曲线的起始点和结束点,坐标值依次为 (0, 0) 和 (1, 1);
你只需设置另外两点的 x 值和 y 值,设置的这两点确定了曲线的形状从而确定了动画的速度曲线;
在 CSS 里面通过 (x1, y1, x2, y2)
来确定 p1
和 p2 两个点。
示例:
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
在这个例子中,
两个点的 x 和 y 值相等 (x1 = 0.25 = y1 和 x2 = 0.75 = y2) ,也就是动画速度呈线性,
效果和 linear
一致(匀速运动)。
长这样:
贝塞尔曲线是在 1*1 的坐标系统内 x 值只能在 0 到 1,但是 y 值可以是任意的
21、@media 媒体查询
媒体查询是 CSS3
中引入的一项新技术,它可以根据不同的可视窗口大小调整内容的布局
;
可视窗口
是用户在网页上的可见区域,根据访问网站的设备不同而不同;
媒体查询由媒体类型组成,如果媒体类型与展示网页的设备类型匹配,则应用对应的样式;
使用 @media
查询,你可以针对不同的媒体类型定义不同的样式;
@media
可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的;
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
语法:
@media mediatype and|not|only (media feature) {
/* CSS-Code; */
}
例子,当设备宽度小于或等于 100px 时返回内容:
@media (max-width: 100px) { /* CSS Rules */ }
例子,当设备高度大于或等于 350px 时返回内容:
@media (min-height: 350px) { /* CSS Rules */ }
只有当媒体类型与所使用的设备的类型匹配时,媒体查询中的 CSS 属性才生效
示例:
<style>
p {
font-size: 20px;
}
/* 在这行下面添加代码 */
@media (max-height: 800px){
p {
font-size: 14px;
}
}
</style>
<p>
CSS 指层叠样式表 (Cascading Style Sheets), 通过使用 CSS 我们可以大大提升网页开发的工作效率!
</p>
22、图片自适应
用 CSS 来让图片自适应
,只需要给图片添加这些属性:
img {
/* 确保图片不超出父容器的范围 */
max-width: 100%;
/* 保持图片的原始宽高比 */
height: auto;
}
示例:
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
img {
width: 600px;
}
</style>
<img class="responsive-img" src="https://atts.w3cschool.cn/rabbitgray1.jpg" alt="gray rabbit">
<img src="https://atts.w3cschool.cn/rabbitgray1.jpg" alt="gray rabbit">
23、使用视网膜图片
由于 视网膜
和 非视网膜
显示器之间的像素密度(PPI
或 DPI
) 不同,
某些 未考虑高分辨率显示器的图像 在 高分辨率显示器上渲染 时可能看起来像素化
;
使图像在高分辨率显示器(例如:MacBook Pro
的视网膜显示器
)
上正常显示的最简单方法是将其 width
和 height
值设置为原始文件的一半
示例:
<style>
img {
width: 300px;
height: 300px;
}
</style>
<img src="https://atts.w3cschool.cn/rabbit600x600.png" alt="gray rabbit">
24、排版自适应
除了使用 em
或 px
设置文本大小,还可以用 视窗单位 来做响应式排版;
视窗单位和百分比都是相对单位,但它们是基于不同的参照物;
视窗单位是相对于设备的视窗尺寸(宽度或高度),百分比是相对于父级元素的大小;
四个不同的视窗单位分别是:
vw
:如10vw
的意思是视窗宽度的 10%。vh:
如3vh
的意思是视窗高度的 3%。vmin:
如70vmin
的意思是视窗的高度和宽度中较小一个的 70%。vmax:
如100vmax
的意思是视窗的高度和宽度中较大一个的 100%。
例子, 设置 body 标签的宽度为视窗宽度的 40%:
body { width: 40vw; }
示例:
<style>
h2 {
/* h2 标签的 width 为视窗宽度的 85% */
width: 85vw;
}
p {
/* p 标签的 width 为视窗高度和宽度中较小值的 75% */
width: 75vmin;
}
</style>
<h2>十六进制颜色</h2>
<p>
所有浏览器都支持十六进制颜色值。
十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
举例说,#0000ff 值显示为蓝色,这是因为蓝色成分被设置为最高值(ff),而其他成分被设置为 0。
</p>