总结目录

  • 一、HTML5
  • 1.基本结构
  • 2.meta元素
  • 3.style元素
  • 4.link和base元素
  • 5.块级元素和行内元素
  • 6.pre、code、var、kbd和samp元素
  • 7.引用
  • 8.格式化
  • 9.列表
  • 10.表格
  • 11.表单
  • 12.input元素详解
  • 13.语义化布局

  • 14.video元素
  • 15.其他
  • 二、CSS3
  • 1.基础语法
  • 2.选择器
  • 3.背景
  • 4.边框
  • 5.设置元素尺寸和溢出
  • 6.轮廓和阴影
  • 7.显示类型 display 属性
  • 8.布局
  • 9.BFC：块级格式化上下文
  • 10.多列布局
  • 11.居中和单列、两列布局
  • 12.三列布局
  • 13.弹性盒布局
  • 14.栅格布局
  • 15.文本样式
  • 16.过渡、变形和动画
  • 17.滤镜、混合模式


一、HTML5

1.基本结构

  1. html网页可视化结构
<!DOCTYPE html>						<!--声明：表示该文档是用html5编写的-->
<html>
	<head>							<!--head元素是所有头部元素的容器-->
		<title>第一个程序</title>	<!--title指定网页的标题，显示在标签栏-->
	</head>
	<body>							<!--body包含了网页里面所有可见的页面内容-->
		<h1>Hello world</h1>		<!--h1表示标题的尺寸-->
		<p>I am what I play!</p>	<!--p元素定义一个段落-->
	</body>
</html>
  1. <head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
  2. <base>, <link>, <meta>,<script>, <style>，<title>标签可用在 head 部分，<title>是 head 部分中唯一必需的标签。
  3. <title>标签用于定义文档的标题，浏览器通常将其内容显示在浏览器窗口的标题栏或状态栏上。
  4. <img>标签用于向网页中嵌入一幅图像，有两个必需的属性：src 属性 和 alt 属性，同时它没有结束标签。

属性

值

描述

alt

text

指定图像的替代文本。

src

URL

指定显示图像的 URL。

width

px(pixels)、%

设置图像的宽度（像素或百分比）。

height

px(pixels)、%

定义图像的高度（像素或百分比）。

ismap

URL

将图像定义为服务器端图像映射。

longdesc

URL

指定包含长的图像描述文档的 URL。

usemap

URL

将图像定义为客户器端图像映射。

  1. <a>标签用于定义超链接，超链接可以让用户从一个网页跳转到另一个网页，最重要的属性是 href 属性，它指定了链接目标的 URL。

2.meta元素

  1. 解决网页乱码问题：<meta charset="UTF-8">
  2. 实现网页尺寸自适应：<meta name="viewport" content="width=device-width,initial-scale=1.0">
  3. <meta>标签永远位于<head> 标签内部，content 属性必须和 name 或 http-equiv 属性共存亡。

属性

值

描述

charset

character_set

指定 HTML 文档的编码。

content

text

指定与 http-equiv 或 name 属性相关的值。

http-equiv

content-type、default-style、refresh

①content-type：另一种声明 HTML 文档作用字符编码的方法（）。②default-style：指定页面优先使用的样式表。③refresh：以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个 URL 让浏览器载入。

name

application-name、author、description、generator、keywords、viewport

①application-name：当前页所属 Web 应用系统的名称。②author：当前页的作者名。③description：当前页的内容描述。④generator：用来生成 HTML 的软件名称。⑤keywords：当前页的关键词。⑥viewport：网页尺寸自适应。

