重温前端基础(一) HTML、CSS、H5C3

目录


0. WEB 标准构成

构成: 主要包括 结构(Structure)、表现(Presentation)和 行为(Behavior)三个方面。

标准说明
结构结构用于对网页元素进行整理和分类,主要指的是HTML
表现表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
行为行为是指网页模型的定义及交互的编写,主要指的是 Javascript

1. HTML

1.1 HTML概念

  • HTML :超文本标记语言 (Hyper Text Markup Language)。是用来描述网页的一种语言。
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

1.2 超文本含义

  1. 可以加入图片、声音、动画、多媒体等内容(因此可理解为超越文本限制);
  2. 不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本

1.3 页面语言

最常见的 2 个:

  1. en:定义语言为英语
  2. zh-CN:定义语言为中文
<!-- 指定该html标签 内容 所用的语言为中文 -->
<html lang="zh-CN">  

1.4 字符集

utf-8是目前最常用的字符集编码方式。

字符说明
GB2312简单中文,包括6763个汉字 国标(GB)
BIG5繁体中文,港澳台等用
GBK包含全部中文字符 —— 是GB2312的扩展,加入对繁体字的支持,兼容GB2312
UTF-8基本包含全世界所有国家需要用到的字符。

【示例】:

<meta charset="UTF-8" />

意思是让 html 文件以 UTF-8 编码保存, 浏览器根据编码去解码对应的html内容。

1.5 标签语义化

目的

  1. 方便代码的阅读和维护;
  2. 同时让浏览器或是爬虫可以很好地解析,从而更好分析其中的内容;
  3. 使用语义化标签会具有更好的搜索引擎优化。

根据标签的语义,在合适的地方给一个最为合理的标签,让结构更清晰。


1.6 常用标签

标签分类名称语法格式描述
排版标签标题标签 h<h5> 内容 </h5>作为标题使用,h1.h2…h5 依据重要性递减
排版标签段落标签 p<p> 内容 </p>把 HTML 文档分割为若干段落
排版标签水平线标签 hr<hr /> (单标签)创建横跨网页水平线
排版标签换行标签 br<br /> (单标签)强制换行
排版标签div 标签<div> 内容 </div>没有语义
排版标签span 标签<span>内容</span>没有语义
格式化标签字体加粗<b> </b>
<strong> </strong>
XHTML推荐使用 strong
格式化标签斜体标签<i></i>
<em></em>
XHTML推荐使用 em
格式化标签文字删除线<s> </s>
<del> </del>
XHTML推荐使用 del
图像标签img 标签<img src=“图像URL” /> (单标签)更多相关内容请看 1.7 节
链接标签a 标签<a> </a>更多相关内容请看 1.8 节

区别
<b></b> 只是加粗,<strong> </strong> 除了加粗还有 强调 的意思, 语义更强烈。

1.7 图像标签 img

语法格式:

<img src="图像URL" />

<img /> 标签属性

