H5+CSS3 总结

GoblinStar

1 HTML 基础

1.1 HTML 基本结构、网页基本信息

<!-- 告诉浏览器采用什么规范进行解析 -->
<!DOCTYPE html>
<html>
    <head>
        <!-- 页面编码 -->
        <meta charset="utf-8" />
        <!-- 搜索关键字 -->
        <meta name="keywords" content="哥布林" />
        <!-- 页面描述 -->
        <meta name="description" content="哥布林简介"
        <title></title>
    </head>
    <body>
        
    </body>
</html>

1.2 基本标签

标题标签

  • <h1>一级标题</h1>
  • <h2>二级标题</h2>
  • <h3>三级标题</h3>
  • <h4>四级标题</h4>
  • <h5>五级标题</h5>
  • <h6>六级标题</h6>

段落标签

  • <p>段落</p>

换行标签

  • <br/>

水平线标签

  • <hr/>

字体样式标签

  • <strong>加粗</strong>
  • <em>斜体</em>

注释和特殊符号

  • 空格 &nbsp;
  • 大于号 &gt;
  • 小于号 &lt;
  • 引号 &quot;
  • 版权 &copy;

图像标签

  • <img src="图片路径" alt=“图像的替代文字” title="鼠标悬停显示文字" width=“x” height=“y” />

链接标签

  • <a href="链接" target="目标窗口位置">链接文本活图像</a>

1.3 路径

绝对路径：绝对路径是文件在硬盘上的真正物理路径

<img src="C:/Users/Goblin/Documents/HBuilderProjects/H5+CSS3/day01/img/pic.jpg" alt="图片"/>

相对路径：相对于当前文件的路径

<img src="./img/pic.jpg" alt="图片"/>

1.4 有序列表

<ol>
  <li>范冰冰演藏族女孩</li>
  <li>撞死两个人后自拍</li>
  <li>诗隆甜蜜出游</li>
  <li>一线城市楼市退烧</li>
</ol>

  • 有顺序，每个<li>标签独占一行(块元素)
  • 默认<li>标签项前面有顺序标记
  • 一般用于排序类型的列表，如试卷、问卷选项等

1.5 无序列表

<ul>
  <li>范冰冰演藏族女孩</li>
  <li>撞死两个人后自拍</li>
  <li>诗隆甜蜜出游</li>
  <li>一线城市楼市退烧</li>
</ul>

  • 没有顺序，每个<li>标签独占一行(块元素)
  • 默认<li>标签项前面有个实心小圆点
  • 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

1.6 自定义列表

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

  • 没有顺序，每个 <dt> 标签、<dd> 标签独占一行(块元素)
  • 默认没有标记
  • 一般用于一个标题下有一个或多个列表项的情况

1.7 表格标签

<table border="1px" style="border-collapse: collapse">
          <caption>Optional table caption.</caption>
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>

  • <td colspan="3">学生成绩 跨三列
  • <td rowspan="2">张三 跨两行

1.8 表单

<form  method="post" action="result.html">
    <!-- method 规定表单提交方式 -->
    <!-- action 规定提交到哪个地址 -->
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

表单元素样式

属性 说明
type 指定元素的类型：text、password、radio、CheckBox、submit、reset、file、hidden、image、button
name 表单名称
value 元素的初始值
size 初始宽度
maxlength type 为 text、password 时，输入的最大字符数
checked type 为 radio、checkbox 时，指定按钮是否被选中

文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

密码框

<input  type="password "  name="pass"  size="20" />

单选按钮

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女

复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

下拉列表框

<select name="列表名称" size="行数">
	<option value="选项的值" selected="selected">…</option >
	<option value="选项的值">…</option >
</select>

文本域

<!-- cols:列 -->
<!-- rows:列 -->
<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea>

文件域

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

2 CSS 基础

2.1 CSS 语法

语法

h1 {
	font-size:12px;
	color:#F00;
}

2.2 显示模式及转换

元素显示模式

名称 属性 举例 备注
块级元素 独占一行 div、h、p、ul、ol、dl、li 没有设置宽度，默认和父元素一样宽
行内元素 不独占一行 span、strong 宽高自适应内容的宽高

display 取值

名称 特点 举例
block 新行开始；高度、行高、顶边距、底边距可控制 div、h、p、ul、form、li
inline 和其他元素在一行；高、行高、顶边距、底边距不可改变 span、strong、label、input、img
inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递

2.3 文本修饰属性

属性 含义 举例 备注
color 设置文本颜色 color:#00C; .p1{color:gray}
text-align 设置元素水平对齐方式 text-align:right; left、right、center、justify
text-indent 设置首行文本的缩进 text-indent:20px; length、percentage
line-height 设置文本的行高 line-height:25px; normal、length、percentage
text-decoration 设置文本划线 text-decoration:underline; none、underline、overline、line-through
letter-spacing 设置文字之间的距离 letter-spacing:normal; normal、length

2.4 选择器

标签选择器

标签 {
	属性: 值;
}

类选择器

.className {
	属性: 值;
}

id 选择器

#id {
	属性: 值;
}

2.5 层叠性、继承性、优先级

层叠性：多个选择器选中同一个标签并设置了相同属性时会发生层叠性, 哪个选择器设置的属性起作用是由选择器的优先级来决定的

继承性：给父元素设置属性, 子元素、后代可以使用, 我们成为继承, 只有以 font-、color、text-、line- 开头的属性可以继承, a 标签的颜色和下划线无法继承, h 标签的大小无法继承

优先级：多个选择器选中同一个标签, 优先级高的先做, 优先级低的后做