3.style元素

  1. <style>标签用于为 HTML 文档定义样式信息，style 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 style 元素。
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5+CSS3基础学习总结</title>
    
    <style type="text/css">
        h1 {color: red}
        p {
        	color: blue;
        	background:black;			
		}					
    </style>			<!--如果有多个样式需用分号隔开-->

	<style>
		body {
			background-image:url("../img/...png")
			}
		h1{
			text-align:center;
			color:white;
			}
		p{
			text-indent:32px;
			font-size:16px;
			line-height:32px;
	</style>

</head>
<body>
    <h1>header 1</h1>
    <p>A paragraph.</p>
</body>
</html>
  1. media用来指定样式适用的媒体：
    screen、tty、tv、projection、handheld、print、braille、aural、all
  • all：将样式用于所有设备（默认）
  • aural：将样式用于语音合成器
  • braille：将样式用于盲文设备
  • handheld：将样式用于手持设备（小屏幕、有限的屏幕）
  • projection：将样式用于投影机
  • print：将样式用于打印预览或打印界面
  • screen：将样式用于计算机屏幕
  • tty：将样式用于电传打字机之类的等宽设备
  • tv：将样式用于电视机（低分辨率、有限的屏幕翻滚能力）
  1. "min-"前缀表示“不低于”指定的像素值；"max-"前缀表示“不大于”指定的像素值。
    <style media="screen and (min-width:512px) and (max-width:1024px)"> </style>

4.link和base元素

  1. <link>标签用于指定外部资源，link 元素最常见的用途是链接样式表，link 元素定义了 6 个属性，其中 rel 属性是必选的，它说明了当前文档与被链接资源之间的关系。
    <link rel="stylesheet" type="text/css" href="css/....css" >
  2. 链接网站图标：
    <link rel="icon" type="image/x-icon" href="../img/.....ico">
  3. <base> 标签用于设置相对 URL 的解析基准，让 HTML 文档中的相对链接在此基础上进行解析，<base>标签必须位于 <head> 标签内部，并尽量靠前，且只有开始标签。
  4. `````元素设置的基准URL只影响相对路径，对绝对路径没有影响。

属性

值

描述

href

URL

指定该 HTML 文档中所有相对链接的基准 URL。

target

_blank、_parent、_self、_top、framename

指定在何处打开超链接：①_blank：在新窗口中打开；②_parent：在当前的父窗口中打开，如果不存在父窗口，此选项的行为方式与 _self 等同；③_self：当前窗口打开（默认）；④_top：在整个窗口中打开framename：在指定的框架中打开

5.块级元素和行内元素

  1. 块级元素总是在新的行上开始，并尽可能地占据本行全部可用的宽度。包括：<address>、<article>、<aside>、<blockquote>、<canvas>、<dd>、<div>、<dl>、<dt>、<fieldset>、<figcaption>、<figure>、<footer>、<form>、<h1>~<h6>、<header>、<hr>、<li>、<main>、<nav>、<noscript>、<ol>、<output>、<p>、<pre>、<section>、<table>、<tfoot>、<ul>、<video>
  2. 行内元素不会灵气一行，它也只是占用必要的宽度。包括：<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<button>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<map>、<object>、<q>、<samp>、<script>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<time>、<tt>、<var>
  3. 其中，<span>元素是一个与p元素对应的行内元素，通常用于组合文档里面的行内元素，span 没有特定的样式，只有对它设置样式的时候，才会产生视觉上的表现。
  4. <br>元素作为一个简单的换行符
  5. 一般情况下，行内元素只能包含数据和其他行内元素，而块级元素可以包含行内元素和其他块级元素。
  6. HTML要求浏览器将连续的空白字符合并为一个空格

6.pre、code、var、kbd和samp元素

  1. pre元素用于定义预格式化文本，即保留文本在源代码中的样式，使得页面中显示的和源代码中的效果完全一致。
  2. HTML字符实体，字符编码以分号结尾。
  3. 等宽字体是指字体宽度相同的计算机字体，与此相对叫做比例字体，比例字体的可读性更强
  4. 语义化要求使用恰当语义的HTML元素，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。
  5. <code>元素：用于定义计算机代码片段，用于引用代码相关的文本。
  6. <var>元素：用于定义程序的变量。
  7. <kbd>元素：用于定义用户的输入。
  8. <samp>元素：用于定义程序的输出。

7.引用

  1. <q>元素：用于定义比较短的引用，浏览器通常会在引用的内容两侧添加引号。
  2. <blockquote>元素：用于引用一大段文本，浏览器会使用缩进的方式来显示该段文本，同时可以通过cite属性来指定引用的来源。
  3. <cite>元素：主要用于定义作品的标题。
  4. <abbr>元素：用于定义简称或者缩写，配合属性title可以指定该缩写的完整含义。
  5. <dfn>元素：用于表现定义中的术语（又称为技术名词，是指在特定专业领域中的一般概念的一个指称）。
  6. <address>元素：定义文档或者文章的作者拥有者的联系信息，可以是地址、邮箱、微信等。
  7. <ruby>元素与<rt>元素和<rp>元素搭配使用：其中<rt>元素用来标记注音符号，<rp>元素用来标记当浏览器不支持ruby元素时所显示的内容。
<ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby>
  1. <bdo>元素：修改默认的文本方向，dir属性默认为ltr（=left to right）。

8.格式化

  1. <strong>元素：突出某些文本很重要，通常以加粗的形式进行呈现。
  2. <b>元素：同样可以实现文本的粗体效果，但无语义。
  3. <em>元素：表示强调的语义，通常以斜体的形式进行呈现。
  4. <i>元素：同样可以实现文本的斜体效果，但无语义。
  5. <del>元素：表示delete，呈现为删除线；<ins>元素：表示insert，呈现为下划线。
  6. <s>元素：定义表示错误的内容，呈现为删除线。
  7. <u>元素：定义表示拼写错误的单词或者汉语中的专有名词，呈现为下划线。
  8. <mark>元素：起到标记文本的作用，默认呈现为黄色高亮。
  9. <sup>元素和<sub>元素：表示上标文本或下标文本，例如定义数学公式或化学方程式。
  10. <small>元素：使得指定的文本变小

9.列表

  1. 无序列表：使用<ul>元素来定义，列表中的每一项使用<li>元素包裹起来。
  2. 有序列表：使用<ol>元素来定义，列表中的每一项使用<li>元素包裹起来，通常可以设置相应属性。

属性

值

描述

reversed

reversed

规定列表顺序为降序。(9, 8, 7, …)

start

number

规定有序列表的起始值。

type

1、A、a、I、i

规定在列表中使用的标记类型。

  1. 列表中常用的两个CSS属性：
  • list-style-type：允许将列表的标志设置为方的、圆的、圈的以及无。
  • list-style-image：自定义列表标志
  1. 列表嵌套：多级列表
  2. 定义列表：使用<dl>元素来实现，同时配合<dt>元素和<dd>元素，其中：<dt>元素用于定义列表中项目部分的内容，而<dd>元素用来定义描述部分的内容。

10.表格

  1. <table>元素用来定义一个表格，其中：<tr>元素（=table row）用来定义表格里面的行，<th>元素（=table header cell）用来定义表头单元格，<td>元素（=table data cell）用于定义数据单元格。默认情况下浏览器会对表头单元格<th>元素的内容进行居中、加粗的处理。
  2. <caption>元素：默认在表格上加一个居中的标题，<caption>元素必须紧挨着<table>元素的开始标签。
  3. <thead>元素、<tbody>元素和<tfoot>元素：用于将表格更严密地分割为上中下三部分，分别对应表头、主体和表尾。
  4. <th>元素和<td>元素内部有一个colspan的属性，用于设置该单元格横跨的列数；同时有一个rowspan的属性，用于设置该单元格纵跨的行数。
  5. <colgroup>元素和<col>元素：用来批量设置表格中一列或者多列的样式，其中<col>元素有一个span的属性，表示要跨多少列数。
<colgroup>
	<col style="background:red">
	<col span="2" style="background:green">
</colgroup>

11.表单

  1. <form>元素：用于定义表单，表单是HTML中获取用户输入的手段,其中 method 属性用于指定将表单发送给服务器的 http 方法，有 get 和 post 两个值可以设定，分别对应 http 的 get 和 post 方法。区别在于：get 方法会将提交的数据整合到 url 里面，而 post 提交是随 http 消息的主体发送到服务器，不会在url里面显示出来。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>一个表单</title>
</head>
<body>
	<form action="welcome.php" method="post">
		名字：<input type="text" name="name"><br><br>
		邮箱：<input type="text" name="email"><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>
  1. type属性中 “text” 表示明文显示，“password” 表示不显示具体输入的字符内容。
  2. <button>标签用于定义一个按钮:

属性

值

描述

autofocus

autofocus

指定当页面加载的时候，按钮将获得焦点。

disabled

disabled

禁用按钮。

form

form_id

指定按钮所关联的表单 ID。

formaction

url

覆盖 form 元素的 action 属性。注释：该属性与 type=“submit” 配合使用。

formenctype

application/x-www-form-urlencoded、multipart/form-data、text/plain

覆盖 form 元素的 enctype 属性。注释：该属性与 type=“submit” 配合使用。

formmethod

get、post

覆盖 form 元素的 method 属性。注释：该属性与 type=“submit” 配合使用。

formnovalidate

formnovalidate

覆盖 form 元素的 novalidate 属性。注释：该属性与 type=“submit” 配合使用。

formtarget

_blank、_self、_parent、_top、framename

覆盖 form 元素的 target 属性。注释：该属性与 type=“submit” 配合使用。

name

button_name

指定按钮的名称。

type

button、reset、submit

指定按钮的类型。

value

text

指定按钮的初始值。注释：可由脚本进行修改。

  1. 自动填充：form 元素中有一个 autocomplete 属性，默认为 on，可强制设置为 off 取消自动填充，注意 input 中也有 autocomplete 属性可以设置，同时会覆盖外层 form 设置。
  2. 指定目标显示位置：form 元素中有一个 target 属性，与实现超链接的 a 元素类似，指定的是相应表单的页面应该往哪去显示，比如可以在新标签页将结果反馈出来target="_blank"。
  3. 设置默认值：为 input 元素的 value 属性指定值即为输出框的默认值。
  4. 自动聚焦：即表单一加载出来就自动聚焦到某个 input 元素的框内，要实现这个功能，只需要在需要自动聚焦的 input 元素里面加上一个 autofocus 即可。
  5. 禁用元素：在 button 标签或 input 标签中加入 disabled 属性。
  6. 禁止修改：input 元素中的 readonly 属性可以让用户无法修改输入框的值。
  7. <label>元素：可以实现隐式关联，提高与用户的交互体验，label 元素中有一个 for 属性，它的值指定另一个元素的 id 属性值。
  8. <fieldset>元素：可以将表单内的相关元素进行分组，浏览器将会以特殊的样式进行区分
  9. <legend>元素：可以为通过 fieldset 元素划分出来的模块定义说明性文字，必须作为 fieldset 的第一个子元素存在。
  10. <select>元素和<option>元素：
<label for="sex">性别：
	<select name="sex">
		<option value="male">男</option>
		<option value="female">女</option>
	</select>
</label><br><br>
  1. <optgroup>元素：当下拉列表的选项较多时，可以使用 optgroup 实现对选项的分组。

12.input元素详解

  1. 在HTML5中 input 元素（单标签元素，通过 value 赋值）的 type 属性可以有22个不同的值：
  • 按钮（3个）：submit、button和 reset
  • 单选框（1个）：radio（name属性必须相同才能实现选项互斥效果）
  • 复选框（1个）：checkbox
  • 时间和日期（5个）：time、date、month、week、datetime-local（获取本地的日期和时间）
<form action="welcome.php" method="get">
	<!--演示时间和日期-->
	<label>时间：<input type="time" name="time"></label>
	<br><br>
	<label>日期：<input type="date" name="date"></label>
	<br><br>
	<label>年月：<input type="month" name="month"></label>
	<br><br>
	<label>星期：<input type="week" name="week"></label>
	<br><br>
	<label>本地日期和时间：<input type="datetime-local" name="datetime-local"></label>
	<br><br>
	<input type="submit" value="提交">
</form>
  • 搜索框（1个）：search
    <label>任选其一：<input type="search" name="search"></label>
  • 颜色选择框（1个）：color
    <label>请选择颜色：<input type="color" name="color"></label>
  • 图像按钮（1个）：image
    <label>任选其一：<input type="image" src="......png" alt="......."></label>
  • 将 input 元素隐藏起来（1个）：hidden
    <label>无用按钮<input type="hidden" value="看不到" disabled></label>
  • 上传文件（1个）：file
    <label>请选择要上传的文件：<input type="file" name="file"></label> 注意：要成功上传文件，必须将表单设置为post，同时需要指定表单的enctype属性：enctype属性规定了在发送到服务器之前，应该如何对表单的数据进行编码，只有正确的数据，才能完整地传递给服务器。默认情况下，enctype="application/x-www-form-urlencoded"并不适用于文件传输，文件传输应设置为enctype="multipart/form-data"。同时应当注意指定上传文件的类型，使用 input 元素中的 accept 属性表示可以选择上传的文件类型，多个类型之间用逗号隔开，其中描述文件的类型使用文件的扩展名，例如accept=".jpg,.html,.avi"，如果想表示所有的音频文件，可以直接使用accept="audio/*"，以此类推，accept="video/*"表示所有的视频文件，accept="image/*"表示所有的图像文件。
<form action="upload.php" method="post" enctype="multipart/form-data">
	<!--限制上传文件的尺寸-->
	<input type="hidden" name="MAX_FILE_SIZE" value="1024">
	<label>请选择上传的文件：<input type="file" name="file" accept="image/*" multiple></label>		<!--multiple属性支持同时上传多个文件-->
	<br><br>
	<input type="submit" value="提交">
</form>
  • 限定数字输入（1个）：number，搭配 min、max 和 step（最小跨度）属性使用可以限定用户输入的数字范围。
  • 数值滚动条（1个）：range，同样可以搭配 min、max和 step 三个属性使用。
  • 邮箱、电话和网址（3个）：email、tel 和 url ，同时HTML5新增 pattern 属性，允许我们自己来指定匹配模式（正则表达式）
    注意：可以使用 input 元素中的 placeholder 属性对上传文件的要求进行说明，使用 required 属性强制用户对表单内容进行填写（必填项），使用 size 属性可以设置输入框的显示长度，使用 maxlength 属性限制。
  • 密码输入（1个）：password
  • 明文输入（1个）：text
  1. list 属性和 <datalist>元素：实现数据列表，搭配<option>元素使用实现用户表单选择
  2. <output>元素：输出计算结果（通过设置 id 属性值进行数据传递）
  3. <textarea>元素：接收多行文本输入
  4. wrap 属性：可以被设置为 soft、hard 和 off，指定在表单提交时，如何处理文本区域的自动换行：
  • soft 表示在页面渲染中对文本进行自动换行，但换行符（CR + LF）不提交
  • hard 表示在页面渲染中对文本进行自动换行，换行符（CR + LF）也会一并提交。如果元素的该属性设置为 hard，则必须同时指定 cols 属性。
  • off 表示在页面渲染中不对文本进行自动换行。

13.语义化布局

  1. HTML5提供的新语义元素定义了网页的不同部分：
  • header ->定义简介形式的内容
  • nav ->定义页面主导航功能
  • main ->定义主内容，主内容中可以有各种子内容区段（比如 article、section、div 等）
  • article ->定义独立的文章内容，与页面其他部分无关（比如一篇博文）
  • section ->定义文档中的节，与 article 类似，但 section 更适用于组织页面使其按功能分块
  • aside ->定义侧边栏（术语条目、作者简介、相关链接等）
  • footer ->定义页脚部分的内容
  • details ->定义额外的细节，默认为标题折叠状态，可添加属性 open 改为展开状态
  • summary ->定义 details 元素的标题
  1. <map>、<area>元素：<map>即在图片上建立映射，通过修改 name 属性指定图像映射的名字，之后给 img 元素的 usemap 属性填入对应的名称从而实现两者双向映射的关系。
<body>
	<img src="pic.jpg" alt="......." usemap="#book">
	<map name="book">
		<!--circle需要提供圆心的坐标以及圆的半径-->
		<area shape="circle" coords="784,241,163" alt="......" href="......" target="_blank">
		<!--poly需要提供多边形每个点的坐标-->
		<area shape="poly" coords="279,230, 867,549, 636,975, 46,655" alt="Book" href="....." target="_blank">
		<!--rect需要提供矩形左上角和右下角的坐标-->
		<area shape="rect" coords="710,818, 886,1008" alt="...." href=".....">
	</map>
</body>
  1. <picture>、<source>元素：提高指定图片资源的灵活度，<picture>元素包含了无数个<source>子元素，每个<source>元素对应一个不同的图片资源和匹配条件，浏览器可以根据不同的条件来选择最合适的图片进行显示。
<body>
	<picture>
		<source media="(min-width:1024px)" srcset="big.jpg">
		<source media="(min-width:512px)" srcset="small.jpg">
		<img src="normal.jpg" alt="...." style="width:auto;">
	</picture>
</body>
  1. <figure>、<figcaption>元素：将图片标记为插图

14.video元素

  1. 在网页中嵌入视频：<video width="宽" height="高" src="视频">添加视频无法正常播放时显示的内容</video>
  2. 播放控件和自动播放：使用 controls 属性设置播放控件，使用 autoplay 属性实现自动播放，均不需要属性值，填入关键字即可。
  3. 视频预加载：使用 preload 属性，默认情况值下为 auto ，可选择修改为 metadata（仅加载视频的元数据）、none（用户点击播放之前不会预加载任何数据）
  4. 封面：通过 poster 属性可以修改视频预览封面
  5. 循环：通过 loop 属性可以设置媒介文件播放后再次开始播放

15.其他

  1. <audio>元素：在网页中嵌入音频
  2. <track>元素：根据时间轴，为音轨添加文本（WebVTT格式）<track src="track.vtt" srclang="zh" label="中文字幕" kind="subtitles" default>
  3. <iframe>元素：嵌入一个网页，用于创建包含另一个网页的内联框架，HTML5中新增 sandbox 沙盒属性（遵从Secure By Default原则）保护网页，sandbox可以被设置为下面任意选项组合：
  • allow-forms ——允许进行提交表单
  • allow-script ——允许运行执行脚本
  • allow-same-origin ——允许同域请求
  • allow-top-navigation ——允许 iframe 能够主导 window.top 进行页面跳转
  • allow-popups ——允许 iframe 中弹出新窗口
  • allow-pointer-lock ——允许在 iframe 中可以锁定鼠标
  1. <meter>元素：一个范围内的值，仅用于已知最大和最小值的度量，比如：磁盘使用情况，查询结果的相关性等。
  2. <progress>元素：将数字以图像的形式来标志，呈现一个进度条，只有两个属性：max 和 value。

二、CSS3

1.基础语法

  1. CSS语法规则主要由两部分构成：选择器、声明、属性、值
p {color:red; font-size:14px}
  1. 在网页中插入样式表的三种方式：内联样式 > 内部样式表 > 外部样式表
  2. CSS没有限制空格的使用，但不要在属性值和单位之间留有空格
  3. 通常情况下CSS对字母大小写是不敏感的，但如果使用 class 或 id 选择器，应当与对应html文档里面的 class 和 id 的名称大小写一致

2.选择器

  1. 通常将选择器分为以下五类：基本选择器、复合选择器、伪类选择器、伪元素选择器、属性选择器
  2. CSS引入伪类和伪元素的概念是为了格式化文档树以外的信息，伪元素用于当已有元素处于的某个状态时，为其添加样式，伪元素用于创建一些不在文档树的元素，为其添加样式
  3. 基本选择器：
  • 通用选择器：*{ }
  • 元素选择器：以某个 html 元素作为选择器，比如 p 元素、span 元素、a 元素等
  • 类选择器：采用 html 的全局属性 class 来匹配指定的元素，表现形式为在类的名字之前加一个点号
  • id 选择器：使用 html 元素的 id 属性来进行定位，html 文档中元素的 id 属性的值必须是唯一的，表现形式为在 id 值的前面加一个 # 号
  1. 复合选择器：由两个或者多个基础选择器通过不同的方式进行组合
  • 交集选择器：由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 id 选择器。
    元素选择器 . 类选择器 | 元素选择器 # id选择器{....}
  • 并集选择器：通常也叫分组选择器或者群组选择器，由两个或两个以上任意选择器构成，对每个参与的选择器都有效，作用为把不同的选择器的相同样式抽取出来。
    选择器1，选择器2，选择器3，...{....}
  • 后代选择器：也叫包含选择器，用于选择包含在指定选择器匹配的元素中的后代元素，后代选择器之间使用空格进行分隔
    选择器1 选择器2 选择器3...{....}
  • 子元素选择器：与后代选择器类似，但只选择匹配元素中的直接子元素
    选择器1>选择器2{....}
  • 相邻元素选择器：如果需要选择紧接着某个元素后面的元素，并且两者具有共同的父元素，就可以使用相邻兄弟选择器
    选择器1+选择器2{....}
  • 通用兄弟选择器：类似相邻元素选择器，但通用兄弟选择器的选择范围更广，匹配的元素在指定的元素之后但位置无需紧挨着，只需在同一层级即可
    选择器1~选择器2{....}
  1. 伪元素选择器：
  • ::first-line选择器：用于匹配文本块的第一行内容，默认只对块级元素内的第一行内容有效，而对于像 a 元素这类行内元素，是不起作用的。
  • ::first-letter选择器：用来选中文本块的第一个字符
  • ::before 和 ::after 选择器：会生成新的内容（文本或图片均可）并插入到 html 中，设置 content 属性的值编辑即将插入的内容
a::before{
	content:url(....gif)
	}
a::after{
	content:"视频结尾："
	}
  • ::selection 选择器：用于匹配用户选中的部分文本
  1. 动态伪类选择器：会根据条件的改变来匹配元素
  • :link、:visited、:hover、:active、:focus：前四个一般用在 a 元素，a 元素也叫锚点元素，有四个状态，分别是 :link 链接未被访问的时候；:visited 链接被访问过的时候；:hover 当鼠标悬停在链接上方的时候；:active 鼠标摁下链接的那一刻（设置时需按照一定顺序）。:focus 选择器：当元素获得焦点的时候被选中
  1. UI伪类选择器：应用于系统与用户交互界面，主要集中在 Web 表单元素页面
  • :enabled 和 :disabled 伪类选择器：有些表单元素比如输入框、密码框、复选框都有 enabled 和 disabled，即可用和禁用两种状态，可使用这两种伪类选择器设置样式
  • :checked 伪类选择器：适用于单选框、复选框和下拉列表中的选项，可用利用这个伪类选择器来设置当选项被选中的时候的样式
  • :required 和 :optional 伪类选择器：适用于必选和可选的元素，配合表单 input 的 required 属性设置样式
  • :default 伪类选择器：设置默认元素的样式
  • :valid 和 :invalid 伪类选择器：设置用户输入是否合法的样式input:valid{....}
  • :in-range 和 out-of-range 选择器：当 input 元素的 type 属性设置为"number"的时候，可以指定 min 和 max 属性来设置数值的范围，可以使用这两个伪类选择器分别设置当用户输入的数值在范围内和不在范围内时的样式
  • :read-only 和 :read-write 伪类选择器：为只读、可读和可读、可写属性准备，input 元素默认都是可读可写的，如果加上 readonly 属性就变成了只读，如果将这两个伪类选择器应用在火狐浏览器需要在冒号后添加-moz-实现兼容
  1. 结构性伪类选择器：
  • :root 选择器：也叫根元素选择器，但因其总是匹配到 html 元素而不常用
  • :empty 选择器：总是匹配到没有定义任何内容的元素而不常用
  • :first-child & :last-child 选择器：用于匹配所有元素中的第一个（最后一个）子元素
  • :only-child & :only-of-type 选择器：如果该元素是其父元素里面的唯一子元素，则会被 :only-child 选中，:only-of-type 选择器匹配的是属于父元素下唯一类型的子元素
  • :first-of-type & :last-of-type 选择器：以上六个选择器均是用于匹配子元素的选择器
  • :nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n) 选择器：均可以设置索引值，匹配第 n 个元素
  1. 其他伪类选择器：
  • :target 选择器：用于为页面内锚点来设置样式（页面内锚点主要是为了实现在页面内部的跳转，需要用到 id 属性进行配合：先在某个元素设置好 id 属性值，然后只需要将 a 元素的 href 指定为“井号（#）加上需要跳转的页面元素的 id 值”就可以实现页面内跳转了）
  • :lang 选择器：用于匹配设置了 lang 全局属性的元素
  • :not(selector) 选择器：也叫否定选择器，可以对任意选择器进行取反操作
  1. 属性选择器：可以基于元素的属性进行匹配筛选

语法

说明

[attr]

匹配定义了attr属性的元素，不需要考虑属性值

[attr=“val”]

匹配定义了attr属性，且属性值为“val”字符串的元素

[attr^=“val”]

匹配定义了attr属性，且属性值以“val”字符串开头的元素

[attr$=“val”]

匹配定义了attr属性，且属性值以“val”字符串结尾的元素

[attr*=“val”]

匹配定义了attr属性，且属性值包含“val”字符串的元素

[attr~=“val”]

匹配定义了attr属性，且属性值以“val”字符串的元素（如有多个属性值，则只需要其中一个属性值匹配即可）

[attr|=“val”]

匹配定义了attr属性，且属性值由连字符进行分割（比如lang=“en-uk”），其中第一个字符串是“val”的元素

3.背景

  1. CSS3支持RGB、HEX、HSL、RGBA、HSLA五种方式来表现颜色
  2. RGB三原色：红色、绿色、蓝色（取值范围0~255）
  3. HSL是由色相、饱和度、亮度构成的，色相是色彩的基本属性（取值范围0~360，0是红色，120是绿色，240是蓝色），饱和度是个百分值，指色彩的纯度（0表示灰色，100%表示全彩色），亮度也是百分值，指色彩的明暗程度，亮度越高色彩越白
  4. RGBA与HSLA中的A均指透明度（0表示完全透明，1则表示完全不透明）
  5. 背景色：给 background-color 设置属性值即可
  6. 指定一张图像作为元素的背景图：
    background-image:url("cover.png"),url("bg.jpg");
  7. 使用 background-repeat 属性来调整图像的重复性：
  • 禁止重复图像：background-repeat:no-repeat;
  • （默认）水平和垂直方向同时重复图像，图像可能被裁减：background-repeat:repeat;
  • 水平方向重复图像，图像可能被裁减：background-repeat:repeat-x;
  • 垂直方向重复图像，图像可能被裁减：background-repeat:repeat-y;
  • 水平或垂直方向重复图像，通过调整图像之间的间距，确保图像不被裁减：background-repeat:repeat-space;
  • 水平或垂直方向重复图像，通过调整图像的大小，确保图像不被裁减：background-repeat:round;
  1. 使用 background-position 属性调整图像位置

值

说明

A（top、left、right、bottom、center）两两组合

如果仅规定了一个关键词，那么第二个值将是”center”。默认值：0% 0%。

B（x% y%）

第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。

C(xpos ypos)

第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。

  1. 浏览器会使用背景图像去覆盖背景颜色
  2. 使用 background-size 属性调整图像大小：

值

说明

length

设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

percentage

以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

no-repeat

背景图像将仅显示一次。

contain

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

  1. 使用 background-attachment 属性调整图像的附着方式：

值

说明

scroll

背景图片随页面的其余部分滚动。这是默认

fixed

背景图像是固定的

inherit

指定background-attachment的设置应该从父元素继承

local

背景图片随滚动元素滚动

  1. 使用 background-origin 指定元素背景图像开始绘制的位置：

值

说明

padding-box

背景图像相对于内边距框来定位。

border-box

背景图像相对于边框盒来定位。

content-box

背景图像相对于内容框来定位。

  1. 外边距：margin、边框：border、内边距：padding、内容：content
  2. 使用 background-clip 属性指定图像的绘制区域：

值

说明

border-box

默认值。背景绘制在边框方框内（剪切成边框方框）。

padding-box

背景绘制在衬距方框内（剪切成衬距方框）。

content-box

背景绘制在内容方框内（剪切成内容方框）。

  1. background 简写属性，可以在一条声明里设置所有的背景属性值。

4.边框

  1. 使用 border-style 属性设置边框的显示样式：

值

说明

none

定义无边框。

hidden

与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted

定义点状边框。在大多数浏览器中呈现为实线。

dashed

定义虚线。在大多数浏览器中呈现为实线。

solid

定义实线。

double

定义双线。双线的宽度等于 border-width 的值。

groove

定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge

定义 3D 垄状边框。其效果取决于 border-color 的值。

inset

定义 3D inset 边框。其效果取决于 border-color 的值。

outset

定义 3D outset 边框。其效果取决于 border-color 的值。

inherit

规定应该从父元素继承边框样式。

  1. 使用 border-width 设置边框宽度

值

描述

thin

定义细的上边框。

medium

默认值。定义中等的上边框。

thick

定义粗的上边框。

length

允许您自定义上边框的宽度。

inherit

规定应该从父元素继承边框宽度。

  1. 先有样式，设置完才设置 width 和 color，同样可以使用 border 属性来实现简写
  2. 为每一条边框设置样式、宽度和颜色：border-top-style、border-top-width、border-top-color、以此类推 border-left、border-right、border-bottom
  3. 定义圆角的边框（5个属性）：border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-left-radius（左下角）、border-bottom-right-radius（右下角）、border-radius
  4. 图像边框（6个属性）：border-image-source（指定图像来源）、border-image-slice（将图像进行切分，一张完整的图像会被切分成九份，不能加单位）、border-image-width（指定图像宽度）、border-image-outset（指定图像边框绘制的起始偏移位置，加单位）、border-image-repeat（指定图像的填充方式，默认值是 stretch 拉伸切分图）、border-image
  5. 将 margin 设置为 auto 可以实现在其父元素内水平居中的效果，但需注意对象必须是块级元素，且必须指定元素的宽度。
  6. 当纵向相邻的两个块元素同时设置了外边距时，外边距会发生塌陷，也称之为边界折叠

5.设置元素尺寸和溢出

  1. 设置属性 box-sizing 的值：content-box、padding-box、border-box、margin-box
  2. 设置元素的最小和最大尺寸：min-width、max-width
  3. 如果我们尝试去限制元素的尺寸，可能会碰到溢出的情况：overflow 属性，也支持单独处理水平方向或垂直方向的溢出问题，只需要单独设置 overflow-x 和 overflow-y 的属性值即可。

值

说明

visible

默认值。内容不会被修剪，会呈现在元素框之外。

hidden

内容会被修剪，并且其余内容是不可见的。

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

  1. 设置 resize 属性，控制是否允许用户来调整元素的尺寸：

属性

说明

none

默认值，用户无法调整元素的尺寸。

both

用户可调整元素的高度和宽度。

horizontal

用户可调整元素的宽度。

vertical

用户可调整元素的高度。

  1. 只有当 overflow 属性被设置为 scroll 或 auto 或者 hidden 的时候 resize 属性才能够生效

6.轮廓和阴影

  1. 轮廓（outline）：与边框基本类似，可以设置 outline-style、outline-color 和 outline-width 属性，与边框不同的是多了一个 outline-offset 属性，用于设置轮廓距离元素边框的一个偏移量
  2. 轮廓与边框最大的区别是轮廓并不属于元素尺寸的一部分，它不会影响到原有的页面布局，且轮廓无论如何都是方的
  3. 为元素添加阴影：设置 box-shadow 属性：

值

描述

h-shadow

必需。水平阴影的位置。允许负值，正数代表向右偏移，负数代表向左偏移

v-shadow

必需。垂直阴影的位置。允许负值，正数代表向右偏移，负数代表向左偏移

blur

可选。模糊距离，值越大边界越模糊

spread

可选。阴影的尺寸。

color

可选。阴影的颜色。

inset

可选。表示使用内部阴影

  1. 阴影的形状与边框一致

7.显示类型 display 属性

  1. 层叠样式表事实上有五层，优先级从高到低：内嵌CSS样式表、内部样式表、外部样式表、浏览器用户自定义CSS样式表、浏览器默认CSS样式表
  2. 每一个HTML元素都有一个默认的 display 属性值，它决定了这个元素应该以怎么样的形态展现在我们面前，display 属性决定了一个元素的显示角色，可以利用 display:block ;将行内元素设置为块级元素，从而可以设置元素的宽和高，也可以使用display:inline;将块级元素展示为行内元素
  3. 行内块元素：display:inline-block;，可以用来设置横向菜单栏
  4. 文本效果：text-align 属性

值

描述

left

把文本排列到左边。默认值：由浏览器决定。

right

把文本排列到右边。

center

把文本排列到中间。

justify

实现两端对齐文本效果。

inherit

规定应该从父元素继承 text-align 属性的值。

  1. display:none；会使内容消失
  2. visible属性：

值

说明

visible

默认值。元素是可见的。

hidden

元素是不可见的。

collapse

当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。

inherit

规定应该从父元素继承 visibility 属性的值。

8.布局

  1. 浮动float属性可以设置四个值：

值

说明 （索引中有详细介绍）

none

默认值。元素不浮动，并会显示在其在文本中出现的位置。

left

元素向左浮动。

right

元素向右浮动。

inherit

规定应该从父元素继承 float 属性的值。

  1. 浮动元素会脱离正常的文档流，浮动对于文本和行内元素的做法是被环绕，而对于块级元素会覆盖
  2. float 允许修改元素的显示样式
  3. 当把 clear 属性应用到一个元素上的时候，表示浮动到此为止，如果不希望一个元素被浮动的元素所覆盖，则可以使用该属性

值

说明

none

默认值。允许浮动元素出现在两侧。

left

在左侧不允许浮动元素。

right

在右侧不允许浮动元素。

both

在左右两侧均不允许浮动元素。

inherit

规定应该从父元素继承 clear 属性的值。

  1. 定位 position 属性（6个值）：

值

说明

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

sticky

粘滞定位（结合了 absolute 和 fixed 的定位方式）

inherit

规定应该从父元素继承 position 属性的值。

  1. 为避免因设置 position 属性导致元素脱离文档流产生的重叠现象，可以设置 z-index 属性修改元素的层叠顺序，z-index 的值允许负数，值越小，在层叠中的位置就越低，默认值为0

9.BFC：块级格式化上下文

  1. 在页面上搞一个独立的容器，位于BFC容器内的子元素并不会影响到外面的元素反之也如此
  2. 如果满足下面任意条件，就会自动创建一个新的BFC：
  • float 属性的值不为 none
  • position 属性的值不为 static 或 relative
  • overflow 属性的值不为 visible
  • display 属性的值为 flex，inline-flex，inline-block，table-cell 或 table-caption
  1. 利用不同BFC各自独立的特性可以解决 margin 塌陷、容纳浮动元素、阻止文本环绕的问题

10.多列布局

属性

说明

column-count

指定列数

column-width

指定列宽

columns

column-count 和column-width的简写

column-gap

指定列之间的间距

column-fill

指定内容在列与列之间的分布方式

column-span

指定元素横向能跨多少列

column-rule-color

指定列之间的颜色

column-rule-style

指定列之间的样式

column-rule-width

指定列之间的宽度

column-rule

column-rule-color、column-rule-style 和 column-rule-width 的简写

  1. 其中，column-fill 可以设置为 balance（均匀填充） 或 auto（优先填充左侧）

11.居中和单列、两列布局

  1. 行内元素水平居中：将 text-align 属性设置为 center
  2. 行内元素垂直居中：将元素的 line-height 属性设置为其父元素的 height 属性值即可
  3. 块级元素水平居中：设置 margin 外边距为 0 auto
  4. 块级元素垂直居中：将 position 属性值设置为 absolute
<head>
	<meta charset="utf-8">
	<title>居中演示</title>
	<style type="text/css">
		div{
			width:200px;
			height:200px;
			border-radius:20px;
			color:white;
			background-color:#cb4042;
			text-align:center;
			margin:auto;
			position:absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
		}	
		
		span{
			font-size:20px;
			line-height:200px;
		}
	</style>
</head>
<body>
	<div><span>中</span></div>
</body>
</html>
  1. 单列布局：一般分头部、内容、尾部三个部分
  2. 两列布局：侧边栏固定宽度、主内容自适应
<title>两列布局演示</title>
<style type="text/css">
	aside{
		width:200px;
		height:500px;
		background-color:pink;
		float:left;
	}
	main{
		height:500px;
		margin-left:200px;
		background-color:lightblue;
	}
</style>

12.三列布局

  1. 浮动大法：左列向左浮，右列向右浮，中间主内容设置左右margin来避开覆盖。注意：中间主内容的HTML代码必须放在左列和右列的后面且中间的主内容不能去指定它的宽度
  2. 绝对定位法：通过将左右两个边栏先脱离文档流并固定于左右两侧，中间的主内容设置左右margin来避开覆盖。
  3. margin 负值法实现三列布局：
  • 双飞翼布局
<head>
	<meta charset="utf-8">
	<title>三列布局展示</title>
	<style type="text/css">
		.container{
			width:100%;
			float:left;
		}
		.center{
			height:500px;
			margin:0 200px;
			background-color:cornsilk;
		}
		.left{
			width:200px;
			height:500px;
			float:left;
			margin-left:-100%;
			background-color:pink;
		}
		.right{
			width:200px;
			height:500px;
			float:left;
			margin-left:-200px;
			background-color:lightblue;
		}
	</style>
</head>
<body>
	<header></header>
	<main>
	<div class="container">
		<div class="center"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
	</main>
	<footer></footer>
</body>
  • 圣杯布局
<head>
	<meta charset="utf-8">
	<title>圣杯布局展示</title>
	<style type="text/css">
		body{
			min-width:600px;
		}
		main{
			padding:0 200px;
		}
		.column{
			float:left;
		}
		#center{
			width:100%;
			height:500px;
			background-color:cornsilk;
		}
		#left{
			width:200px;
			height:500px;
			margin-left:-100%;
			position:relative;
			right:200px;
			background-color:pink;
		}
		#right{
			width:200px;
			height:500px;
			margin-left:-200px;
			background-color:lightblue;
		} 
		header{
			height:30px;
			background:red;
		}
		footer{
			height:30px;
			background:red;
		}
	</style>
</head>
<body>
	<header></header>
	<main>
		<div id="center" class="column"></div>
		<div id="left" class="column"></div>
		<div id="right" class="column"></div>
	</main>
	<footer></footer>
</body>
</html>
  • 瀑布流布局
<style type="text/css">
	body{
		background:#AAFFEE;
		margin:10px;
	}
	#page{
		width:888px;
		margin:0 auto;
	}
	.col{
		column-count:3;
		column-gap:13px;
		column-fill:auto;
	}
	.pic{
		background:#FFF;
		padding:20px;
		margin-bottom:20px;
		box-shadow:0 0 5px rgba(0,0,0,0.5);
	}
	.pic img{
		width:260px;
	}
</style>

13.弹性盒布局

  1. 要形成弹性盒布局首先需要定义一个弹性容器，使用 display:flex（将整个弹性容器以块级的样式存在）或display:inline-flex（弹性容器以行内块的样式存在）实现
  2. 使用 flex-wrap 属性解决弹性元素溢出问题：

值

描述

nowrap

默认值。规定灵活的项目不拆行或不拆列。

wrap

规定灵活的项目在必要的时候拆行或拆列。

wrap-reverse

规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

  1. 使用 flex-direction 属性可以设置排列方式

值

描述

row

默认值，灵活的项目将水平显示，正如一个行一样

column

灵活的项目将垂直显示，正如一个列一样。

column-reverse

与 column 相同，但是以相反的顺序。

  1. flex-direction 属性与 flex-wrap 属性可以合并，合并后为 flex-flow 属性

值

描述

flex-direction

可能的值：row、row-reverse、column、column-reverse、initial、inherit，默认值是 “row”。规定灵活项目的方向。

flex-wrap

可能的值：nowrap、wrap、wrap-reverse、initial、inherit、默认值是 “nowrap”。规定灵活项目是否拆行或拆列。

  1. 弹性盒布局的对齐：
  • 主轴（规定了弹性元素排布的顺序）和垂轴（垂轴决定了在发生换行之后，第二行元素的添加方向）
  • 弹性元素在主轴上的对齐方式是通过 justify-content 属性来控制的

值

描述

flex-start

默认值。项目位于容器的开头

flex-end

项目位于容器的结尾

center

项目位于容器的中心

space-between

第一个弹性元素紧靠主轴起边，最后一个弹性元素紧靠主轴终边，其他弹性元素均匀排放，间隙留空

space-around

所有弹性元素均匀排放，元素之间的间距不折叠

space-evenly

所有弹性元素均匀排放，元素之间的间距折叠

  • 弹性元素在垂轴上的对齐方式是通过 align-items 属性来控制的

值

描述

stretch

默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

center

元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

flex-start

元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end

元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

baseline

元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

  • align-items （在弹性容器中设置）默认设置所有弹性元素的垂轴对齐方式，如果仅仅想改变单个元素的垂轴对齐方式可以使用 align-self（在弹性元素中设置）属性来实现，两者可选值相同
  • align-content 属性针对多行元素，用于指定每一行弹性元素在它的垂轴方向上的对齐方式

值

描述

stretch

默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

center

元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）

flex-start

元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。

flex-end

元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。

space-between

元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。

space-around

元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间相等。

  1. order 属性，弹性元素的显示顺序是和源代码中排布顺序是一致的，order 属性允许安排每一个元素的显示顺序，默认情况下所有弹性元素的 order 属性值都是0，这个值设置的越小，显示便会越靠前
  2. 弹性盒布局的弹性体现在当我们弹性容器设置的尺寸小于弹性元素的总尺寸的时候，浏览器会尽可能选择去压缩弹性元素的空间来阻止溢出，使用 flex-shrink （用于定义当弹性盒的空间不足以容纳所有弹性元素的时候，各个弹性元素被压缩的比例值）属性可以设置弹性盒的压缩比例，默认情况下每个元素的 flex-shrink 属性值为1
  3. 缩小弹性元素可以使用 flex-shrink 属性，同样，放大弹性元素可以使用 flex-grow 属性来定义当弹性容器中有多余空间的时候，各个弹性元素应该如何被放大。默认情况下元素的 flex-grow 属性都为0
  4. flex-basis 属性用来设置弹性元素在主轴上的初始尺寸，默认为 auto 即为元素本身的大小
  5. flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的一个简写，默认值为0，1，auto，该属性有两个快捷值，一个为 auto，相当于设置为1,1，auto；一个为 none，相当于设置为0,0，auto
  6. 两个相邻弹性元素的外边距并不会发生塌陷或折叠，且对一个弹性元素进行浮动操作是徒劳的

14.栅格布局

  1. 栅格布局也叫网格布局，与弹性盒布局有一定的相似性，栅格容器的子元素称之为栅格元素，但弹性盒布局是线性的一维布局，栅格布局是二维布局
  2. 将一个 display 属性设置为 grid 或者 inline-grid 时便创造了一个栅格容器
  3. grid-template-columns 和 grid-template-rows 属性定义的是纵向的栅格轨道，也就是对于栅格布局中“行”和“列”的定义，利用这个属性，既可以定义纵向的栅格轨道的数量，也可以指定每个纵向栅格轨道的宽度
  4. 栅格布局中一个区域由单个或多个单元格构成，可以由 grid-template-areas 属性来完成一个区域的定义，使用名称组合的形状来定义栅格布局的形状。注意：栅格中的每一行需要单独使用一个字符串来定义，不能将多个字符串合并成一个，并且设置单元的名称之后，浏览器会把名称相同的相邻单元格合并为一个区域，区域的形状目前必须为矩形
<style type="text/css">
	.item1{ grid-area:header;}
	.item2{ grid-area:nav;}
	.item3{ grid-area:main;}
	.item4{ grid-area:aside;}
	.item5{ grid-area:footer;}

	.grid-container{
		display:grid;
		grid-template-areas:
			'nav header header header aside'
			'nav main main main aside'
			'nav footer footer footer aside';
		grid-template-columns:200px 1fr 1fr 1fr 100px;
		grid-template-rows:80px 250px 160px;
		grid-gap（指定栅格元素的间距）:10px;
		background-color:lightblue;
		padding:10px;
	}
	.grid-container>*{
		background-color:pink;
		text-align:center;
		padding:20px 0;
		font-size:30px;
	}
</style>
  1. 如果想将某个区域留空，可以使用一个或者多个点号来表示
  2. 关键字：fr （为 fraction 的缩写），含义是片段
  3. 关键字：auto ，表示由浏览器来决定空间的长度
  4. min-content 和 max-content 关键字 ：min-content 表示尽量少占用空间，足够显示内容即可，max-content 表示尽可能占据内容所需的最大空间
  5. repeat(6,100px)：第一个参数表示重复的次数，第二个参数表示重复的内容
  6. auto-fill：有时候可能单元格的尺寸是固定的，但单元格的数量可以根据容器的尺寸的改变而改变，可以使用 auto-fill 使每一列填充的数量可以自动调整
  7. minmax(100px，300px)：CSS允许将轨道的尺寸设置为弹性值
  8. auto-fit：通过调整每一列的宽度来适配栅格容器的尺寸
  9. fit-content（arg）：翻译成伪代码即->minmax(max-content，max(min-content，arg))，在参数arg 指定的值和最小值之间找一个最合适的值
  10. 栅格布局的对齐方式中几个重要的属性：justify-content（指定栅格元素在水平方向的对齐方式，默认值为start）、justify-items（内容相对于栅格元素自身的对齐设置）、justify-self、align-content（指定栅格元素在垂直方向的对齐方式）、align-items（与 justify-items 属性类似，但方向由横向变成了纵向）、align-self
  11. place-content、place-items 和 place-self 属性为上述六种属性横纵成对的简写
  12. 栅格线：每一条栅格线都有自己的名称，且同一条栅格线可以有多个名称，给栅格线命名使用方括号，在方括号中写上自定义的名称，如果存在多个名称则使用空格隔开，使用以下几个属性可以将栅格元素任意地放到栅格容器的任意位置
  • grid-column-start：定义列开始的栅格线位置
  • grid-column-end：定义列结束的栅格线位置
  • grid-row-start：定义行开始的栅格线位置
  • grid-row-end：定义行结束的栅格线位置
  • 简写形式：grid-column：3/6、grid-row：3/6
  • 栅格元素不必填满整个容器
  • 栅格元素之间可以相互覆盖
  • 如果省略了结束的栅格线，那么结束栅格线使用下一条栅格线来代替
  • 修改重叠的顺序：利用 z-index 属性来设置元素在 z 轴上的高度，默认的值为 0
  1. 定义栅格元素的放置规则：
  • grid-auto-flow 属性：

值

描述

row

默认值。通过填充每一行来放置项目。

column

通过填充每一列来放置项目。

dense

放置项目以填充网格中的任何孔。

row dense

通过填充每一行来放置项目，并填充网格中的任何孔。

column dense

通过填充每一列来放置项目，并填充网格中的任何孔。

  • grid-auto-columns 和 grid-auto-columns 属性：进一步控制越界元素的尺寸

15.文本样式

  1. 文本对齐：使用 text-align 属性
  2. 保留多个空格：使用 white-space 属性，该属性允许定义空白字符的处理方式

值

描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的

标签。

nowrap

文本不会换行，文本会在在同一行上继续，直到遇到

标签为止。

pre-wrap

保留空白符序列，但是正常地进行换行。

pre-line

合并空白符序列，但是保留换行符。

  1. 设置文本的方向：
  • 使用 direction 属性，默认值为 ltr（即 left to right）
  • 使用 unicode-bidi 属性

值

描述

normal

默认。不使用附加的嵌入层面。

embed

创建一个附加的嵌入层面。

bidi-override

创建一个附加的嵌入层面。重新排序取决于 direction 属性。

  • 使用 writing-mode 属性

值

描述

horizontal-tb

让文本内容从左到右水平流动，从上往下换行

vertical-rl

让文本内容从上到下垂直流动，从右往左换行

vertical-lr

让文本内容从上到下垂直流动，从左往右换行

  1. 设置缩进：使用 text-indent 属性，它的值可以是具体的长度值也可以是相对于元素宽度的一个百分比
  2. 设置间距：
  • 字母之间的间距：letter-spacing
  • 单词之间的间距：word-spacing
  • 行高：line-height（推荐在设置时使用无单位的数值，表示基于该元素字体尺寸的一个倍数）
  1. 纵向对齐文本：使用 vertical-align 属性

值

描述

baseline

（默认）使元素与父元素的基线对齐

sub

使元素与父元素的下标基线对齐

super

使元素与父元素的上标基线对齐

text-top

使元素的顶部与父元素的字体顶部对齐

text-bottom

使元素的底部与父元素的字体底部对齐

middle

使元素的中部与父元素的字体中线对齐

使元素对齐到父元素基线的指定长度（正数向上；负数向下）

使元素对齐到父元素基线的指定百分比，该百分比是 line-height 属性的百分比（正数向上，负数向下）

top

使元素及其后代元素的顶部与整行的顶部对齐

bottom

使元素及其后代元素的底部与整行的底部对齐

  1. 创建文本阴影：使用 text-shadow 属性，可选值与 box-shadow 一致
  2. 控制断词：当一个单词的长度超过包含其元素的宽度出现文本溢出父元素的现象，可以将 word-break 属性设置为 break-all 即可
  3. 控制文本溢出：可以将 text-overflow 属性设置为 ellipsis，溢出的文本显示为省略号（只有当设置 white-space 为 nowrap，且设置 overflow 为 hidden 时该属性才生效）
  4. 装饰文本：使用 text-decoration，为文本添加上划线，删除线及下划线，是 text-decoration-line（指定所设线的种类，none表示没有，overline表示上划线，line-through表示删除线，underline表示下划线）、text-decoration-thickness（指定线的厚度）、text-decoration-style（指定实线、双实线、点线、虚线或者是波浪线）、text-decoration-color 四个属性的缩写
  5. 转换大小写：使用 text-transform 属性

值

描述

none

默认。定义带有小写字母和大写字母的标准的文本。

capitalize

文本中的每个单词以大写字母开头。

uppercase

定义仅有大写字母。

lowercase

定义无大写字母，仅有小写字母。

  1. 字体：设置字体通常使用 font 属性，它是 font-family（用于指定使用的字体，可以指定多个值）、font-size（设置字体大小）、font-weight（指定字体粗细）、font-style（设置字体是否倾斜）、font-variant（设置文本是否以小型大写字体来显示） 五个属性的缩写
  2. 使用 web 字体：使用 @font-face 来实现，先将字体文件放在服务器上，通过 src 属性来告诉浏览器文件的位置，用户在访问时，浏览器会自动下载该字体

16.过渡、变形和动画

  1. 过渡：设置 transition 属性

值

描述

transition-property

属性规定应用过渡效果的 CSS 属性的名称

transition-duration

属性规定完成过渡效果需要花费的时间

transition-timing-function

属性指定切换效果的速度（有预设的五种曲线及贝塞尔曲线、卡点步进 steps（5，start）函数）

transition-delay

属性指定何时将开始切换效果

  1. 2D旋转：rotate（）函数，参数为旋转的角度，传入正数值为向右旋转，传入负数值为向左旋转单位 deg 表示度数
  2. 3D旋转：rotateX（）、rotateY（）、rotateZ（）、rotate3d（）四个函数，前三个函数分别表示沿着XYZ轴进行旋转，第四个函数需要传入四个值，前三个值分别传入XYZ三个轴的旋转分量，第四个参数指定旋转的一个角度
  3. 2D移动：translateX（）函数负责X轴上的移动方向和距离，translateY（）函数负责Y轴上的移动方向和距离，缩写为 translate（）函数
  4. 3D移动在2D移动的基础上添加一个Z轴，指的是距离用户远近的一个移动，使用 translate3d（）函数实现
  5. 缩放：使用函数 scaleX（）和scaleY（）函数，参数指定对应的缩放比例，同样可以使用 scaleZ（）函数来支持Z轴上的缩放，另外可以使用scale3d（）函数实现同时控制三个轴的缩放
  6. 倾斜：只能在2D平面上实现，使用 skewX（）和 skewY（）函数
  7. 变形原点：设置 transform-origin 属性值可以改变变形原点，可以设置为长度值、百分比、关键字
  8. 3D变形方式：将父元素的 transform-style 属性值设置为 preserve-3d；可取消子元素变形时对父元素的依附性
  9. 修改视域：使用 perspective（）函数修改元素的视域，能够使得3D空间产生透视的效果，设置的参数越小，视角越深。同时CSS中还存在一个 perspective 属性，其定义的视域将应用在其所有的子元素上，默认的视域原点在元素的中间，可以通过 perspective-origin 属性修改
  10. 处理背面：指定当3D元素变形之后，背面朝向用户的时候是否去渲染它，使用 backface-visibility 属性来决定是否渲染元素背面，默认值为 visible，另一个值为 hidden
  11. 动画：

值

描述

@keyframes

定义关键帧规则

animation-name

指定动画的名称

animation-duration

指定动画播放的持续时间

animation-delay

指定动画开始前的延迟（支持负数）

animation-iteration-count

指定动画播放的次数

animation-direction

指定动画循环播放的时候是否反向播放

animation-timing-function

指定动画的速度曲线

animation-fill-mode

指定动画的填充样式

animation

动画属性的简写

<style type="text/css">
	@keyframes example{
		0%{
			background-color:red;
		}
		25%{
			background-color:yellow;
		}
		75%{
			background-color:blue;
		}
		100%{
			background-color:green;
		}
	div{
		width:200px;
		height:200px;
		animation-name:example;
		animation-duration:6s;
		animation-iteration-count:6;
	}
</style>

17.滤镜、混合模式

  1. 滤镜：使用 filter 属性

属性

说明

none

默认值，没有效果。

blur(px)

给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

brightness(%)

给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

contrast(%)

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。

grayscale(%)

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

hue-rotate(deg)

给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

invert(%)

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

opacity(%)

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

saturate(%)

转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

sepia(%)

将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

url()

URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：filter: url(svg-url#element-id)

  1. 混合模式：使用 mix-blend-mode 属性

属性

说明

darken

变暗

multiply

正片叠底

color-burn

颜色加深

lighten

变亮

screen

滤色

color-dodge

颜色减淡

overlay

叠加

soft-light

柔光

hard-light

强光

difference

差值

exclusion

排除

hue

色相

saturation

饱和度

color

颜色

luminosity

明度