属性属性值描述
srcURL图像的路径
alt文本图像不能显示时的替换文本
title文本鼠标悬停时显示的内容
width像素 (XHTML不支持页面百分比%设置图像的宽度
height像素 (XHTML不支持页面百分比%设置图像的高度
border数值设置图像边框的宽度
属性之间不分先后顺序,标签名与属性、属性与属性之间均以 空格 分开。
采取键/值对的格式,如 key="value" 的格式  

【示例】:

<img src="cz.jpg" width="300" height="300" border="3" />
<img src="cz.jpg" width="300" height="300" border="3" title="内容" />
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />

1.8 链接标签

语法格式:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性作用
href用于指定链接目标的url地址必须属性),当给标签应用该href属性时,此标签就具有了超链接的功能
target用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开页面

1.9 锚点定位

作用: 通过创建锚点链接,用户能够快速定位到目标内容

创建锚点链接分为两步:

  1. 使用相应的id 标注跳转目标的位置。 (找目标)

    <h3 id="two">第2集</h3> 
    
  2. 使用<a href="#id名"> 链接文本</a>创建链接文本(被点击的)——拉关系( 我也有一个姓毕的姥爷)

    <a href="#two">
    

1.10 base 标签

语法:

<base target="_blank" />

总结:

  1. base 可以设置整体链接的打开状态
  2. base 写到 <head> </head> 之间
  3. 把所有的连接 都默认添加 target="_blank"

1.11 特殊字符

一些特殊的符号,在 html 里面很难或者不方便直接使用时,可用下面的替代代码。

特殊字符描述代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
人民币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方2(上标2)&sup2;
³立方3(上标3)&sup3;

🔔 : 第三列中的代码是以 运算符&开头,以分号运算符;结尾的。

1.12 XHTML

XHTML 是更严格更纯净的 HTML 代码。

  • XHTML 指 可扩展超文本标签语言(EXtensible HyperText Markup Language)。
  • XHTML 的目标是取代 HTML。
  • XHTML 与 HTML 4.01 几乎是相同的。
  • XHTML 是更严格更纯净的 HTML 版本。
  • XHTML 是作为一种 XML 应用被重新定义的 HTML。
  • XHTML 是一个 W3C 标准。

1.13 HTML和 XHTML之间的区别

  • XHTML 指的是可扩展超文本标记语言
  • XHTML 与 HTML 4.01 几乎是相同的
  • XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是以 XML 应用的方式定义的 HTML
  • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
  • XHTML 得到所有主流浏览器的支持
  • XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML,例如它要求标签必须小写,标签必须被正确关闭,标签顺序必须正确排列,对于属性都必须使用双引号等。

1.14 表格

创建表格的基本标签 tabletrtd,缺一不可。

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>
  1. table 标签:定义“表格”;
  2. tr 标签:定义“”,必须嵌套在<table> </table> 标签中;
  3. td 标签:定义“单元格”,必须嵌套在<tr> </tr>标签中。
    在这里插入图片描述

1.14.1 表格属性

表格有部分属性不常用,重点记住 cellspacingcellpadding

属性含义常用属性值
border设置表格的边框(默认border="0"无边框)像素值
cellspacing设置单元格与单元格边框之间的空白间距像素值(默认为2像素)
cellpadding设置单元格内容与单元格边框之间的空白间距像素值(默认为1像素)
width设置表格的宽度像素值
height设置表格的高度像素值
align设置表格在网页中的水平对齐方式leftcenterright

实际开发中,基本采用 3 参为 0border、cellpaddingcellspacing0
在这里插入图片描述

1.14.2 表头单元格标签 th

  • 作用
    一般表头单元格位于表格的第一行或第一列,并且文本加粗居中。
  • 语法
    只需用表头标签 <th></th> 替代相应的单元格标签 <td></td> 即可。

在这里插入图片描述
案例效果:
在这里插入图片描述
代码:

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
	<tr>  
		<th>姓名</th> 
		<th>性别</th>
		<th>电话</th>
	</tr>
	<tr>
		<td>小王</td>
		<td></td>
		<td>110</td>
	</tr>
	<tr>
		<td>小明</td>
		<td></td>
		<td>120</td>
	</tr>	
</table>

th也是单元格,只是和普通的td单元格不一样,它会让里面的文字 居中 + 加粗


1.14.3 表格标题- caption

定义和用法

<table>
   <caption>我是表格标题</caption>
</table>

🔔 注:

  1. caption 元素定义表格标题,标题会被居中且显示于表格之上。
  2. caption 标签 必须紧随 table 标签之后

1.14.4 合并单元格

  • 跨行合并:rowspan="合并单元格的个数"
  • 跨列合并:colspan="合并单元格的个数"

合并顺序:遵循 先上、后下、先左、后右 的顺序。
合并步骤

  1. 确定是跨行还是跨列合并;
  2. 找到目标单元格,写上 合并方式、要合并的单元格数量。如 :
    <td colspan="3"> </td>
    
  3. 删除多余的单元格 单元格

1.14.5 表格总结

标签名定义说明
<table></table>定义表格就是一个四方的盒子
<thead></thead>表格头部用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签!
<tr></tr>表格行标签行标签要再table标签内部才有意义
<tbody></tbody>定义表格主体放数据本体
<td></td>单元格标签单元格标签是个容器级元素,可以放任何东西
<th></th>表头单元格标签也是一个单元格,但是里面的文字会居中且加粗
<caption></caption>表格标题标签表格的标题,跟着表格一起走,和表格居中对齐
<tfoot></tfoot>表格脚注放表格的脚注之类
clospan 和 rowspan合并属性用来合并单元格

注: 一般稍微复杂的表格,都将表格分成三个部分:题头、正文和脚注。这三部分就分别用:theadtbodytfoot来标注。

1.15 列表

1.15.1 无序列表 ul

  1. <ul></ul>中只能嵌套<li></li>,不可直接在<ul></ul>标签中输入其他标签或者文字;
  2. <li></li>之间相当于一个容器,可以容纳所有元素;
  3. 无序列表会带有自己默认样式属性(去掉默认,用CSS美化)。

1.15.2 有序列表 ol

所有特性基本与ul一致。 但是实际中比 无序列表 更少用。

1.15.3 自定义列表

定义列表常用于对术语或名词进行解释和描述。基本语法如下:

<dl>
	<dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</dl>

应用场景举例:


在这里插入图片描述


在这里插入图片描述

1.15.4 列表总结

标签名定义说明
<ul> </ul>无序标签里面只能包含li,没有顺序,布局中最常用;
<ol> </ol>有序标签里面只能包含li,有顺序,使用情况较少;
<dl> </dl>自定义列表里面有2个兄弟, dtdd

1.16 表单标签

表单作用:收集用户信息。
完整的表单通常由表单控件提示信息表单域 3 个部分构成。

1.16.1 input 控件

  • <input />标签为单标签;
  • type属性设置不同的属性值用来指定不同的控件类型;
  • 除了type属性还有别的属性

语法:

<input type="属性值" value="你好">

input 常见属性

属性属性值描述
typetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像形式的提交按钮
file文件域
name由用户自定义控件的名称
value由用户自定义input 控件中的默认文本值
size正整数input 控件在页面中的显示宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入的最大字符数

radio 用法举例(多选一的场景):

<input type="radio" name="sex" value="" checked="checked" /><input type="radio" name="sex" value="" />

input 控件小结

属性说明作用
type表单类型用来指定不同的控件类型
value表单值表单里面默认显示的文本
name表单名称页面中的表单很多,name主要作用就是用于区别不同的表单。
checked默认选中表示那个单选或者复选按钮一开始就被选中了

1.17 lable 标签

作用

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

  1. 绑定元素
<!-- 方法一-->
<label> 用户名: <input type="radio" name="usename" value="请输入用户名">   </label>

<!-- 方法二-->
<label for="sex"></label>
<input type="radio" name="sex"  id="sex">

1.18 textarea控件(文本域)

语法】:

<textarea >
  文本内容
</textarea>

作用】:

  • 通过textarea控件可以轻松地创建多行文本输入框;
  • cols="每行中的字符数" rows="显示的行数" 实际开发不适用。

文本框和文本域的区别

表单名称区别默认值显示应用场景
input type=“text”文本框只能显示一行文本单标签,通过 value显示默认值用户名、昵称、密码等
textarea文本域可显示多行文本双标签,默认值写到标签中间留言板

1.19 select下拉列表

如果有多个选项让用户选择,为节约空间,使用select控件定义下拉列表。

语法】:

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>
  1. select> 中至少包含一对 option
  2. 在option 中定义selected =" selected "时,即为默认选中项。
    在这里插入图片描述

实际开发中较少使用(多数情况下第三方开发框架,有现成的组件)


1.20 form 表单域

form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

语法】:

<form action="url地址" method="提交方式" name="表单名称">
	各种表单控件
</form>

常见属性】:

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序url地址
methodget/post用于设置表单数据的提交方式,其取值为getpost
name名称用于指定表单的名称,以区分同一个页面中的多个表单。

后面 ajax 前后端交互里,就一定要用到 form表单域。

2. 层叠样式表(CSS)

2.1 书写位置

2.1.1 行内式(内联样式)

语法】:

<标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容 </标签名>

示例】:

<div style="color:red;font-size:12px;">青春不常在,抓紧谈恋爱</div>

任何HTML标签都拥有style属性,可用来设置 行内式

缺点:只能控制当前的标签、以及嵌套在其中的子标签,造成代码冗余。没有实现样式和结构相分离。


2.1.2 内嵌式(内部样式)

CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义。

语法】:

<head>
	<style type="text/CSS">
	    选择器(选择的标签) { 
	      属性1: 属性值1;
	      属性2: 属性值2; 
	    }
	</style>
</head>

示例】:

<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>

🔔 注意

  • style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
  • type="text/css"html5 中可以 省略
  • 只能控制当前的页面

2.1.3 外链式(外部样式表)

一个或多个以.CSS为扩展名的外部样式表文件,通过link标签将外部样式表文件链接到HTML文档中。

语法】:

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径" />
</head>
属性作用
rel定义当前文档与被链接文档之间的关系,需要指定为“stylesheet”,表示链接是样式表文件。
type定义所链接文档的类型,需要指定为“text/CSS”,表示链接的是CSS样式表。可省略不写
href定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

注: link单标签 - link标签需要放在head头部标签中,并且指定link标签的三个属性


2.2 css 选择器

2.2.1 基础选择器

  1. 标签选择器

    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
    

    把某一类标签全部选择出来,缺点是不能差异化设置。

  2. 类选择器

    <p class='类名'></p>
    
    .类名  { 属性1:属性值1;属性2:属性值2;属性3:属性值3; }
    
  3. id选择器

    <p id="id名"></p>
    
    #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    

    元素id值唯一,只对应于文档中某一具体元素。经常和javascript 搭配使用。

  4. 通配符选择器
    示例:

    * {
      margin: 0;                    /* 定义外边距*/
      padding: 0;                   /* 定义内边距*/
    }
    

注: 会匹配页面所有的元素,降低页面响应速度,不建议随便使用

基础选择器一览】:

选择器作用缺点使用情况用法
标签选择器选出所有相同的标签不能差异化选择较多p { color:red;}
类选择器可以选出一个或多个标签可以根据需求选择非常多.nav { color: red; }
id选择器一次只能选择器1个标签只能使用一次不推荐#nav {color: red;}
通配符选择器选择所有的标签选择的太多,有部分不需要不推荐* {color: red;}

2.2.2 复合选择器

  1. 后代选择器
    后代选择器又称为包含选择器,用来选择元素或元素组的子孙后代

    【语法示例】

    .class h3{color:red;font-size:16px;}
    
  2. 子元素选择器
    【语法示例】

    .class>h3{color:red;font-size:14px;}
    
  3. 交集选择器
    由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
    在这里插入图片描述
    【语法示例】

    p.one {color:red}
    

    表示选择的是: 类名为 .one 的 段落标签(p)。

  4. 并集选择器
    是各个选择器通过逗号(,)连接,通常用于集体声明。
    在这里插入图片描述
    任何形式的选择器(包括标签选择器、class类选择器、id选择器等),都可以作为并集选择器的一部分。

    【语法示例】

    .one, p, #test{color: #F00;} 
    
  5. 链接伪类选择器
    用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。

    a:link      /* 未访问的链接 */
    a:visited   /* 已访问的链接 */
    a:hover     /* 鼠标移动到链接上 */
    a:active    /* 选定的链接 */
    

    写的时候,它们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。

    工作开发中,很少写全四个状态,一般写法如下:

    a {   /* a是标签选择器  所有的链接 */
    	font-weight: 700;
    	font-size: 16px;
    	color: gray;
    }
    a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    	color: red; /*  鼠标经过的时候,由原来的 灰色 变成了红色 */
    }
    