判断方式:

  • 间接继承：就近原则
  • 直接选中 相同选择器：后面的优先
  • 直接选中 不同选择器：优先级

选择器的优先级：id>类选择器>标签选择器>通配符>继承>浏览器默认

2.6 内嵌式、外链式、行内式、导入式

内嵌式

<head>
<style type="text/css">     
<!--
p{
　　color:#0000FF;
　　text-decoration:underline;
　　font-weight:bold;
　　font-size:18px;
}
-->
</style>

</head>

外链式

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

行内式

<p style="color:#0000ff; font-style: normal;">扶摇</p>

导入式

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

链接式与导入式的区别:

  • 使用 link 的 css 文件在加载到网页中, 在进行编译显示
  • 使用 @import 的 css 文件, 客户端先加载 html 结构, 再把 css 加载到 html 中

2.7 盒子模型

border-color

属性 说明 示例
border-top-color 上边框颜色 border-top-color:#369;
border-right-color 右边框颜色 border-right-color:#369;
border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
border-left-color 左边框颜色 border-left-color:#efcd56;
border-color 四个边框为同一颜色 border-color:#eeff34;
上、下边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000;
上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 border-color:#369 #000 #f00;
上、右、下、左边框颜色： #369、#000、#f00、#00f border-color:#369 #000 #f00 #00f;

border-width

  • thin：细边框
  • medium：中等边框
  • thick：粗边框
  • 像素值

border-style

  • none：无边框
  • hidden：隐藏
  • dotted：点状
  • dashed：虚线
  • solid：实线
  • double：双线

外边距

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

内边距

  • padding
  • padding-left
  • padding-right
  • padding-top
  • padding-bottom

网页居中

  • margin:0px auto;
  • 必备条件：块元素;固定宽度

2.8 外边距合并

当一个元素出现在另一个元素的上面时，该元素的下边距会和第二个元素的上边距发生合并(max(|margin-bottom|, |margin-top|))

3 HTML5 基础

3.1 HTML5 文档结构

3.2 HTML5 新增结构元素和功能元素

3.2.1 新增主体结构

名称 作用
article 代表文档，页面或应用程序中独立的；完整的；可以独自被外部引用的内容
section 用来对网站或应用程序中页面上的内容进行分块，一个 section 元素通常有内容及其标题组成
nav 一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分
aside 用来表示当前页面或文章的附属信息部分，它可以包含于当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类似的有别于主要内容的部分
time 用来无歧义地，明确地对机器编码日期和时间，并且以让人易读的方式来展现
pubdate 一个可选的 boolean 值得属性，他可以被应用到 article 元素中的 time 元素上，意思是 time 元素代表了文章（article 元素的内容）或整个网页的发布日期

article(主体结构)

  • 通常是一篇文章、一个页面、一个独立完整的内容模块
  • 一般会带个标题，并放在 header 标签中
  • article 元素可以互相嵌套

section(主体结构)

  • 文章的一段
  • 由内容和标题组成，没有标题不建议使用

nav(主体结构)

  • 页面导航链接组

  • 侧边栏导航

aside(主体结构)

  • 在 article 中使用时，作为主要内容的附属部分，如有关的参考资料、名词解释等
  • 在 article 外使用时，作为全局的附属部分，如侧边栏、博客的友情链接部分、广告区域等

time(主体结构)

  • 代表 24 小时中的某个时刻或某个日期
  • 表示时刻时允许带时间差
  • 可定义很多格式的日期和时间

3.2.2 新增非主体结构

名称 作用
header 一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格，搜索表单或相关的 LOGO
footer 可以作为其上层父级内容区块或一个根区块的脚注
address 用来在文档中呈现联系信息，包括文档作者或文档维护者的名字，文档作者或文档维护者的网站链接，电子邮箱，真是地址，电话号码等
main 表示网页中的主要内容。每个·网页内部只能放置一个main元素

header(非主体结构)

  • 通常放置在整个页面或者页面内的一个内容区块的标题
  • 一种具有引导和导航作用的结构元素

hgroup(非主体结构)

  • header 元素的子元素
  • 一个内容模块包括一个主标题和一个子标题才可以使用

footer(非主体结构)

  • 一个内容块区的脚注

address(非主体结构)

  • 用于文档中呈现的联系信息

3.2.3 多媒体交互标签

名称 作用
video 标记定义一个视频
audio 标记定义音频内容
source 标记定义媒体资源
canvas 标记定义图片
embed 标记定义外部的可交互的内容或插件 比如 flash

示例

<video src="video/mov_bbb.mp4" controls="controls">您的浏览器不支持 video 标签</video>


<audio src="audio/我的好兄弟.mp3" controls="controls">您的浏览器不支持audio标签</audio>

3.2.4 Web 应用标签

名称 作用
menu 命令列表
menuitem menu 命令列表标签 FF
command menu 标记定义一个命令按钮
meter 状态标签
progress 状态标签
datalist 为 input 标记定义一个下拉列表,配合
details 标记定义一个元素的详细内容，配合 dt、dd

示例

<p>显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>


下载进度：<progress value="22" max="100"></progress>

3.2.5 注释标签

名称 作用
ruby 标记定义 注释或音标
rp 告诉那些不支持 ruby 元素的浏览器如何去显示
rt 标记定义对 ruby 的注释内容文本 
<ruby>
 不忍直视 <rt> gan de piao liang </rt>
</ruby>

3.2.6 其他标签

名称 作用
keygen 标记定义表单里一个生成的键值(加密信息传送) O、F
mark 标记定义有标记的文本(黄色选中状态)
output 标记定义一些输出类型,计算表单结果配合 oninput 事件