2.3 font字体

  1. 大小

    p {font-size:20px;}
    
  2. 字体

    p{ font-family:"微软雅黑";}
    

    中文字体名称,在文件编码(GB2312UTF-8 等)不匹配时会产生乱码的错误。

    解决方法】:
    (一)、用英文字体名称替代:font-family:"Microsoft Yahei"

    (二)、使用Unicode字体:使用 Unicode 写中文字体名称,浏览器可正确解析。如下所示:

    font-family: "\5FAE\8F6F\96C5\9ED1";   表示设置字体为“微软雅黑”。
    

    更多编码请参阅:《中文字体名称对照表(unicode码)及20个web安全字体》,=> 点击前往

    注: 如果字体名中包含空格#$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";


  1. 字体粗细

    • HTML 字体加粗:<b></b>、<strong></strong>
    • css中的字体加粗(没有语义):
    属性值描述
    normal默认值(不加粗)
    bold定义粗体(加粗)
    0-900400 <=> normal,700 <=> bold

  1. 字体风格(倾斜)

    1) HTML :通过<i><em>标签;
    2) CSS:font-style:italic;

    属性作用
    normal默认值,浏览器会显示标准的字体样式 font-style: normal;
    italic浏览器会显示斜体的字体样式。
  2. font 综合设置字体样式
    【语法】:

    选择器{font:font-style font-weight font-size/line-height font-family;}
    

    🔔 注意

    • 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
    • 其中不需要设置的属性可以省略(取默认值),但必须保留font-sizefont-family属性,否则font属性不起作用。

2.4 CSS外观属性

2.4.1 color:文本颜色

表示方法属性值
预定义的颜色值red,green,blue,…pink
十六进制#FF0000,#FF6600,#29D794
RGBrgb(255,0,0)或rgb(100%,0%,0%)

2.4.2 text-align:文本水平对齐方式

text-align属性用于设置文本内容的 水平对齐 ,相当于html中的align对齐属性。

属性描述
left左对齐(默认值)
right右对齐
center居中对齐

2.4.3 line-height:行间距

用于设置行间距,即字符的垂直间距(行高)。

常用属性值单位:像素(px)、相对值(em)、百分比(%)。

2.4.4 text-indent:首行缩进

用于设置首行文本的缩进,建议使用em作为设置单位(1em 就是一个字的宽度 如果是汉字段落, 1em 就是 1个汉字的宽度)。

示例:

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

2.4.5 text-decoration 文本的装饰

text-decoration 通常用于给链接修改装饰效果。

描述
none默认。定义标准的文本。 取消下划线(最常用)
underline定义文本下的一条线。下划线 也是我们链接自带的(常用)
overline定义文本上的一条线。(一般不用)
line-through定义穿过文本下的一条线。(不常用)

2.4.6 css外观属性总览

属性表示注意点
color颜色常用 十六进制 比如 而且是简写形式 #fff
line-height行高控制行与行之间的距离
text-align水平对齐设定文字水平的对齐方式
text-indent首行缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration文本修饰记住 添加 下划线 underline 取消下划线 none

2.5 标签显示模式(display)

设置标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个。

HTML标签一般分为块标签行内标签两种,也称块元素行内元素

2.5.1 块级元素

常见的块元素有<h1>~<h6><p><div><ul><ol><li>等,其中<div>是最典型的块元素。

  • 独占一行;
  • 高度、宽度、外边距、内边距都可控制;
  • 宽度默认是容器(父级宽度)的100%;
  • 是一个容器及盒子,里面可以放行内或者块级元素(p标签和h标签除外,它们是文字类块元素)。

2.5.2 行内元素 (inline-level)

常见的行内元素有<a><strong><b><em><i><del><s><ins><u><span>等,其中<span>是最典型的行内元素。有的地方也成内联元素

(1)相邻行内元素在一行上,一行可以显示多个。
(2)高、宽直接设置是无效的。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素

2.5.3 行内块元素(inline-block)

行内元素中有几个特殊的标签——<img /><input /><td>,可以对它们设置宽高和对齐属性。

(1)和相邻的行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个;
(2)默认宽度是其本身内容的宽度;
(3)高度、行高、外边距以及内边距均可控制。

2.5.4 三种模式的区别

显示模式排列设置样式默认宽度容纳
块级元素1行只能放1个块级元素宽、高容器的100%容器级可以包含任何标签
行内元素1行可放多个行内元素不可直接设置宽/高它本身内容的宽度文本或其它行内元素
行内块1行放多个行内块元素可设置宽、高它本身内容的宽度

2.5.5 标签显示模式转换 display

  • 块转行内:display:inline;
  • 行内转块:display:block;
  • 块、行内元素转换为行内块: display: inline-block;

2.6 行高(line-height)

实现单行文字垂直居中(文字行高=盒子高度时)
在这里插入图片描述
行高和高度的三种关系**

  • 如果 行高 等 高度 文字会 垂直居中
  • 如果行高 大于 高度 文字会 偏下
  • 如果行高小于高度 文字会 偏上

2.7 CSS 背景(background)

通过css背景属性,给页面元素添加背景样式 - 能设置不同的背景图片位置。

2.7.1 背景颜色(color)

语法】:

/* 默认的值是 transparent  透明的 */
background-color:颜色值;

2.7.2 背景图片(image)

语法】:

background-image : none | url (url) 
参数作用
none无背景图(默认)
url使用绝对相对地址指定背景图像

示例:

background-image : url(images/demo.png);

2.7.3 背景平铺(repeat)

语法】:

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数】:

参数作用
repeat背景图像在纵向和横向上平铺(默认的)
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向平铺

2.7.4 背景位置(position)

语法】:

background-position : length || length

background-position : position || position 

参数】:

参数
length百分数 | 由浮点数字和单位标识符组成的长度值
positiontop | center | bottom | left | center | right 等方位名词

注意:

  • 必须先指定background-image属性
  • position 后面是x坐标和y坐标。 可以使用方位名词 或者 精确单位。
  • 如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left toptop left效果一致;
  • 如果只指定了一个方位名词,另一个值默认居中对齐。
  • 如果position 后面是精确坐标, 那么第一个肯定是 x ,第二的一定是y
  • 如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中;
  • 如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标。

2.7.5 背景附着

背景附着就是解释背景是滚动的还是固定的

语法】:

background-attachment : scroll | fixed 

参数】:

参数作用
scroll背景图像是随对象内容滚动
fixed背景图像固定

2.7.6 背景简写

background属性值的书写顺序官方并没有强制标准的。为了可读性,建议如下写:

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

语法】示例:

background:transparent url(image.jpg) repeat-y scroll center top;

2.7.7 背景透明(CSS3)

gba() 函数使用 红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

RGBA 即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)。

低于 IE 9 的版本不支持。

语法】:

background: rgba(0, 0, 0, 0.3);

参数 alpha 透明度,取值范围 0~1之间(1为完全不透明);
R、G、B取值范围:0~2550~100%

🔔: 背景半透明指盒子背景半透明, 盒子里的内容不受影响。

2.8 CSS 三大特性

  • 层叠性
  • 继承性
  • 优先级

2.8.1 层叠性

层叠性是指多种CSS样式的叠加,是浏览器处理冲突的一个能力。

如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉,如图:
在这里插入图片描述

2.8.2 继承性

子标签会继承父标签的某些样式,如文本颜色和字号。 想要设置一个可继承的属性,只需将它应用于父元素即可。
在这里插入图片描述

2.8.3 优先级

定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,

  • 选择器相同,则执行层叠性
  • 选择器不同,就会出现优先级的问题。
  1. 权重计算公式
    关于CSS权重,有一套计算公式,这个就是 CSS Specificity(特殊性)

    签选择器计算权重公式
    继承或者 *0,0,0,0
    元素(标签选择器)0,0,0,1
    类、伪类0,0,1,0
    id0,1,0,0
    行内样式 style=""1,0,0,0
    !important∞ 无穷大
  2. 权重叠加
    交集选择器、后代选择器等,是由多个基础选择器组合而成的,那么此时,就会出现权重叠加。

    就是一个简单的加法计算

    • div ul li ------> 0,0,0,3
    • .nav ul li ------> 0,0,1,2
    • a:hover -----—> 0,0,1,1
    • .nav a ------> 0,0,1,1

    : 数位之间没有进制。例如:

    0,0,0,5 + 0,0,0,5 = 0,0,0,10

    而不是

    0,0,0,5 + 0,0,0,5 = 0,0, 1, 0

    所以不会存在 10 div能赶上一个类选择器的情况。

  3. 继承的权重为 0
    这个不难,但是忽略很容易绕晕。修改样式时,一定要看该标签有没有被选中。
    1) 如果选中了,那么以上面的公式来计权重。谁大听谁的。
    2) 如果没有选中,那么权重是0,因为继承的权重为0.

2.9 盒子模型(Box Model)

所谓盒子模型,就是把HTML页面中的布局元素看作是一个矩形的盒子、容器。

2.10 盒子边框(border)

【语法】:

border : border-width || border-style || border-color 
属性作用
border-width定义边框粗细,单位 px
border-style边框样式
border-color边框颜色

border-style 边框样式参数:

参数描述
none没有边框(即忽略所有边框的宽度)(默认值)
solid边框为单实线(最为常用)
dashed边框为虚线
dotted边框为点线
  1. 边框综合设置

    border : border-width || border-style || border-color
    

    【语法示例】:

     border: 1px solid red;  /* 各参数之间没有顺序 */
    

  2. 表格的细线边框
    虽然通过cellspacing="0",可将单元格之间的距离设置为0, 但是,两个单元格之间的边框会出现重叠,从而使边框变粗。

    【解决边框重叠】:

    table { border-collapse:collapse; }  /* 合并相邻边框 */
    

2.11 内边距(padding)

边框内容 之间的距离。添加内边距会撑大盒子。

padding 的简写:

值的个数表达的意思
1个值padding:上下左右内边距
2个值padding:上下内边距    左右内边距
3个值padding:上内边距    左右内边距    下内边距;

在这里插入图片描述

如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。

2.12 外边距(margin)

margin属性设置外边距,控制盒子和盒子之间的距离

margin值的简写 (复合写法)跟 padding 完全相同。

2.12.1 块级盒子水平居中

让一个块级盒子实现水平居中必须:

  • 盒子必须指定了宽度(width);
  • 给左右的外边距都设置为auto

【示例代码】:

.header {
	width:960px;
	margin:0 auto;
}

2.12.2 文字居中和盒子居中区别

  1. 盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐;
  2. 块级盒子水平居中:左右margin 改为 auto 。如:
    /*  文字、行内元素、行内块元素水平居中 */
    text-align: center;
     
    /* 块级盒子水平居中:左右margin改为auto就阔以了 */
    margin: 10px auto;  
    

2.12.3 插入图片和背景图片的区别

  1. 插入图片:如产品展示类,移动位置只能靠盒模型 paddingmargin
  2. 背景图片:一般用于小图标背景,或者超大背景图片。背景图片只能通过background-position

示例代码】:

/* 插入图片 */
img {  
	width: 200px;/* 插入图片更改大小 width 和 height */
	height: 210px;
	margin-top: 30px;  /* 插入图片更改位置,可以用margin或padding盒模型 */
	margin-left: 50px; /* 插入图片也是一个盒子 */
}

/* 背景图片 */
div {
	width: 400px;
	height: 400px;
	border: 1px solid purple;
	background: #fff url(images/sun.jpg) no-repeat;
	/* 背景图片更改位置 用 background-position */
	background-position: 30px 50px;
}

2.12.4 外边距合并

使用margin定义块元素的垂直外边距时,可能会出现外边距的合并(也称外边距塌陷)。

  1. 相邻块元素垂直外边距的合并
    在这里插入图片描述
    解决方案】:尽量给只给一个盒子添加margin值。

  2. 嵌套块元素垂直外边距的合并(塌陷
    在这里插入图片描述
    解决方案】:

    1. 可以为父元素定义上边框;
    2. 可以为父元素定义上内边距;
    3. 可以为父元素添加overflow:hidden

    还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题。

2.13 盒子模型布局稳定性

内边距和外边距,什么情况下用内边距,什么情况下用外边距?

大部分情况下是可以混用的,如根据稳定性来分,建议如下:

优先使用宽度(width)=> 其次,使用内边距(padding)=> 再次,外边距(margin)。

 width >  padding  >   margin   

原因:

  • margin :会有外边距合并,还有 IE6下面margin加倍的bug,所以最后使用。
  • padding :会影响盒子大小,需要进行加减计算(麻烦),其次使用。
  • width :没有问题,较常使用宽度剩余法、高度剩余法来做。

2.14 CSS3部分新属性

2.14.1 圆角边框

如图:
在这里插入图片描述
语法】:

border-radius:length;  /* length 为数值或百分比 */ 

示例】:

/* 正方形变成一个圆 */
border-radius: 50%;

在这里插入图片描述

2.14.2 盒子阴影(CSS3)

如图:
在这里插入图片描述
语法】:

box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
描述
h-shadow必须。水平阴影的位置。允许负值
v-shadow必须。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的尺寸
color可选。阴影的颜色
inset可选。将外部阴影(outset)改为内部阴影

: 外阴影 (outset) 是默认的,但是不能写,想要内阴影可以写inset


语法示例】:

div {
	width: 200px;
	height: 200px;
	border: 10px solid red;
	/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
	/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色  内/外阴影; */
	box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);			
}

2.15 浮动(float)

2.15.1 CSS 布局的三种机制

CSS 提供了 3 种机制 来设置盒子的摆放位置,分别是普通流(标准流)、浮动定位

2.15.2 普通流

  • 块级元素:独占一行,从上向下顺序排列;
    常用元素:divhrph1~h6uloldlformtable

  • 行内元素:按照从左到右顺序排列,碰到父元素边缘则自动换行;
    常用元素:spanaiem

2.15.3 浮动

设置元素的浮动属性以使其脱离标准普通流的控制,并移动到指定位置。

语法】:

选择器 { float: 属性值; }

属性值:none(默认值,不浮动)、left(左浮动)、right(右浮动)。

特性

  1. 脱离标准流(俗称 “脱标” );
  2. 不占有原来位置;
  3. float属性会改变元素display属性
    在这里插入图片描述
    任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 生成的块级框和行内块极其相似(但是元素之间没有空白间隙)。

2.15.4 浮动(float)的应用

在这里插入图片描述
实际重要的导航栏中,不会直接用链接a ,而是用 li 包含链接(li+a)的做法。

  1. li+a 语义更清晰,一看就是有条理的列表型内容;
  2. 如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险),从而影响网站排名。

2.15.5 清除浮动

由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响。

准确地说,并不是清除浮动,而是 清除浮动后造成的影响

  1. 清除浮动的本质

    清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不再影响下面的标准流。

  2. 清除浮动的方法

选择器 {clear:属性值;}
属性值描述
left不允许左侧有浮动元素(清除左侧浮动的影响)
right不允许右侧有浮动元素(清除右侧浮动的影响)
both同时清除左右两侧浮动的影响

1) 额外标签法(隔墙法)

在浮动元素末尾添加一个空的标签,如下所示:

<div style=”clear:both”></div>

2)父级添加overflow属性方法

可以给父级添加:

div:{overflow:hidden | auto | scroll}

3)使用after伪元素清除浮动

.clearfix:after {
	content: ""; 
	display:block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}   

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

4)使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
	content:"";
	display:table; 
}
.clearfix:after {
	clear:both;
}
.clearfix {	*zoom:1;}     /* IE6、7 专有 */

2.15.6 清除浮动总结

清除浮动的方式优点缺点
额外标签法(隔墙法)通俗易懂,书写方便添加许多无意义的标签,结构化较差。
父级overflow:hidden;书写简单溢出隐藏
父级after伪元素结构语义化正确IE6-7不支持:after,有兼容性问题
父级双伪元素结构语义化正确IE6-7不支持:after,有兼容性问题

2.16 定位

定位也是用来布局的,由两部分组成:“定位模式” 和 “边偏移”。

定位改变display属性:一个行内的盒子,如果加了浮动固定定位绝对定位,不用转换为行内块,就可以给这个盒子直接设置宽度和高度等。

浮动元素、绝对定位(固定定位)的元素都不会触发外边距合并的问题。

2.16.1 边偏移

简单说,定位的盒子是通过 边偏移 来移动位置的。凡是有定位的地方必有边偏移.

在 CSS 中,通过 topbottomleftright 属性定义元素的边偏移

边偏移 需要和 定位模式 联合使用,单独使用无效

2.16.2 定位模式 (position)

语法】:

选择器 { position: 属性值; }

不同情况下,用不同的定位模式

定义
static默认。无定位或静态定位,没有边偏移,实际开发中基本不用
relative相对定位 。1)保留原位置;2)相对于原来在标准流中的位置来移动的
absolute绝对定位。1)不保留原位置;2)以带有定位的父级元素来移动位置。如果父级都没有定位,则以浏览器文档为准移动位置。
fixed固定定位