3.3 HTML5 废除的元素和属性

删除的 HTML 元素：basefont、big、center、font、s、strike、tt、u

对可用性产生负面影响的元素：frame、frameset、noframes

重新定义的元素：

HTML 标签 HTML5 中的意义
<b> 代表内联文本，通常是粗体，没有传递表示重要的意思
<i> 代表内联文本，通常是斜体，没有传递表示重要的意思
<dd> 可以同 details 与 figure 一同使用，定义包含文本，dialog 也可用
<dt> 可以同 details 与 figure 一同使用，汇总细节，dialog 也可用
<hr> 表示主题结束，而不是水平线，虽然显示相同
<menu> 重新定义用户界面的菜单，配合 commond 或者 menuitem 使用
<small> 表示小字体，例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号

4 HTML5 智能表单

4.1 form 表单元素

HTML5 以前的所有表单标签都要被 form 嵌套，HTML5 为了方便排版，可以让表单标签脱离 form，在表单标签添加 form=form 的 id

元素名 描述
email 限制用户输入必须为Email类型
url 限制用户输入必须为URL类型
date 限制用户输入必须为日期类型
time 限制用户输入必须为时间类型
month 限制用户输入必须为月类型
week 限制用户输入必须为周类型
number 限制用户输入必须为数字类型
range 产生一个滑动条的表单
search 产生一个搜索意义的表单 配合 results="n" 属性
color 生成一个颜色选择表单

4.2 form 表单属性

属性 值 说明
required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
pattern 正则表达式 输入的内容必须匹配到指定正则

required 属性表示文本框中必须填写内容，适用于以下类型的 <input> 标签：

  • text
  • search
  • url
  • telephone
  • email
  • password
  • date
  • number
  • checkbox
  • radio
  • file

placeholder 属性会在输入域为空时显示，会在输入域获得焦点时消失，适用于以下属性：

  • text

  • search

  • url

  • telephone

  • email

  • password

pattern 属性允许输入正则表达式，适用于以下属性：

  • text

  • search

  • url

  • telephone

  • email

  • password

示例

4.3 表单高级应用

隐藏域

<input type="hidden" value="100011" name="userId">

禁用与只读

<!-- 只读 -->
<input name="name" type="text" value="张三" readonly>
<!-- 禁用 -->
<input type="submit" disabled value="保存" >

标注

<!-- 点击标注的文本时自动将焦点定位到gender中 -->
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

5 HTML5 媒体元素

5.1 HTML5 视频元素

HTML5 支持的视频格式

格式 描述 支持的浏览器
Ogg 带有Theora视频编码+Vorbis音频编码的Ogg文件 Firefox、Chrome、Opera
MEPG4 带有H.264视频编码+AAC音频编码的MPEG4文件 Safari、Chrome
WebM 带有VP8视频编码+Vorbis音频编码的WebM格式 IE、Firefox、Chrome、Opera

示例

<video controls="controls">
     <source src="video/movie.mp4" type="video/mp4"></source>
     <source src="video/movie.ogg" type="video/ogg"></source>
     <source src="video/movie.webm" type="video/webm"></source>
     当前浏览器不支持video直接播放
</video>

video 的常见属性