由于子元素不占据位置,所以使用绝对定位;由于父元素占据位置,为不影响后面元素正常显示,因此使用相对定位。

定位布局时,应用 z-index 层叠等级属性调整盒子的堆叠顺序时,只能应用于 相对定位

口诀
子绝父相 —— 子级绝对定位时,父级相对定位。


2.16.3 相对定位(relative)

相对定位:通过设置垂直或水平位置,相对于原来位置移动,元素设置此属性之后仍然处于文档流中,不影响其他元素的布局。

🔔 :在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

2.16.4 固定定位(fixed)

固定定位绝对定位 的一种特殊形式(IE6等低版本不支持固定定位)。

特点】:

  1. 完全脱标 —— 完全不占位置;
  2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;

使用固定和绝对定位时,如果盒子中没有内容,需要指定宽度。

2.16.5 绝对定位(absolute)

absolute:元素会脱离文档流,如果设置偏移量,会影响其他元素的位置定位。

  1. 绝对定位的盒子居中
    不能通过设置 margin: auto 设置水平居中

    使用绝对定位时要想实现水平居中,按照下图所示方法:
    在这里插入图片描述
    1)left: 50%;:让盒子的左侧移动到父级元素的水平中心位置
    2)margin-left: -100px;:让盒子向左移动自身宽度的一半

父元素设置了相对定位绝对定位,元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位


2.17 CSS 高级技巧

2.17.1 元素的显示与隐藏

  1. display :设置或检索对象是否、及如何显示。

    div: {display: none;} /* 隐藏对象 */
    
    /* 除了转换为块级元素之外,同时还有显示元素的意思。 */
    div: {display: block;}
    

    特点: 隐藏之后,不再保留位置。
    应用场景:配合 js 做特效,比如下拉菜单,应用极为广泛。

  2. visibility可见性(使用较少)
    设置或检索是否显示对象。

    div: {visibility:visible;} /* 对象可视  */
    
    div: {visibility:hidden;}  /* 对象隐藏 */
    

    特点: 隐藏之后,继续保留原有位置。

  3. overflow 溢出
    检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

    div: {overflow:属性值}
    
    属性值描述
    visible不剪切内容也不添加滚动条
    hidden不显示超过对象尺寸的内容,超出的部分隐藏掉
    scroll不管内容超出与否,总是显示滚动条
    auto超出自动显示滚动条,不超出不显示滚动条

2.17.2 CSS用户界面样式

界面样式, 更改一些用户操作样式(鼠标样式、表单轮廓、防止表单域拖拽等),以便提供更好的用户体验。

  1. 鼠标样式cursor

    描述
    default小白 默认
    pointer小手
    move移动
    text文本
    not-allowed禁止
    img: {cursor:pointer}
    

  1. 轮廓线 outline
    如 input 文本框边缘的外围,可起到突出元素的作用。 在这里插入图片描述
     outline : outline-color ||outline-style || outline-width
    
    一般不会关心设置多少,平时都是去掉的,直接outline: 0;或者outline: none;
    <input type="text" style="outline: 0;" />
    

  2. 防止拖拽文本域resize
    <textarea  style="resize: none;"></textarea>
    

在这里插入图片描述

2.17.3 vertical-align 垂直对齐

【回顾】:

  • 有宽度的块级元素居中对齐:margin: 0 auto;
  • 文字居中对齐:text-align: center;

vertical-align 垂直对齐,只针对于行内元素或者行内块元素

vertical-align : baseline | top | middle | bottom 

🔔 :通常用来控制 图片/表单文字 的对齐。
通过vertical-align 控制图片和文字的垂直关系。默认的图片会和文字基线对齐.

  1. 图片、表单和文字对齐
    (默认:图片与文字成基线对齐。)

    模式常用属性值
    基线对齐vertical-align: baseline;
    垂直居中vertical-align: middle;
    顶部对齐vertical-align: top;

  1. 去除图片底侧空白缝隙
    在这里插入图片描述
    原因】:图片或表单等行内块元素,它的底线会和父级盒子的基线对齐。

    解决】:

    方法一:让图片不要和基线对齐。

    img{vertical-align:middle} /* 或 top 或 bottom */
    

    方法二:转换为块级元素

     img {display:block;}
    

2.17.4 溢出文字省略号显示

  1. white-space
    设置如何处理元素中的空白(或对象内文本显示方式),通常用来强制一行显示内容。

    p {white-space:nowrap;}
    
  2. text-overflow 文字溢出
    设置是否使用省略标记(…)标示对象内文本的溢出。

    /* 不显示省略标记(...),而是简单的裁切 */
    div {text-overflow : clip;}
    
    /* 当对象内文本溢出时显示省略标记(...)*/
    div {text-overflow:ellipsis;} 
    

    注: 一定要先white-space强制一行内显示,和overflow搭配使用。

溢出文字省略号显示 三部曲

/*1. 先强制一行内显示文本*/
white-space: nowrap;
 /*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;

2.18 切图插件Cutterman

Cutterman 是一款运行在 photoshop 中的插件,能够自动将你需要的图层进行输出。

官网:http://www.cutterman.cn/zh/cutterman

在这里插入图片描述

注: cutterman 插件 要求 photoshop 必须是完整版,不能是绿色版。


2.19 CSS 精灵(雪碧)技术(sprite)

为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需精灵图中不同位置的某个小图。

这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来


需要使用到的CSS:

  • background-image;
  • background-repeat
  • background-position属性进行背景定位,

其中最关键的是使用background-position属性精确地定位。

  1. 精灵技术使用的核心

    首先,css精灵技术主要针对于背景图片,插入的图片img不需要。

    其次,需要精确测量每个小背景图片的 大小位置。给盒子指定小背景图片时, 背景定位基本都是 负值

  2. 制作精灵图
    把小图拼合成一张大图。大多数情况下,精灵图都由网页美工做。

小公司,或背景图片使用很少的情况,没必要使用精灵技术,维护成本太高。 如果背景图片较多,建议使用精灵技术。


2.20 滑动门

为使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。

它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。

常见用于导航栏,如微信官网 http://weixin.qq.com/

【核心技术】:利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局如下所示:

效果展示:

在这里插入图片描述

  1. html结构
    <li>
    	  <a href="#">
    	    <span>导航栏内容</span>
    	  </a>
    	</li>
    
  2. CSS样式
    * {
    	padding:0;
    	margin:0;	
       }
       
    body{
          background: url(images/wx.jpg) repeat-x;
       }
       
    .father {
          padding-top:20px;
       }
       
    li {
    	padding-left: 16px;
    	height: 33px;
    	float: left;
    	line-height: 33px;
    	margin:0  10px;
    	background: url(./images/to.png) no-repeat left ;
        }
        
    a {
    	padding-right: 16px;
    	height: 33px;
    	display: inline-block;
    	color:#fff;
    	background: url(./images/to.png) no-repeat right ;
    	text-decoration: none;
        }
    li:hover,
    li:hover a {
    	background-image:url(./images/ao.png);
    	}
    
    代码中涉及的素材图片存放在网盘 [下载]

2.21 margin负值之美

  1. 负边距+定位:水平垂直居中
    前面讲过,一个绝对定位的盒子,利用父盒子的 50%,然后往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。

    div {
    	/*这样,浮动的盒子就是紧贴在一起的*/
    	float: left;
    	width: 200px;
    	height: 300px;
    	border: 1px solid #ccc;
    	margin-left: -1px;
    	margin-top: -1px;
    }
    
  2. 压住盒子相邻边框

    效果
    在这里插入图片描述
    示例代码:

    div {
    	position: relative;
    	/*浮动的盒子是紧贴在一起的*/
    	float: left;
    	width: 200px;
    	height: 300px;
    	border: 1px solid #ccc;
    	margin-left: -1px;
    	margin-top: -1px;
    }
    
    /*鼠标经过div  */
    div:hover {
    	/*让当前鼠标经过的这个div 升到最高处*/
    	/*定位的盒子是最高层的  */
    	border: 1px solid #f40;
    	/*都是定位的盒子,通过z-index 来实现层级关系*/
    	z-index: 1;
    }
    

2.22 CSS三角形之美

在这里插入图片描述
核心是用css边框模拟三角效果,做法如下:

  1. 宽度、高度为0;
  2. 4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明;
  3. 为了照顾兼容性,低版本的浏览器,加上 font-size: 0; line-height: 0;

CSS样式代码:

div {
 	width: 0; 
    height: 0;
    line-height:0;
    font-size: 0;
	border-top: 10px solid red;
	border-right: 10px solid green;
	border-bottom: 10px solid blue;
	border-left: 10px solid #000; 
 }


3 HTML5

HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML

3.1 HTML5 的概念

两个概念:

  • 是一个新版本的 HTML 语言,定义了新的标签、特性和属性;
  • 拥有一个强大的技术集,这些技术集是指: HTML5CSS3javascript, 这也是广义上的 HTML5

3.2 HTML5 新增标签

新增语义化标签:

标签名称描述
header头部标签
nav导航标签
article内容标签
section块级标签
aside侧边栏标签
footer尾部标签

如图所示:
在这里插入图片描述
🔔 注:

  • 语义化标签主要针对搜索引擎;
  • 新标签可以使用一次或者多次;
  • IE9 浏览器中,需要把语义化标签转换块级元素
  • 语义化标签,在移动端支持比较友好。

3.3 多媒体标签

  • 音频 – audio
  • 视频 – video

3.3.1 音频标签 - audio

  1. audio目前支持的 3 种格式

    格式IE9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
    Ogg Vorbis
    MP3
    Wav
  2. audio的参数

    属性描述
    autoplayautoplay音频在就绪后马上播放
    controlscontrols向用户显示控件,比如播放按钮。
    looploop每当音频结束时,重新开始播放
    srcurl要播放音频的URL地址
  3. audio代码演示:

    <body>
      <!-- 注:在 chrome 浏览器中被禁用了 autoplay 属性 -->	
      <!-- 因为不同浏览器支持不同的格式,一般采取给同一音频准备多个不同格式的文件 -->
    	<audio controls="controls">
            <source src="media/snow.mp3" type="audio/mpeg" />
            <source src="media/snow.ogg" type="audio/ogg" />
            您的浏览器不支持播放声音
    	</audio>
    </body>
    

    在这里插入图片描述

3.3.2 视频标签 - video

  1. video支持的三种格式

    格式IEFirefoxOperaChrome 3.0Safari 3.0
    OggNo3.5+10.5+5.0+No
    MPEG 49.0+NoNo5.0+3.0+
    WebMNo4.0+10.6+6.0+No
  2. video语法格式

    <video src="./media/video.mp4" controls="controls"></video>
    
  3. video 参数

    属性描述
    autoplayautoplay视频就绪自动播放(Chrome需添加muted来解决)
    controlscontrols向用户显示播放控件
    widthpixels(像素)设置播放器宽度
    heightpixels(像素)设置播放器高度
    looploop播放完是否继续播放该视频 (循环播放)
    preloadauto(预加载视频)
    none(不预加载)
    规定是否预加载视频,如果设置了autoplay就忽视此属性
    srcurl视频url地址
    posterimgurl加载等待时画面图片
    mutedmuted静音播放
  4. 代码演示

    <body>
        <!-- 谷歌浏览器禁用了自动播放功能,解决方案:给视频添加静音属性 -->
        <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
            <source src="media/video.mp4" type="video/mp4" />
            <source src="media/video.ogg" type="video/ogg" />
            您的浏览器太low了,不支持播放此视频
        </video>
    </body>
    

3.3.3 多媒体标签总结

  • 音频标签与视频标签使用基本一致;
  • 多媒体标签在不同浏览器下情况不同,存在兼容性问题;
  • 谷歌浏览器禁用了音频和视频标签的自动播放功能;
  • 谷歌浏览器中视频添加 muted 标签可以实现自动播放;

3.4 input 标签新增属性

属性值说明
type="email"限制用户输入必须为 email 类型
type="url"限制用户输入必须为URL类型
type="date"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="number"限制用户输入必须为数字类型
type="tel"手机号码
type="search"搜索框
type="color"生成一个颜色选择菜单

3.5 新增表单属性

属性说明
requiredrequired拥有该属性表示必填,内容不能为空
placeholder提示文本(点位符)表单的提示信息,存在默认值将不显示
autofocusautofocus自动获得焦点,页面加载完成时,自动定位到指定表单
autocompleteoff / on规定输入字段是否启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
multiplemultiple在打开的文件浏览器中,可多选文件并提交

3.6 CSS3属性选择器

目前还草案,不断改进中,移动端支持优于 PC 端。

3.6.1 属性选择器列表

选择符简介
E[att]选择具有 att 属性的 E 元素
E[att="val"]选择具有 att 属性且属性值等于 val 的 E 元素
E[att^="val"]匹配具有 att 属性、且值 val 开头 的 E 元素
E[att$="val"]匹配具有 att 属性、且值 val 结尾 的 E 元素
E[att*="val"]匹配具有 att 属性、且值中 含有 val 的 E 元素

3.6.2 属性选择器代码演示

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

3.7 结构伪类选择器

3.7.1 属性列表

选择符简介
E:first-child匹配父元素中的第一个子元素 E
E:last-child匹配父元素中最后一个 E 元素
E:nth-child(n)匹配父元素中的第n个子元素 E
E:first-of-type指定类型 E 的第一个
E:last-of-type指定类型 E 的最后一个
E:nth-of-type(n)指定类型 E 的第n

代码演示

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

3.7.2 nth-child 参数详解

  1. nth-child 详解

    • n可以是数字、关键字、公式;
    • n如果是数字,就是选中第几个;
    • 常见的关键字有 even 偶数、odd 奇数;
    • 常见的公式如下表(如果 n 是公式,则从0开始计算);
    • 但是第0个元素或者超出了元素的个数会被忽略;

  2. n 公式

    取值
    2n偶数
    2n+1奇数
    5n5   10  15 …
    n+5从第5个开始(包含第5个)到最后
    -n+55个(包含第5个)…
  3. 代码演示

 /* 偶数 */
ul li:nth-child(even) {
	background-color: aquamarine;
}
   
/* 奇数 */
ul li:nth-child(odd) {
	background-color: blueviolet;
}
   
/*  n 是公式,从 0 开始计算  */
ul li:nth-child(n) {
	background-color: lightcoral;
}
   
/* 偶数 */
ul li:nth-child(2n) {
	background-color: lightskyblue;
}
   
/* 奇数 */
ul li:nth-child(2n + 1) {
	background-color: lightsalmon;
}
   
/*  选择第 0 5 10 15, 应该怎么选  */
ul li:nth-child(5n) {
	background-color: orangered;
}
   
/*  n + 5 就是从第5个开始往后选择  */
ul li:nth-child(n + 5) {
	background-color: peru;
}
   
/*  -n + 5 前五个  */
ul li:nth-child(-n + 5) {
	background-color: tan;
}

3.7.3 nth-childnt-of-type 的区别

  1. 区别

    • nth-child(n) 选择父元素里面的第几个子元素,不管里面的子元素是否同一类型;
    • nt-of-type 选择指定类型的元素
  2. 代码演示

    div :nth-child(1) {
    	background-color: lightblue;
    }
       
    div :nth-child(2) {
    	background-color: lightpink;
    }
       
    div span:nth-of-type(2) {
    	background-color: lightseagreen;
    }
       
    div span:nth-of-type(3) {
    	background-color: #fff;
    }
    

3.8 伪元素选择器

3.8.1 伪类选择器

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

代码演示

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

3.8.2 伪类选择器注意事项

  • beforeafter 必须有 content 属性;
  • before 在内容前面,after 在内容后面;
  • beforeafter 创建的是一个元素(属于行内元素);
  • 创建出来的元素在 Dom 中查找不到,所以称为伪元素;
  • 权重:伪元素和标签选择器一样,权重为 1。

3.8.3 伪元素案例 - 添加字体图标

p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

3.9 2D 转换之 translate

3.9.1 2D转换

  • 2D 转换:改变标签在二维平面上的位置和形状
  • 移动: translate
  • 旋转: rotate
  • 缩放: scale

3.9.2 translate 语法

  • xx 轴上水平移动;
  • yy 轴上水平移动。
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

3.9.3 重点知识点

  • 2D 的移动主要指 水平垂直方向上的移动;
  • translate 最大的优点:是不影响其他元素的位置;
  • translate 中的100%单位,是相对于本身的宽度和高度来进行计算的;
  • 行内标签没有效果。

3.9.4 代码演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  transform: translate(100px, 100px);

  /* 水平移动 100px */
  transform: translate(100px, 0)

  /* 垂直移动 100px */
  transform: translate(0, 100px) 

  /* 水平移动 100px */
  transform: translateX(100px); 

  /* 垂直移动 100px */
  transform: translateY(100px)
}

3.10 实例 - 让盒子实现水平垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. tranlate里面的参数可以用 % */
            /* 2. 如果里面的参数是%,移动的距离是盒子自身的宽度或者高度来对比的 */
            /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
            /* transform: translateX(50%); */
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
            transform: translate(-50%, -50%);
        }
        
        span {
            /* translate 对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

</html>

3.11 2D 转换 rotate

rotate 旋转:2D 旋转指让元素在二维平面内顺时针或者逆时针旋转

  1. 使用步骤

    1. 给元素添加转换属性 transform
    2. 属性值为 rotate(角度)
  2. 语法示例

    div{
    	/* 顺时针方向旋转 30度 */
    	transform: rotate(30deg);
    }
    
  3. 知识点

    • rotate 里面跟角度的度数,单位 deg
    • 角度为正时,顺时针,角度为负时,逆时针;
    • 默认旋转中心点:元素的中心点。
  4. 案例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            img {
                width: 150px;
                /* 顺时针旋转45度 */
                /* transform: rotate(45deg); */
                border-radius: 50%;
                border: 5px solid pink;
                /* 过渡写到本身上,谁做动画给谁加 */
                transition: all 0.3s;
            }
            
            img:hover {
                transform: rotate(360deg);
            }
        </style>
    </head>
    
    <body>
        <img src="media/pic.jpg" alt="">
    </body>
    
    </html>
    

    本案例效果图示如下:
    在这里插入图片描述

3.12 案例 - CSS制作下拉框三角符号

案例效果
在这里插入图片描述
案例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        
        /* 鼠标经过div  里面的三角旋转 */
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

3.13 设置元素旋转中心点(transform-origin)

  1. transform-origin 基础语法

    transform-origin: x y;
    
  2. 重要知识点

    • 注意后面的参数 xy空格 进行分隔
    • xy 默认旋转的中心点是元素的中心 (50% 50%),等价于 center center
    • 可以给 xy 设置像素或者方位名词(topbottomleftrightcenter)。
  3. 旋转中心案例 在这里插入图片描述
    【案例源码】:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                overflow: hidden;
                width: 200px;
                height: 200px;
                border: 1px solid pink;
                margin: 10px;
                float: left;
            }
            
            div::before {
                content: "pink";
                display: block;
                width: 100%;
                height: 100%;
                background-color: hotpink;
                transform: rotate(180deg);
                transform-origin: left bottom;
                transition: all 0.4s;
            }
            
            /* 鼠标经过div 里面的before 复原 */	        
            div:hover::before {
                transform: rotate(0deg);
            }
        </style>
    </head>
    
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
    

3.14 2D 转换之 scale

scale 的作用:控制元素的 放大缩小

  1. 语法

    transform: scale(x, y)
    
  2. 知识要点

    • 注意,x 与 y 之间使用 逗号 进行 分隔
    • transform: scale(1, 1): 宽高都放大一倍,相当于没有放大;
    • transform: scale(2, 2): 宽和高都放大 2 倍;
    • transform: scale(2): 如果只写了一个参数,第二个参数就和第一个参数一致;
    • transform:scale(0.5, 0.5): 缩小;
    • scale 最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子。
  3. 示例代码

    div:hover {
    	/* 注意:数字是倍数的含义,所以不要加单位 */
    	transform: scale(2, 2)
       
    	/* 实现等比缩放,同时修改宽与高 */
    	transform: scale(2)
       
    	/* 小于 1 就等于缩放*/
    	transform: scale(0.5, 0.5)
    }
    
  4. 案例 - 图片放大

    【案例效果】:
    在这里插入图片描述

    【案例代码】:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                overflow: hidden;
                float: left;
                margin: 10px;
            }
            
            div img {
                transition: all .4s;
            }
            
            div img:hover {
                transform: scale(1.1);
            }
        </style>
    </head>
    
    <body>
        <div>
            <a href="#"><img src="media/scale.jpg" alt=""></a>
        </div>
        <div>
            <a href="#"><img src="media/scale.jpg" alt=""></a>
        </div>
        <div>
            <a href="#"><img src="media/scale.jpg" alt=""></a>
        </div>
    </body>
    
    </html>
    
  5. 案例 - 分页按钮

    【案例效果】:
    在这里插入图片描述
    【案例代码】:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            li {
                float: left;
                width: 30px;
                height: 30px;
                border: 1px solid pink;
                margin: 10px;
                text-align: center;
                line-height: 30px;
                list-style: none;
                border-radius: 50%;
                cursor: pointer;
                transition: all .4s;
            }
            
            li:hover {
                transform: scale(1.2);
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>
    
    </html>
    

3.15 2D 转换综合写法以及顺序问题

  1. 知识要点

    • 同时使用多个转换,其格式为 transform: translate() rotate() scale()
    • 顺序会影响到转换的效果(如果先旋转会改变坐标轴方向)
    • 在同时有位置或者其他属性时,应要将位移放到最前面。
  2. 代码示例

    div:hover {
    	transform: translate(200px, 0) rotate(360deg) scale(1.2)
    }
    

3.16 动画(animation)

  1. 动画的概念
    动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。

  2. 动画的基本使用

    • 先定义动画;
    • 在调用定义好的动画。

  3. 语法格式(定义动画)

    @keyframes 动画名称 {
        0% {
            width: 100px;
        }
        100% {
            width: 200px
        }
    }
    

  1. 语法格式(使用动画)
    div {
    	/* 调用动画 */
    	animation-name: 动画名称;
    	/* 持续时间 */
    	animation-duration: 持续时间;
    }
    

  1. 动画序列

    • 0% 是动画开始,100 % 是动画完成,这样的规则就是动画序列;
    • @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果;
    • 动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数;
    • 用百分比来规定变化发生的时间,或用 fromto,等同于 0%100%

  1. 示例代码
    <style>
        div {
          width: 100px;
          height: 100px;
          background-color: aquamarine;
          animation-name: move;
          animation-duration: 0.5s;
        }
    
        @keyframes move{
          0% {
            transform: translate(0px)
          }
          100% {
            transform: translate(500px, 0)
          }
        }
    </style>
    

  1. 案例 - 动画序列

    【案例代码】:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /* from to 等价于  0% 和  100% */
            /* @keyframes move {
                from {
                    transform: translate(0, 0);
                }
                to {
                    transform: translate(1000px, 0);
                }
            } */
            /* 动画序列 */
            /* 1. 可以做多个状态的变化 keyframe 关键帧 */
            /* 2. 里面的百分比要是整数 */
            /* 3. 里面的百分比就是 总的时间(本案例10s)的划分 25% * 10  =  2.5s */
            
            @keyframes move {
                0% {
                    transform: translate(0, 0);
                }
                25% {
                    transform: translate(1000px, 0)
                }
                50% {
                    transform: translate(1000px, 500px);
                }
                75% {
                    transform: translate(0, 500px);
                }
                100% {
                    transform: translate(0, 0);
                }
            }
            
            div {
                width: 100px;
                height: 100px;
                background-color: pink;
                animation-name: move;
                animation-duration: 10s;
            }
        </style>
    </head>
    
    <body>
        <div>
    
        </div>
    </body>
    
    </html>
    

3.17 动画属性

3.17.1 常见的属性

属性描述
@keyframes规定动画
animation所有动画属性的简写属性,除了animation-play-state属性
animation-name规定@keyframes动画的名称(必须的)
animation-duration规定动画完成一个周期所花费的秒或毫秒,默认是0(必须的)
animation-timing-function规定动画的速度曲线,默认是“ease
animation-delay规定动画何时开始,默认是0
animation-iteration-count规定动画被播放的次数,默认是1,还有infinite
animation-direction规定动画是否在下一周期逆向播放,默认是“normal”,alternate逆播放
animation-play-state规定动画是否正在运行或暂停,默认是“running”,还有“paused
animation-fill-mode规定动画结束后状态,保持forwards,回到起始backwards

3.17.2 示例代码

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}

3.18 动画简写

3.18.1 动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

3.18.2 知识要点

  • 简写属性里,不包含 animation-paly-state
  • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用;
  • 要想动画走回来,而不是直接调回来:animation-direction: alternate
  • 盒子动画结束后,停在结束位置:animation-fill-mode: forwards

3.18.3 示例代码

animation: move 2s linear 1s infinite alternate forwards;

3.19 速度曲线

  1. 速度曲线细节
    animation-timing-function: 规定动画的速度曲线,默认是ease

    描述
    linear匀速 - 动画从头到尾的速度是相同的。
    ease默认 - 动画以低速开始,然后加快,在结束前变慢。
    ease-in动画以低速 开始
    ease-out动画以低速 结束
    ease-in-out动画以低速 开始 和 结束
    steps()指定了时间函数中的 间隔数量(步长) 。

  1. 速度曲线步长

    案例效果:
    在这里插入图片描述
    案例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                overflow: hidden;
                font-size: 40px;
                width: 0;
                height: 60px;
                background-color: #F19EC2;
                color: #fff;
                /* 文字强制一行内显示 */
                white-space: nowrap;
                /* steps:分几步完成动画(有steps 就不要再写 ease 或者linear )*/
                animation: w 4s steps(10) forwards;
            }
            
            @keyframes w {
                0% {
                    width: 0;
                }
                100% {
                    width: 445px;
                }
            }
        </style>
    </head>
    
    <body>
        <div>世纪佳缘 - 我在这里等你</div>
    </body>
    
    </html>
    

  1. 案例 - 奔跑的熊大

    效果图示:
    在这里插入图片描述
    案例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                background-color: #ccc;
            }
            
            div {
                position: absolute;
                width: 200px;
                height: 100px;
                background: url(media/bear.png) no-repeat;
                /* 元素可以添加多个动画, 用逗号分隔 */
                animation: bear .4s steps(8) infinite, move 3s forwards;
            }
            
            @keyframes bear {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: -1600px 0;
                }
            }
            
            @keyframes move {
                0% {
                    left: 0;
                }
                100% {
                    left: 50%;
                    /* margin-left: -100px; */
                    transform: translateX(-50%);
                }
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>
    

    图像素材 [ 网盘下载 ]   提取码:7yiw


3.20 3D

3.20.1 认识3D转换

  1. 3D 的特点

    • 近大远小;
    • 物体和面遮挡不可见。
  2. 三维坐标系

    • x 轴:水平向右 – x 轴右边是正值,左边是负值
    • y 轴:垂直向下 – y 轴下面是正值,上面是负值
    • z 轴:垂直屏幕 – 往外边的是正值,往里面的是负值

在这里插入图片描述

3.20.2 3D转换

  1. 3D 转换知识要点

    • 3D 位移:translate3d(x, y, z)
    • 3D 旋转:rotate3d(x, y, z)
    • 透视:perspctive
    • 3D呈现: transfrom-style

  2. 3D 移动 translate3d
    3D 移动:在 2D 移动的基础上多加了一个可以移动的方向 - z 轴方向。

    transform: translateX(100px) /* 仅仅是在 x 轴上移动 */
    transform: translateY(100px) /* 仅仅是在 y 轴上移动 */
    transform: translateZ(100px) /* 仅仅是在 z 轴上移动 */
    transform: translate3d(x, y, z) /* x、y、z 为要移动的轴的方向的距离 */
    

    注: x, y, z 对应的值不能省略,如不需要则用 0 进行填充。

  3. 语法

    transform: translate3d(x, y, z)
    

  1. 语法示例
    transform: translate3d(100px, 100px, 100px)
    /* 注意:x, y, z 对应的值不能省略,不需要则填写 0 进行填充 */
    transform: translate3d(100px, 100px, 0)
    

3.20.3 透视 perspective

perspective 属性定义 3D 元素距视图的距离,像素单位。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身(透视需要写在被视察元素的父盒子上面)。

  1. 知识要点
    d:视距,人的眼睛到屏幕的距离;
    z:z 轴,z 轴越大(正值),看到的物体就越大。
    在这里插入图片描述
  2. 示例代码
    body {
      perspective: 500;
      -webkit-perspective: 500; /* Safari 和 Chrome */
    }
    

3.20.4 translateZ

  1. perspecitvetranslateZ 的区别
    perspecitve 给父级进行设置,translateZ 给 子元素进行设置不同的大小。

3.20.5 3D 旋转rotateX

3D 旋转:可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转。

  1. 语法

    transform: rotateX(45deg) /* 沿着 x 轴正方向旋转 45 度 */
    transform: rotateY(45deg) /* 沿着 y 轴正方向旋转 45 度 */
    transform: rotateZ(45deg) /* 沿着 z 轴正方向旋转 45 度 */
    transform: rotate3d(x, y, z, 45deg) /* 沿着自定义轴旋转 45度 */
    
  2. 案例 - rotateX

    1)示例效果在这里插入图片描述
    2)示例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                perspective: 300px;
            }
            
            img {
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            
            img:hover {
                transform: rotateX(45deg);
            }
        </style>
    </head>
    
    <body>
        <img src="media/pig.jpg" alt="">
    </body>
    
    </html>
    

    图片素材 pig,jpg [ 网盘下载 ]     提取码: zivx

  3. 左手准则

    • 左手拇指指向 x 轴的正方向;
    • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向。
      在这里插入图片描述

3.20.6 3D 旋转 rotateY

  1. 案例效果 在这里插入图片描述
  2. 案例代码
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                perspective: 500px;
            }
            
            img {
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            
            img:hover {
                transform: rotateY(45deg);
            }
        </style>
    </head>
    
    <body>
        <img src="media/pig.jpg" alt="">
    </body>
    
    </html>
    
  3. 左手准则
    • 左手拇指指向 y 轴的正方向;
    • 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)。
      在这里插入图片描述

3.20.7 3D 旋转 rotateZ

  1. 案例效果
    在这里插入图片描述

  2. 案例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                perspective: 500px;
            }
            
            img {
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            
            img:hover {
                /* transform: rotateZ(180deg); */
                /* transform: rotate3d(x,y,z,deg); */
                /* transform: rotate3d(1, 0, 0, 45deg); */
                /* transform: rotate3d(0, 1, 0, 45deg); */
                transform: rotate3d(1, 1, 0, 45deg);
            }
        </style>
    </head>
    
    <body>
        <img src="media/pig.jpg" alt="">
    </body>
    
    </html>
    
  3. rotate3d

    • transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转(deg 为角度)
    • x, y, z 表示旋转轴的矢量,是标识你是否希望沿着该轴进行旋转,最后一个标识旋转的角度
      • transform: rotate3d(1, 1, 0, 180deg) – 沿着对角线旋转 180deg
      • transform: rotate3d(1, 0, 0, 180deg) – 沿着 x 轴旋转 180deg

3.20.8 3D呈现transform-style

transform-style属性控制子元素是否开启三维立体环境。

代码写给父级,但是影响的是子盒子。

  1. 语法

    transform-style: flat | preserve-3d;
    
    描述
    flat默认值。子元素不开启 3D 立体空间
    preserve-3d子元素开启立体空间
  2. 案例 - transform-style

    1)案例效果:
    在这里插入图片描述
    2)案例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                perspective: 500px;
            }
            
            .box {
                position: relative;
                width: 200px;
                height: 200px;
                margin: 100px auto;
                transition: all 2s;
                /* 让子元素保持3d立体空间环境 */
                transform-style: preserve-3d;
            }
            
            .box:hover {
                transform: rotateY(60deg);
            }
            
            .box div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: pink;
            }
            
            .box div:last-child {
                background-color: purple;
                transform: rotateX(60deg);
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div></div>
            <div></div>
        </div>
    </body>	
    </html>
    


附:相关文档查阅地址

经常查阅文档是一个非常好的学习习惯。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/




下一篇: 重温前端基础(二)- 移动WEB开发

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页