属性 值 描述
autoplay autoplay 视频就绪自动播放
``controls` controls 向用户显示播放控件
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
loop loop 播放完是否继续播放该视频，循环播放
preload proload 是否等加载完再播放
src url 视频 url 地址
poster imgurl 加载等待的画面图片
autobuffer autobuffer 设置为浏览器缓冲方式，不设置 autoply 才有效

video 的 API 方法

方 事件说明
play() 控制视频的播放
pause() 控制视频的停止
load() 重新加载视频元素
canPlayType() 检测浏览器是否能播放指定的视频类型
addTextTrack() 向视频添加新的文本轨道

video 的 API 属性

属性 说明
audioTracks 返回可用的音轨列表(MultipleTrackList对象)
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围(TimeRanges对象)
controller 返回当前的媒体控制器(MediaController对象)
controls 显示播控控件
crossOrigin CORS 设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间，单位秒(快进快退10秒)
defaultPlaybackRate 播控的缺省倍速
duration 返回媒体的播放总时长，单位秒
ended 返回当前播放是否结束标志
error 返回当前播放的错误状态
initialTime 返回初始播放的位置
loop 是否循环播放
mediaGroup 当前音视频所属媒体组(用来链接多个音视频标签)
muted 是否静音
networkState 返回当前网络状态
paused 是否暂停
playbackRate 播放的倍速(加速、减速播放)
played 当前播放部件已经播放的时间范围(TimeRanges对象)
preload 页面加载时是否同时加载音视频
readyState 返回当前的准备状态
seekable 返回当前可跳转部件的时间范围(TimeRanges对象)
seeking 返回用户是否做了跳转操作
src 当前音视频源的URL
startOffsetTime 返回当前的时间偏移(Date对象)
textTracks 返回可用的文本轨迹(TextTrackList对象)
videoTracks 返回可用的视频轨迹(VideoTrackList对象)
volume 音量值

video 的常用事件

事件 描述
abort 当音视频加载被异常终止时产生该事件
canplay 当浏览器可以开始播放该音视频时产生该事件
canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange 当媒体的总时长改变时产生该事件
emptied 当前播放列表为空时产生该事件
ended 当前播放列表结束时产生该事件
error 当加载媒体发生错误时产生该事件
loadeddata 当加载媒体数据时产生该事件
loadedmetadata 当收到总时长，分辨率和字轨等metadata时产生该事件
loadstart 当开始查找媒体数据时产生该事件
pause 当媒体暂停时产生该事件
play 当媒体播放时产生该事件
playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress 当获取到媒体数据时产生该事件
ratechange 当播放倍数改变时产生该事件
seeked 当用户完成跳转时产生该事件
seeking 当用户正执行跳转时操作的时候产生该事件
stalled 当试图获取媒体数据，但数据还不可用时产生该事件
suspend 当获取不到数据时产生该事件
timeupdate 当前播放位置发生改变时产生该事件
volumechange 当前音量发生改变时产生该事件
waiting 当视频因缓冲下一帧而停止时产生该事件

5.2 HTML5 音频元素

HTML5 支持的音频格式

格式 支持的浏览器
Ogg Firefox、Chrome、Opera
MP3 Safari、Chrome、IE
Wav Firefox、Safari、Opera

示例

<audio src="audio/我的好兄弟.mp3" controls="controls">
      您的浏览器不支持audio标签
</audio>

audio 常见属性

属性 描述
autoplay 如果出现该属性，则音频在就绪后马上播放
controls 如果出现该属性，则向用户显示控件，比如播放按钮
loop 如果出现该属性，则每当音频结束时重新开始播放
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性
src 要播放的音频的 URL

6 Canvas

6.1 Canvas 标签

介绍

  • HTML5 <canvas> 元素用于图形的绘制，通过脚本(通常是JavaScript)来完
  • <canvas> 标签只是图形容器，必须使用脚本来绘制图形
  • 可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像

浏览器支持

元素 Chrome IE Firefox Safari Oper
<canvas> 4.0 9.0 2.0 3.1 9.

示例

<canvas id="canvas"  height="300" width="300">
        您的浏览器不支持canvas标签
</canvas>

6.2 getContext()

语法：Canvas.getContext(contextID)

参数：

参数 contextID 指定要要在画布上绘制的类型，当前唯一的合法值为 2d

返回值：CanvasRenderingContext2D 对象

6.3 Canvas 坐标

ncanvas 是一个二维表格

ncanvas 的左上角坐标为(0,0)

6.4 Canvas 路径

canvas 的 API 路径方法

方法 描述
fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，返回布尔值

6.5 Canvas 文本

canvas 的 API 文本属性和方法

属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
fillText() 在画布上绘制"被填充的"文本
strokeText() 在画布上绘制文本（无填充）
measureText() 返回包含指定文本宽度的对象

6.6 Canvas 渐变

canvas 的 API 颜色、样式和阴影属性和方法

属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变（用在画布内容上）
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
addColorStop() 规定渐变对象中的颜色和停止位置

canvas 的 API 矩形方法

方法 描述
rect() 创建矩形
fillRect() 绘制"被填充"的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素

渐变方法解析

  • createLinearGradient(x0,y0,x1,y1)

    • 创建线性的渐变对象
    • 参数
      • x0：渐变开始点的 x 坐标
      • y0：渐变开始点的 y 坐标
      • x1：渐变结束点的 x 坐标
      • y1：渐变结束点的 y 坐标

  • addColorStop(stop,color)

    • 规定 gradient 对象中的颜色和位置
    • 参数
      • stop：介于 0.0 与 1.0 之间的值表示渐变中开始与结束之间的位置
      • color：在结束位置显示的 CSS 颜色值

  • fillStyle

    • 设置或返回用于填充绘画的颜色、渐变或模式
    • 属性值
      • color：用户绘图填充色的CSS颜色值，默认值是 #000000
      • gradient：用于填充绘图的渐变对象(线性或放射性)
      • pattern：用于填充绘图的 pattern 对象

  • fillRect(x,y,width,height)

    • 绘制“已填色”的矩形，默认的填充颜色是黑色
    • 参数
      • x：矩形左上角的 x 坐标
      • y：矩形左上角的 y 坐标
      • width：矩形的宽度，单位像素
      • height：矩形的高度，单位像素

6.7 Canvas 图像

canvas 图像方法解析

  • drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：把一幅图像放置到画布上
    • img：规定要使用的图像、画布或视频
    • sx：(可选)开始剪切的 x 坐标位置
    • sy：(可选)开始剪切的 y 坐标位置
    • swith：(可选)被剪切图像的宽度
    • sheight：(可选)被剪切图像的高度
    • x：在画布上放置图像的 x 坐标位置
    • y：在画布上放置图像的 y 坐标位置
    • width：(可选)要使用的图像的宽度(伸展或缩小图像)
    • height：(可选)要使用的图像的高度(伸展或缩小图像)

示例

var c = document.getElementById(“canvas"); 
var context = c.getContext("2d"); 
var img = document.getElementById("scream"); 
img.onload = function(){
    context.drawImage(img, 10, 10);
}

7 CSS3 选择器

7.1 CSS3 层次选择器

选择器 类 型 功能描述
E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器

语法： body p{ background: red; }

后代选择器的两个选择器之间必须要有空格间隔，中间不能有其他任何符号的插入

子选择器

语法： body>p{ background: pink; }

相邻兄弟选择器

语法： .active+p { background: green; }

通用兄弟选择器

语法：.active~p{ background: yellow; }

7.2 CSS3 结构伪类选择器

选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素 E
E:last-child 作为父元素的最后一个子元素的元素 E
E F:nth-child(n) 选择父级元素 E 的第 n 个子元素 F(n 可以是 1、2、3)关键字为 even、odd
E:first-of-type 选择父元素内具有指定类型的第一个 E 元素
E:last-of-type 选择父元素内具有指定类型的最后一个 E 元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第 n 个 F 元素

7.3 CSS3UI 状态伪类选择器

选择符 简介
E:checked 匹配用户界面上处于选中状态的元素 E (用于 input type 为 radio 与 checkbox 时)
E:enabled 匹配用户界面上处于可用状态的元素 E
E:disabled 匹配用户界面上处于禁用状态的元素 E

7.4 CSS3 属性选择器

E[attr] 选择匹配具有属性 attr 的 E 元素
E[attr=val] 选择匹配具有属性 attr 的 E 元素,并且属性值为 val(其中 val 区分大小写）
E[attr^=val] 选择匹配元素 E，且 E元素定义了属性 attr，其属性值是以 val 开头的任意字符串
E[attr$=val] 选择匹配元素 E，且 E元素定义了属性 attr，其属性值是以 val 结尾的任意字符串
E[attr*=val] 选择匹配元素 E，且 E元素定义了属性attr，其属性值包含了 val

8 CSS3 美化网页

8.1 CSS3 文字、字体

属性名 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";

span 标签

span 标签的作用是让被其包裹的文字可以加入样式

font-family 属性

示例

body{font-family: Times,"Times New Roman", "楷体";}

这种写法是浏览器先从第一个字体开始找，如果找到就使用 Times，否则找下一个字体，以此类推

font-size 属性

单位：

  • px：固定长度单位，不随其他元素变化而变化
  • em：相对长度单位，会随着父元素的变化而变化，如果父元素设置 16px，那么子元素 0.5em 就是 8px
  • rem：是 CSS3 新出现的长度单位，为了解决 em 的痛点，因为 em 会随着父元素的变化而变化，所以每次父元素改变大小子元素都要重新计算，rem 只相对于 html 根标签，默认 html 跟标签的 font-size = 12px

font-style 属性

  • normal：正常文字
  • italic：斜体字
  • oblique：倾斜的文字

font-weight 属性

  • normal：默认值
  • bold：粗体
  • bolder：更粗的字体
  • lighter：更细的字体
  • 100、200、300、400、500、600、700、800、900：定义从细到粗的字体，400 == normal，700 == bold

font 属性

font 是一个复合属性 顺序 font-style font-weight font-size font-family

文本属性

属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;

text-overflow

  • clip：表示不显示省略标记(...)，而是简单的裁切
  • ellipsis：表示当对象内文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符
  • ellipsis-word：表示当对象内文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个词(word)

需要配合 overflow:hidden; white-space:nowrap; width:***;

text-decoration 属性

  • none：默认值，定义的标准文本
  • underline：下划线
  • overline：上划线
  • line-through：删除线

vertical-align 属性

  • middle
  • top
  • bottom

text-shadow 属性

语法：text-shadow : color x-offset y-offset blur-radius;

参数：

  • x-offset：X 轴位移，用来指定阴影水平位移量
  • y-offset：Y 轴位移，用来指定阴影垂直位移量
  • blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围

8.2 CSS3 新的颜色表达方式

8.2.1 rgba 色彩模式

rgba 是 rgb 的扩展，在 rgb 的基础上添加透明度

语法：rgba(r,g,b,<opacity>)

其中 r、g、b 分别代表 红绿蓝三种原色分别占的比重，值可以是正整数或百分数

8.2.2 hsl 色彩模式

HSL 色彩模式是工业界的一种颜色标准，它通过对色调（H）、饱和度（S）和亮度（L）3个颜色通道的变化以及它们相互之间的叠加来获取颜色

语法：hsl(<length>,<percentage>,<percentage>)

参数说明：

  • length：色调，取值可以为任意数值，其中0表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色、300表示洋红，也可取其他值表示
  • percentage：饱和度，颜色的深浅程度、鲜艳程度，取值在 0%~100% 之间的值，0% 表示灰度，即没有使用该颜色；100% 饱和度最高，颜色最艳
  • percentage：亮度，取值在 0%~100% 之间的值，其中 0% 最暗，显示黑色，50% 表示均值，100% 最亮，显示白色

8.2.3 hsla 色彩模式

HSLA 色彩模式是 HSL 色彩模式的扩展，在色相、饱和度、亮度三要素基础上增加了不透明度参数

语法：hsla(<length>,<percentage>,<percentage>,<opacity>)

8.2.4 opacity 属性

设置任何元素呈现为半透明效果

语法：opacity：alphavalue(有浮点数字和单位标识符组成的长度值)|inherit(表示继承)

8.2.5 transparent 属性

会将背景、文字或边框等的颜色设定为完全透明，相当于使用了值为 0 的alpha通道

8.3 CSS3 背景、渐变、透明度

background-image 属性

语法：background-image:url(图片路径);

background-repeat 属性

值 含义
repeat 沿水平和垂直两个方向平铺
no-repeat 不平铺，即只显示一次
repeat-x 只沿水平方向平铺
repeat-y 只沿垂直方向平铺

background-position 属性

值 含义
Xpos Ypos 单位：px， Xpos 表示水平位置，Ypos 表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y 方向关键词 水平方向的关键词： left、center、right 垂直方向的关键词： top、center、bottom

background-clip 属性

值 含义
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距
content-box 背景被裁剪到内容框

background-size 属性

属性值 描述
auto 默认值，使用背景图片保持原样
percentage 当使用百分值时，调整图片到指定大小，百分比相对于包含元素的尺寸
cover 整个背景图片放大填充了整个元素（保持像素的长宽比）
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

线性渐变

语法：linear-gradient ( position, color1, color2,…)

9 盒子模型

9.1 CSS3 新增盒子模型属性

定义元素尺寸大小-resize

语法：resize:none|both|horizontal|vertical|inherit;

值 含义
none 浏览器不提供尺寸调整机制，用户不能操纵机制调节元素的尺寸
both 浏览器提供双向尺寸调整机制，允许用户调节元素的宽度和高度
horizontal 浏览器提供单向水平尺寸调整机制，允许用户调节元素的宽度
vertical 浏览器提供单向垂直尺寸的调整机制，允许用户调节元素的高度
inherit 继承

溢出处理-overflow

值 含义
visible 默认值，内容不会被修剪，会呈现在元素框外
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
hidden 内容会被修剪，并且其余内容不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值

定义轮廓-outline

outline:[outline-color]||[outline-style]||[outline-width]||[outlineoffset]|inherit

值 含义
outline-color 定义轮廓边框颜色
outline-style 定义轮廓边框轮廓
outline-width 定义轮廓边框宽度
outline-offset 定义轮廓边框偏移位置的数值
inherit 默认继承

定义边框背景-boder-image

语法：border-image:none|<image>[<number>|<percentage>]{1,4}[<border-width>{1,4}];

值 含义
none 默认值，表示边框无背景图
<image> 使用绝对或相对URL地址指定边框的背景图像
<number> 设置边框宽度或者边框背景图像大小，使用固定像素值表示
<percentage> 设置边框背景图像大小，使用百分比表示
border-right-image 定义右侧边框背景图像
border-bottom-image 定义底部边框背景图像
border-left-image 定义左侧边框背景图像
border-top-left-image 定义左上角边框背景图像
border-top-right-image 定义右上角边框背景图像
border-bottom-left-image 定义左下角边框背景图像
border-bottom-right-image 定义右下角边框背景图像
border-image-source 定义边框的背景图像源，即图像URL
border-image-slice 定义如何裁切背景图像，与背景图像的定位功能不同
border-image-repeat 定义边框背景图像的重复性
border-image-width 定义边框背景图像的显示大小（即边框显示大小）
border-image-outset 定义边框背景图像的偏移位置

9.2 圆角边框

语法：border-radius: 20px 10px 50px 30px;

示例：

div {
	width: 100px;
	height: 100px;
	border: 1px red solid;
	border-radius: 50%;
}

9.3 盒子阴影

语法：box-shadow: inset x -offset y -offset blur -radius color;

  • inset x：X 轴位移，指定阴影水平位移量
  • offset y：Y 轴位移，用来指定阴影垂直位移量
  • offset blur：阴影模糊半径阴影向外模糊的模糊范围
  • radius：阴影颜色，定义绘制阴影时所使用的颜色

10 浮动和定位

10.1 标准流

指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列，这也是元素默认的排列方式

10.2 display 属性

值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none 设置元素不会被显示

10.3 浮动属性

值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

10.4 清除浮动

clear 属性

值 说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧

解决父级边框塌陷的方法

浮动元素后面加空 div

<style>
	.clear{  
        clear: both;  
        margin: 0; 
        padding: 0;
    }
</style>
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
  <div class="clear"></div>
</div>

设置父元素的高度

<style>
	#father{  
        height: 400px;
        border: 1px red solid;
    }
</style>
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>

父级添加 overflow 属性

<style>
	#father{  
        overflow: hidden;
        border: 1px red solid;
    }
</style>
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>

父级添加伪类 after

<style>
	.clear:after{
    	content: \'\';          /*在clear类后面添加内容为空*/
    	display: block;      /*把添加的内容转化为块元素*/
    	clear: both;         /*清除这个元素两边的浮动*/
	}
</style>
<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>

10.5 定位属性

position 属性

  • static：默认值，没有定位

  • relative：相对定位，相对于自身原来位置进行偏移

    • 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
    • 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
    • 设置相对定位的盒子原来的位置会被保留下来

  • absolute：绝对定位

    • 使用了绝对定位的元素以它最近的一个已经定位的祖先元素为基准进行偏移
    • 如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
    • 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
    • 元素位置发生偏移后，它原来的位置不会被保留下来

  • fixed：固定定位

    • 类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

偏移量方向

10.6 z-index 属性

调整元素定位时重叠层的上下位置，设置了 positon 属性时，z-index 属性可以设置各元素之间的重叠高低关系，z-index 值大的层位于其值小的层上方

11 CSS 制作网页动画

11.1 CSS3 变形

2D 位移

translate() 函数将元素沿着 X 轴和 Y 轴移动

语法：translate(tx, ty)

参数：

  • tx：X 轴移动的向量长度
  • ty：Y 轴移动的向量长度

一个方向上的偏移

translateX(tx)：只设置 X 轴的位移，transform:translate(100px, 0) == transform:translateX(100px)

translateY(ty)：只设置 Y 轴的位移，transform:translate(0, 100px) == transform:translateY(100px)

2D 缩放

scale() 函数可以只接收一个参数，也可以接收两个参数，只有一个值时，第二个值默认和第一个值相等

语法：scale(sx, sy)

参数：

  • sx：X 轴的缩放，transform:scale(2, 0) == transform:scaleX(2)
  • sy：Y 轴的缩放，transform:scale(0, 2) == transform:scaleY(2)

2D 倾斜

shew() 函数可以仅设置沿着 X 轴或 Y 轴方向倾斜

语法：skew(ax, ay);

skewX(ax)：表示只设置 X 轴的倾斜(逆时针)

skewY(ay)：表示只设置 Y 轴的倾斜(顺时针)

2D 旋转

rotate() 函数可以设置按照规定的角度进行旋转

语法：rotate(a);

参数：a 单位使用 deg 表示，正值表示元素相对原来中心顺时针旋转

11.2 CSS3 过滤

transition 呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

transition:[transition-property transition-duration transition-timing-function transition-delay ]

  • transition-property：过渡或动态模拟的 CSS 属性
  • transition-duration：完成过渡需要的时间
  • transition-timing-function：指定过渡函数
  • transition-delay：过渡开始出现的延迟时间

transition-property 属性

定义转换动画的 CSS 属性名称

  • IDENT：指定的 CSS 属性(width、height、background-color 属性等)
  • all：定所有元素支持 transition-property 属性的样式，一般为了方便都会使用 all

transition-duration 属性

定义转换动画的时间长度，即从设置旧属性到换新属性所需要花费的时间，单位为秒

transition-timing-function 属性

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡增加一个函数控制动画的快慢方式

  • ease：速度由快到慢(默认值)
  • linear：速度均衡(匀速运动)
  • ease-in：速度越来越快(渐显效果)
  • ease-out：速度越来越慢(渐隐效果)
  • ease-in-out：速度先加速再减速(渐显渐隐效果)

transition-delay 属性

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果

  • 正值：元素过渡效果不会立即执行，当改变元素属性多长时间后才会执行过渡效果
  • 负值：元素过渡效果从当前时间点立即执行，之前的动作被截断
  • 0：默认值，元素过渡效果立即执行

过渡的触发机制

  • 伪类触发
    • :hover
    • :active
    • :focus
    • checked
  • 媒体查询，通过 @media 属性判断设备的尺寸，方向等
  • js 脚本触发

11.3 CSS3 动画

animation 实现动画主要由两个部分组成

  • 通过类似Flash动画的关键帧来声明一个动画
  • 在 animation 属性中调用关键帧声明的动画实现一个更为复杂的动画效果

语法：

@keyframes  IDENT  {
    from {/*CSS样式写在这里*/}
    percentage {/*CSS样式写在这里*/}
    to {/*CSS样式写在这里*/}
}

@keyframes spread {
    0% {width:0;}
    33% {width:23px;}
    66% {width:46px;}
    100% {width:69px;}
}

调用关键帧

语法：animation:animation-name animation–duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode;

  • animation-name：动画名称
  • animation–duration：动画时间
  • animation-timing-function：动画方式
  • animation-delay：延迟时间
  • animation-iteration-count：动画的播放次数
  • animation-direction：动画的播放方向
  • animation-play-state：动画的播放状态
  • animation-fill-mode：动画开始和结束之后发生的操作

animation-iteration-count

  • 值通常为整数，默认值为 1
  • infinite，无限次播放

animation-direction

  • normal：动画每次都是循环向前播放
  • alternate：动画播放为偶数次则向前播放

animation-play-state

  • running：将暂停的动画重新播放
  • paused：将正在播放的元素动画停下来

animation-fill-mode

  • forwards：动画在结束后继续应用最后关键帧的位置
  • backwards：向元素应用动画样式时迅速应用动画的初始帧
  • both：元素动画同时具有 forwards 和 backwards 的效果

12 响应式布局

12.1 多列布局

columns 属性

多列布局特性的基本属性，该属性可以同时定义列数和宽度

语法：columns: column-width column-count;

column-width 属性

可以定义单列显示的宽度，该属性可以与其他多列布局属性配合使用也可单独使用

语法：columns-width: length|auto;

初始值为 auto，适用于不可替代的块元素、行内块元素和单元格，但是表格元素除外

column-count 属性

可以定义显示的列数

语法：columns-count: integer|auto;

column-count 属性的初始值为 auto，适用于不可替换的块元素、行内元素和单元格，但是表格元素除外

column-gap 属性

定义两栏之间的间距

语法：columns-gap: normal|integer;

column-gap 属性初始值为 normal，适用于多列布局元素

column-rule 属性

定义每列之间边框的宽度、样式和颜色

语法：columns-rule: length|style|color|transparent;

  • length：由浮点数字和单位标识符组成的长度值。不能为负值

  • style：定义边框样式

  • color：定义边框颜色

  • transparent：定义边框透明度显示

column-rule 属性初始值根据个别属性而定，适用于多列布局元素

column-span 属性

定义跨列显示，也可以设置单列显示

语法：columns-span: 1|all;

column-span 属性初始值为 1，适用于静态的、非浮动元素

column-fill 属性

定义栏目的高度是否统一

语法：columns-fill: auto|balance;

  • auto：各列的高度随其内容的变化而自动变化
  • balance：各列的高度将会根据内容最多的那一列的高度进行统一

column-fill 属性初始值为 balance，适用于多列布局元素

12.2 media 标签

媒体类型

值 设备类型
All 所有设备
Braille 盲人用点字法触觉回馈设备
Embossed 盲人打印机
Handheld 便携设备
Print 打印用纸或打印预览视图
Projection 各种投影设备
Screen 电脑显示器
Speech 语音或音频合成器
Tv 电视机类型设备
Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端

媒体类型的引入方式

语法：

  • @media 方式

    @media 媒体类型 {
    选择器{ /*样式代码写在这里…*/}
}

  • link 方式

    <link  rel="stylesheet"  href="style1.css"  media="媒体类型" />

媒体特性

属 性 值 Min/Max 描 述
device-width Length Yes 设置屏幕的输出宽度
device-height Length Yes 设置屏幕的输出高度
width Length Yes 渲染界面的宽度
height Length Yes 渲染界面的高度
Orientation Portrait/landscape No 横屏或竖屏
Resolution 分辨率(dpi/dpcm) Yes 分辨率
Color 整数 Yes 每种色彩的字节数
color-index 整数 Yes 色彩表中的色彩数

媒体特性语法

语法：

@media  媒体类型  and  （媒体特性）{ 
    CSS样式 
}

关键词

and：同时满足两者时生效

@media screen and （max-width: 1200px）{样式代码…}

only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

<link   href = "style1.css"  media = " only screen and  (max-width: 500px) "  />

not：排除某种指定的媒体类型，即排除符合表达式的设备

@media  not  print  and （max-width: 1200px）{样式代码…}

12.3 响应式布局的实现方式及应用

屏幕分辨率大于 1024px

@media all and (min-width:1024px) {
    .box{
        width: 1024px;
        padding: 30px;
    }
}

屏幕分辨率在 640px 到1023px之间

@media all and (min-width: 640px) and (max-width: 1023px) {
    .box{
        width: 640px;
        padding: 24px;
        margin: 10px auto 0;
    }
}

屏幕分辨率在 320px 到 639px 之间

@media all and (min-width: 320px) and (max-width: 639px) {
    .box{
        width: 320px;
        padding: 20px;
        margin: 10px auto 0;
    }
}

12.4 弹性布局

布局的传统解决方案是基于盒状模型，依赖 diplay 属性 + position 属性 + float 属性。它对于那些特殊布局不方便，比如，垂直居中就不容易实现。
2009 年，W3C 提出 了一种新的方案 --flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能

基本概念

  • 容器：采用flex布局的元素，称为 flex 容器(flex container)

  • 项目：为于容器中的所有子元素自动成为容器成员称为 flex 项目

  • 容器的轴向：

    • 水平轴(main axis)
    • 垂直交叉轴(cross axis)

  • 容器的四个点：

    • main start
    • marn end
    • cross start
    • cross end

指定容器为 flex 布局

<!-- 任何元素都可以指定为flex布局 -->
.box {
    display: flex;
}
<!-- 行内元素指定为flex布局 -->
.box {
    display: inline-flex;
}
<!-- webkit内核的浏览器 -->
.box {
    display: -webkit-flex;
    display: flex;
}

设置为 flex 布局后，元素的 float、clear、vertical-align 都将失效

12.4.1 容器的属性

属性 说明
flex-direction 定义主轴的方向(即项目的排列方向)
flex-wrap 默认情况下，项目都排在一条线（又称轴线）上。felx-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow 是flex-diection、flex-wrap属性的简写形式，默认值为row nowrap。
justify-content 定义了项目在主轴上的对齐方式
align-items 定义了项目在交叉轴上如何对齐
align-content 定义了多根轴线的对齐方式如果项目只有一根轴线，该属性不起作用

flex-direction 属性

决定主轴的方向

语法：flex-direction: row | row-reverse | column | column-reverse;

  • row：水平方向，起点在左端
  • row-reverse：水平方向，起点在右端
  • column ：垂直方向，起点在上方
  • column-reverse：垂直方向，起点在下方

flex-wrap 属性

如果一行排不下，怎么换行

语法：flex-wrap: nowrap | wrap | wrap-reverse;

  • nowrap：默认不换行

  • wrap：第一行在上方行

  • wrap-reverse：第一行在下方行

flex-flow 属性

flex-direction和 flex-wrap 属性的简写形式

语法：flex-flow: flex-direction flex-wrap;

justify-content 属性

定义了项目在主轴上的对齐方式

语法：justify-content: flex-start | flex-end | center | space-between | space-around;

  • flex-start：左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐
  • space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍

align-items 属性

定义项目在交叉轴上如何对齐

语法：align-items: flex-start | flex-end | center | baseline | stretch;

参数：

  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baselin: 项目的第一行文字的基线对齐
  • stretch(默认值)：如果项目未设置高度或设为 auto，将占满整个容器的高度

align-content 属性

定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍
  • stretch(默认值)：轴线占满整个交叉轴

12.4.2 项目的属性

属性 说明
order 定义项目的排列顺序，数值越小，排列越靠前，默认为 0
flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大
flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据这个属性，计算主轴是否有多余空间,它的默认值为 auto，即项目的本来大小
flex 是 flex-grow、flex-shrink、flex-basis 的简写，默认值为 0 1 auto，后两个属性可选。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)，建议优先使用这属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
align-self 允许单个项目与其他项目不一样的对齐方式，可覆盖 align-items 属性，默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

order 属性

定义项目的排列顺序，数值越小，排列越靠前，默认为 0

语法：order: integer;

flex-grow 属性

定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大

语法：flex-grow: number;

如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间，如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍

flex-shrink 属性

定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小

语法：flex-shrink : number;

如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。负值对该属性无效

flex-basis 属性

定义了在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为 auto，即项目的本来大小

语法：flex-basis: length | auto;

它可以设为跟 width 或 height属性一样的值(比如350px)，则项目将占据固定空间

align-self 属性

允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items属性，如果没有父元素，则等同于 stretch

语法：align-self: auto | flex-start | flex-end | center | baseline | stretch;

13 前端模块化

14 移动 Web 开发

15 移动 Web 特效开发

分类：

技术点：

相关文章：

  • 2021-06-06
  • 2022-01-19
  • 2021-08-29
  • 2021-12-31
  • 2022-12-23
  • 2022-12-23
  • 2022-01-02
  • 2021-11-17
猜你喜欢
  • 2021-12-19
  • 2021-12-12
  • 2021-12-15
  • 2021-12-31
  • 2021-10-15
  • 2022-12-23
  • 2021-11-08
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode