HTML5+CSS3汇总0.1版本

HTML+HTML5

html,body{height:100%} 设置疑问

1 一个显示模式是block或inline-block元素没有主动设置宽高的话，浏览器会为其**自动分配**可使用的最大宽度（比如全屏宽度），但是不分配高度，高度由内容撑开。所以如果不给html 和body设置的话，其高度也是由子元素堆砌而成。
2 元素高度**百分比%**需要向上遍历父标签找到一个定值高度才起作用，**如果中途有个height:auto或者没由height属性**，则高度%无效,情况就是：子元素要靠父元素定高来让百分比起作用，父元素要靠子元素高度堆砌，谁也靠不着谁，死循环。
3 解决方案：a,给子元素一个定值高度；b，如果子元素一定要依赖父元素高度，那么可以给html设置100%高度，div的父元素html就用了定高，下面的子元素层层向上（百分比看父元素）。
~~~~~~~~
老师讲：视口是页面的初始包含块？html默认宽高跟着视口viewport走？视口是浏览器可视区域。
html只要不设置宽度，就永远根视口宽度保持一直，f12的时候可以参考html宽度。

背景色

解释链接：
https://www.zhangxinxu.com/wordpress/2009/09/%e5%af%b9html%e4%b8%8ebody%e7%9a%84%e4%b8%80%e4%ba%9b%e7%a0%94%e7%a9%b6%e4%b8%8e%e7%90%86%e8%a7%a3/
~~~~~~~~~~
1：当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的（当给body设置背景色的时候，而是body作为一个根结点起作用了，html标签未被激活，body就担当类似于根节点的节点，背景色被浏览器俘获）
2：一旦给html设置了背景色，则body标签的背景色变成了一个普通标签的背景色，此时，html标签背景色最顶级，被浏览器俘获成为背景色。
​

标签

html结构标签：

标签名	语义和功能	属性	单标签还是双标签
html	根标签		双标签
head	页面头部		双标签
body	页面主体		双标签

head 中的标签

标签名	语义和功能	属性	单标签还是双标签
title	标题栏标题		双标签
meta	设置网页元信息	charset： 设置字符集编码，推荐 utf-8	单标签

格式排版标签

标签名	语义和功能	属性	单标签还是双标签
h1 ~ h6	一级标题 ~ 六级标题		双标签
p	段落		双标签
hr	分隔线		单标签
br	换行		单标签
pre	内容原格式显示		双标签
div	没有语义		双标签

HTML5新增页面结构标签（最重要）

标签名	语义和功能	属性	单标签还是双标签
header	页头		双标签
footer	页脚		双标签
nav	导航		双标签
section	页面或文章中的一部分		双标签
aside	侧边栏		双标签
article	文章		双标签
main	主要内容		双标签

新增状态标签（了解）

标签名	语义和功能	属性	单标签还是双标签
meter	静态的度量		双标签
progress	动态的进度		双标签

meter 和 progress 什么区别（面试题）：

1. meter 表示静态的度量，如电池电量、磁盘容量、温度等
2. progress 表示动态的进度，如进度条   

---

---

html文本标签

标签名	语义和功能	属性	单标签还是双标签
em	表示强调，默认表现为斜体字		双标签
strong	表示强调，默认表现为粗体字		双标签
ins	表示增加的内容		双标签
del	表示删除的内容		双标签
sub	表示下标字		双标签
sup	表示上标字		双标签
span	没有语义		双标签
其他作为了解

新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	标记标签		双标签

可以用于搜索结果中关键字的标记！

---

---

htm img 标签

标签名	语义和功能	属性	单标签还是双标签
img	在页面中插入图片	src：设置图片地址。 border ：图片边框的宽度 alt：设置图片替代文字。 width：设置图片宽度。 height：设置图片高度（HTML img标签内直接设置宽度和高度值不需要html单位）	单标签
总结	1. alt 属性设置图片的代替文字，当图片无法正常加载，会显示代替文字。 2. 设置图片尺寸，如果只设置 width 后者 height，另一个根据比例自动缩放。（在后面的多列布局里面，其百分比会适应列宽，）	是可替换元素 详解：www.cnblogs.com/WindrunnerM…

html a标签

标签名	语义和功能	属性	单标签还是双标签
a	设置超链接	href：设置目标文件的地址。 target：设置目标文件在哪个窗口打开；_self:本窗口（默认值），_blank：新窗口	双标签

总结：

1. a 标签只有设置了 href 属性才能称为超链接
2. target 属性的默认值是 _self，目标文件会在本窗口打开；target 属性值设置为 _blank,目标文件在新窗口打开

0. 如果超链接的目标文件是浏览器能够打开的类型，点击超链接，直接打开目标文件

1. 如果超链接的目标文件是浏览器无法打开的类型，点击超链接，直接下载

   ③ 超链接的其他特殊功能

   <a href="mailto:fuming@atguigu.cn">发邮件</a>
   <a href="tel:18618176338">打电话</a>
   <a href="sms:18618176338">发短信</a>
   

   ④ href 的值是空的 点击刷新

    <a href="">点击刷新</a>
   

   锚点

   ① 如何设置锚点

   1. 给标签设置 id 属性，该标签就会变成锚点，id 属性的值就是锚点名。
   2. 任何一个标签都可以设置 id 属性，各个标签 id 属性值不能相同。
   

   ② 如何跳转到锚点

   <!-- 跳转到本页面指定的锚点 -->
   <a href="#锚点名"></a>
   
   <!-- 跳转到页面顶部 -->
   <a href="#"></a>
   
   <!-- 跳转到其他页面指定的锚点 -->
   <a href="页面地址#锚点名"></a>
   

   ---

   ---

   html列表

   标签名	功能和语义	属性	单标签还是双标签
   li	列表项		双标签
   ul	无序列表包裹标签		双标签
   ol	有序列表的包裹标签		双标签
   dl	定义列表包裹标签		双标签
   dt	定义列表项标题		双标签
   dd	定义列表项描述		双标签

ul:一组类似的内容排列在一起适合使用无序列表，如新闻列表、文章列表、导航条 等等
ol:一组相似的内容排列在一起且列表项有顺序，适合使用有序列表的场景：各种排行榜
1. li  标签里面可以包裹任何东西
2. li 标签必须被 ul 或者 ol 直接包裹 （建议： ul和ol 只能直接包裹 li）

列表样式

属性名	作用	属性值
list-style-type	设置项目图标的类型	none：去掉项目图标。 ...
list-style-position	设置项目图标位置	outside：在li外面，默认值。 inside：在 li 里面。
list-style-image	自定义项目图标	url(图片地址)
list-style	复合属性	没有顺序和数量要求

注意： 列表样式只能设置给 ol、ul、li 才能生效。

html表格标签

1. 表格标签必须严格按照规定进行包裹 table > caption(表格标题)、thead、tfoot、tbody > tr > td、th（根据情况可以讲th写在tbody里）
2. 如果 table 标签直接包裹 tr，浏览器会自动添加 tbody； 建议自己写 thead、tbody、tfoot
3. td 和 th 作为单元格，  /*内部可以包裹任意内容

给 table 标签设置如下属性：

width			设置表格宽度
height			设置表格高度
border			设置边框边框
cellspacing		设置单元格之间的距离
cellpadding		设置单元格边框与单元格内容之间的距离

单元格跨行和跨列（重要）

给 td 或者 th 设置如下属性：

rowspan		设置该单元格所跨的行数
colspan     设置该单元格所跨的列数

单元格样式设置

给 td 或者 th 设置如下属性：

align   设置单元格中的内容水平对齐方式，值： left(默认值)、center、right
valign	设置单元格中的内容垂直对齐方式，值： middle(默认值)、top、bottom

设置单元格宽高

给 td 或者 th 设置如下属性：

width	设置单元格所在的列的宽度
height  设置单元格所在的行的宽度

---

---

表格样式

属性名	作用	属性值
table-layout	设置列宽固定	auto：默认值。 fixed：固定。
border-spacing	设置单元格之间的距离	长度 0的时候会是两个单 元格边框和
border-collapse	设置相邻单元格边框合并	separate：不合并，默认值。 collapse：合并
caption-side	设置标题位置	top：表格上面，默认值。 bottom：表格下面
empty-cells	设置没有内容的单元格是否隐藏	show：显示。 hide：隐藏

1. 以上 5 个 CSS 属性，只有设置给 table 元素才能生效。
2. 想要成功设置单元格之间的距离 border-spacing, 单元格边框不能合并。
3. 想要隐藏没有内容的单元格 cempty-cells，单元格边框不能合并。

html表单

表单总体设置

<form action="https://www.baidu.com/s" target="_blank">
     <input type="text" name="wd">
     <input type="submit">
</form>

表单控件

① 文本输入框

<!-- 设置 type 属性值为 text 表示文本输入框-->
<input type="text">  <br>

<!-- type 属性的默认值就是 text -->
<input> <br>

<!-- 设置最大可输入度 -->
<input type="text" maxlength="6"> <br>

② 密码输入框

<input type="password"> <br>
<input type="password" maxlength="4"> <br>

③ 单选框

<input type="radio" name="gender"> 男  <br>
<input type="radio" name="gender"> 女  <br>
<input type="radio" name="gender" checked> 其他 <br>

1. 多个单选框必须设置相同的name值，才有单选的效果
2. 设置 checked 属性可以默认被选中，checked 属性不需要值

④ 复选框

<input type="checkbox">吃饭  <br>
<input type="checkbox">睡觉  <br>
<input type="checkbox" checked>敲代码 <br>
<input type="checkbox" checked>学习   <br>

设置 checked 属性可以默认被选中，checked 属性不需要值

⑤ 提交按钮

<input type="submit">
<input type="submit" value="登录">
<button type="submit">注册</button>
<button>注册</button>

1. input 标签实现的提交按钮，按钮上的文字，默认是“提交”，可以使用 value 属性设置按钮上的文字。
2. button 标签的 type 属性默认值就是 submit，默认就是提交按钮

⑥ 重置按钮

<input type="reset">
<input type="reset" value="reset">
<button type="reset">重置</button>

input 标签实现的重置按钮，按钮上的文字，默认是“重置”，可以使用 value 属性设置按钮上的文字。

⑦ 普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

⑧ 文本域

<textarea rows="10" cols="30"></textarea>

rows 设置默认显示多少行，影响文本域的高度
cols 设置默认显示多少列，影响文本域的宽度

⑨ 下拉选项

<select>
    <option>上海</option>
    <option>北京</option>
    <option>深圳</option>
    <option>广州</option>
    <option selected>新疆维吾尔自治区</option>
    <option>宁夏回族自治区</option>
    <option>伊犁哈萨克自治州</option>
</select>

给 option 设置 selected 属性，可以让该选项默认被选中， selected 属性不需要值。

Html5 中 input 标签的 type 属性新增的值

① 输入框类（5个）

<!-- 邮箱 提交表单的时候会进行验证 如果不填写不会验证 -->
<input type="email" placeholder="请输入邮箱">

<!-- 数字 -->
<input type="number" placeholder="请输入数字">
<input type="number" max="9999" min="1000" placeholder="请输入数字">
<input type="number" max="9999" min="1000" step="100" placeholder="请输入数字">
<input type="number" placeholder="请输入数字" step=".01">

<!-- URL 验证是否是URL，如果不填不会验证-->
<input type="url" placeholder="请输入网址">

<!-- 电话号码 不会验证，在移动端会弹出数字键盘-->
<input type="tel" placeholder="请输入电话号码">

<!-- 搜索框 -->
<input type="search" placeholder="搜索...">

② 范围选择框（1个）

<input type="range">
<input type="range" min="-100" max="100">
<input type="range" name="num" min="-100" max="100" step="10">

③ 颜色选择框（1个）

<input type="color">

④ 日期时间选择框类（5个）

<!-- 年月 -->
<input type="month">

<!-- 哪一年的第几周 -->
<input type="week">

<!-- 年 月 日 -->
<input type="date">

<!-- 时间 -->
<input type="time">

<!-- 日期+时间 年月日时分 -->
<input type="datetime-local">

form	表单包裹标签	action：设置提交地址。 target：设置在哪个窗口打开	双标签
input	各种类型的表单控件	type：表单控件的类型。 maxlength：设置最大可输入长度。 checked：设置被默认选中，无需值。 name：数据标识。 value：表单控件的值。 disabled：设置不可用	单标签
button	按钮	type：按钮的类型，默认值是 submit disabled：设置不可用	双标签
textarea	文本域	rows：默认显示的行数。 cols：默认显示的列数。 name：数据标识。 disabled：设置不可用	双标签
select	下拉选项的包裹标签	name：数据标识。 disabled：设置不可用	双标签
option	下拉选项	value：表单控件的值。 disabled：设置不可用	双标签
label	关联表单控件	for：与表单控件的ID值一致	双标签

label 标签的使用

<!-- 通过 label 的 for 属性与表单控件的 id 属性 -->
<label for="usernameInp">用户名：</label>
<input type="text" id="usernameInp">

<!-- label 标签将表单控件与描述文字包裹起来 -->
<label>
    <input type="radio" name="gender" value="male"> 男 
</label>
<label>
    <input type="radio" name="gender" value="female"> 女  
</label>
<label>
    <input type="radio" name="gender" checked value="else"> 其他 
</label>

1. 文本输入框、密码输入框、文本域、下拉选项使用 for 进行关联
2. 单选框、复选框使用 label 包裹进行关联
3. 提交按钮、重置按钮、普通按钮不需要label
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
a. input 标签 type 属性值： text、password、radio、checkbox、submit、reset、button...默认值是 text
b. button 标签 type 属性值： submit、reset、button，默认值是 submit

html表单控件属性

① name 属性

1. 给表单控件设置 name 属性，作为该数据的标识，后端根据 name 的值获取对应的数据
2. 单选框需要设置相同的 name 值才能有单选的效果
3. 提交按钮、重置按钮、普通按钮不建议设置 name 属性

② value 属性

1. 文本输入框、密码输入框，value 属性可以设置输入框中默认显示的文字
2. 单选框、复选框、value 属性设置提交到后端的数据内容
3. input 标签实现的提交按钮、重置按钮、普通按钮，value 属性设置按钮上的文字
4. option 标签，value 属性设置提交到后端的数据内容
   option 如果没有设置 value 属性，双标签中的文字会作为提交到后端的数据
5. button、textarea、select 没有 value 属性

③ disabled 属性

1. 任何表单控件，设置了 disabled 属性之后，该表单控件不可用； disabled 属性不需要值
2. select 标签设置 disabled，整个下拉框不可用
   option 标签设置 disabled，该选项不可选

**html5增加的表单控件属性

placeholder			设置提示文字，用于输入框、文本域。
required			设置必填或必选，不需要设置值
autofocus			自动获取焦点，不需要设置值
autocomplete		设置是否开启浏览器对输入框的记录  值： on（默认值）、off
pattern				使用正则表达式对表单输入框中的内容进行验证

form 标签新增属性

novalidate 不进行验证，该属性无需设置值。

---

---

框架标签

标签名	功能和语义	属性	单标签还是双标签
iframe	引入其他文件到当前页面	src：文件地址。 frameborder：是否有边框，0表示没有边框，其他数字表示有边框。 width：设置宽度。 height：设置高度	双标签

---

---

HTML 字符实体

空格			 
<			 &lt;
>            &gt;
&			 &amp;
以上常用牢记~~~
¥			&yen;
©			&copy;
×			&times;
÷			&divide;

---

---

HTML 全局属性

全局属性： 所有的标签都有的属性

name	设置名字
title	设置提示文字
lang	设置语言，值： cn、en
id		设置唯一标识
class	设置类名，CSS中使用
style   设置CSS样式
~~~~~~~~~~~~~~~~~~~~~~
html5新增全局属性:
hidden  隐藏元素，该属性不需要值

---

---

meta 元信息

<!-- 网页字符集编码 -->
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 页面刷新 -->
<!-- <meta http-equiv="refresh" content="3">     -->
<meta http-equiv="refresh" content="3;url=http://www.atguigu.com">

---

---

HTML5新增注释标签（注音标签）

标签名	语义和功能	属性	单标签还是双标签
ruby	注音包裹标签		双标签
rt	注音		双标签

<ruby>
    饕餮
    <rt>taotie</rt>
</ruby>

---

---

HTML5 音视频

音视频标签

标签名	功能和语义	属性	单标签还是双标签
video	视频	src：设置视频地址。 controls：显示控制条，不需要值。 autoplay：自动播放，不需要值。 muted：静音，不需要值。 loop：循环播放，不需要值。 preload：预先加载，不需要值。 poster：设置视频封面图片地址。 width：设置宽度。 height：设置高度	双标签
audio	音频	src：设置音频地址。 controls：显示控制条，不需要值。 autoplay：自动播放，不需要值。 muted：静音，不需要值。 loop：循环播放，不需要值。 preload：预先加载，不需要值。	双标签
source	加载音频或视频	src：音频或视频文件的地址。 type：音频或视频的类型	单标签

1. chrome 要求，只有静音设置自动播放才有效。
2. chrome 要求，音频不能自动播放

HTML5浏览器支持的音视频格式

① 视频格式

mp4
webm
ogg

② 音频格式

mp3
wav
ogg

---

---

HTML5 兼容性方案

设置元信息

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器（360是双浏览器，所以如此）-->
<meta name="renderer" content="webkit">

html5shiv.js 让IE8以及以下的浏览器支持H5新标签

<!--[if lt ie 9]>
	<script src="../js/html5shiv.js"></script>
<![endif]-->  条件注释判断让小于ie9版本的兼容

---

---

CSS+CSS3

CSS 中的长度单位

px		像素	
em		字体大小的倍数
%		百分比： 设置宽高参照父元素宽高，设置字体大小参照默认字体大小

CSS3 新增长度单位

rem			根元素字体大小的倍数，常用 ####
vw			视口宽度的百分之几，常用  ####
vh			视口高度的百分之几
vmax		视口宽高中较大的一个的百分之几
vmin		视口宽高中较小的一个的百分之几

CSS3 浏览器私有前缀

-webkit-	chrome浏览器、 Safari浏览器
-moz-		Firefox
-ms-		IE
-o-			Opearn

CSS中表示颜色的方式

① 使用颜色名表示颜色

1:颜色名
2rgb
3：十六进制

② 使用颜色名表示颜色

rgba:a 表示不透明度，取值范围 0 ~ 1，值越大越不透明，0 表示完全透明，1表示完全不透明.

hsl: h 色相、色调， 取值： 0 ~ 360;  s 饱和度 取值： 0% ~ 100%;  l 亮度 取值： 0% ~ 100%.

hsla:在 hsl 的基础上增加了不透明度

---

基本选择器（6个）

① 标签名选择器

标签名 {}

② 类名选择器

.类名 {} 
1. 多个元素可以设置相同的类名  
2. 一个元素可以设置多个类名

③ ID 选择器

#ID名 {}  
元素的ID名必须是唯一的！

④ 全局选择器

* {} 可以选择到页面中所有的元素

⑤ 交集选择器

选择器1选择器2 {}  满足条件1和n

⑥ 并集选择器

选择器1,选择器2，选择器3 { }  每个选择器都有效

层级选择器（4个）

① 后代元素选择器

选择器1 选择器2 { }

② 子元素选择器

选择器1 > 选择器2 { }

③ 后面的相邻兄弟元素选择器

选择器1 + 选择器2 { }  
1，选择器1相邻的兄弟元素且在其后
2，要满足选择器2
找到每个选择器1  并且每个紧邻的都选择上，除了第一个

④ 后面的通用兄弟元素选择器

选择器1 ~ 选择器2 { }
条件1：要是后面的兄弟元素
条件2：满足~后面的选择器

属性选择器（5个）

[attr]				选择具有attr属性的元素
[attr="val"]		选择attr属性的值是val的元素
[attr^="val"]		选择attr属性的值以val开头的元素
[attr$="val"]		选择attr属性的值以val结尾的元素
[attr*="val"]		选择attr属性的值中包含val的元素

/* 实际使用中， 属性选择器经常会与其他选择器进行组合（交集），注意属性选择器需要写在后面 */
img[width="200"] {}
div[title] {}
.item[alt] {}

伪类选择器（23个）

① 动态伪类选择器（5个）

:link				没有访问过的超链接
:visited			已经被访问过的超链接
:hover				鼠标悬停在上面的时候
:active				鼠标悬停在上面且鼠标按键按下
:focus				当元素获取焦点的时候

② 目标伪类选择器（1个）

:target  
结合id 锚点 使用   
     .page:target {
            color: #fff;
            background: #0ff
        }    
      <a href="#page01">第一部分</a>
      <div class="page" id="page01">

③ 语言伪类选择器 (1个，了解)

:lang(语言)

④ UI元素伪类选择器（3个）

:checked		被选中的单选框、复选框、下拉选项
:disabled		不可用的表单控件，了解
:enabled		可用的表单控件 设置样式，了解

⑤ 结构伪类选择器（12个）

:first-child			    兄弟元素中的第一个
:last-child					兄弟元素中的最后一个
:nth-child(n)				兄弟元素中的第n个	odd奇数个 even 偶数个---；也可以用n的倍数 或者4n+1表示
:nth-last-child(n)			兄弟元素中的倒数第n个
:only-child					没有兄弟元素

:first-of-type				兄弟元素中同标签名的第一个	
:last-of-type				兄弟元素中同标签名的最后一个
:nth-of-type(n)				兄弟元素中同标签名的第n个			
:nth-last-of-type(n)		兄弟元素中同标签名的倒数第n个
:only-of-type				兄弟元素中没有同标签名的元素

:root						根元素
:empty						选择到既没有文本内容也没有后代元素

⑥ 否定伪类选择器（1个）

:not(选择器)
 .box:not(:nth-child(4n)) {
            margin-right: 20px;
        }
条件1：第4n个元素   条件2：类目是box。

伪元素选择器（6个）

:first-letter / ::first-letter			选择到元素中的第一个字
:irst-line / ::first-line				选择到元素中的一行字
:before / ::before						动态创建子元素放在第一个位置
:after / ::after						动态创建子元素放在最后一个位置
::placeholder`							设置输入框中placeholder文字的样式
::selection							    设置被选中的文字的样式
考虑到兼容性问题：  写的时候可以写两种 ：  ：：

选择器的优先级（权重）

1. ID 选择器
2. 类选择器、伪类选择器、属性选择器
3. 标签名选择器、伪元素选择器
4. 全局选择器

!important > 行内式 > 各种选择器

!important 只设置给某一个 css 属性

---

CSS盒子模型

元素的显示模式

① 块级元素 block

一个元素的显示模式如果是块级（block），该元素称为块级元素。块级元素具有如下特点：

1. 块级元素独占一行
2. 块级元素可以设置宽度和高度

② 行内元素 inline

一个元素的显示模式如果是行内（inline），该元素称为行内元素。行内元素具有如下特点：

1. 行内元素不会独占一行
2. 行内元素无法设置宽度和高度


3网上说：行级元素宽度由内容撑开，但高度hieght只与其font-size与font-family有关

https://blog.csdn.net/weixin_44350171/article/details/111178146

1.行级元素的height与其内容无关（无论是文本内容还是元素内容）
2.行级元素的height与font-size有关；
3.字体font-size越大，行级元素height越大
4.行级元素的高略大于字体大小；(实际原因是字体实际渲染高度大于字体大小；)
5.字体font-family不同，也会对行级元素的高有影响，但不大；
(实际原因是每种字体的实际渲染高度与其字体大小的比值也不同，由字体设计者决定)；
6.当行级元素可视宽度(padding+border+width不为0时，其height才有值，否则height=0

③ 行内块元素 inline-block

一个元素的显示模式如果是行内块（inline-block），该元素称为行内块元素。行内块元素具有如下特点：

1. 行内块元素不会独占一行
2. 行内块元素可以设置宽度和高度

HTML 元素的默认显示模式

① 默认显示模式是 block 的元素：

格式排版标签： h1 ~ h6、p、hr、br、pre、div
列表标签： ul、ol、li、dl、dt、dd
表格标签： table、caption、thead、tbody、tfoot、tr
表单标签： form、option

② 默认显示模式是 inline 的元素：

文本标签： em、strong、sub、sup、del、ins、span
超链接标签： a
表单标签： label

③ 默认显示模式是 inline-block 的元素：

图片标签： img
表格标签： td、th
表单标签： input、button、select、textarea
框架标签： iframe

修改元素的显示模式

给元素设置 CSS 属性 display ，就可以修改元素的显示模式，该属性的值如下：

block			设置为块级
inline			设置为行内
inline-block	设置为行内块
none			设置为隐藏

总结

1. 如果显示模式分为三种： 行内、块级、行内块
2. 如果显示模式分为两种： 行内、块级； 行内块是行内的一种。
3. 块级元素中可以包裹块级、行内、行内块   行内元素中只能包裹行内元素、文字 （a标签除外）

行内元素或行内块元素在布局中的特点

父元素设置的文本属性作用于行内元素和行内块元素

① 让行内块元素或行内元素水平居中（在父元素中设置样式）

text-align: center;

② 让行内元素或行内块元素垂直居中（在父元素中设置行高）

1. 父元素中设置行高与高度一致
2. 行内块本身需要设置 vertical-align: middle;

行内元素或行内块元素之间的空白问题

① 元素之间的空白（左右）

产生原因：

写代码的时候，保证代码可读性，每个html标签后面有换行，换行会被识别为空格。

解决方案：

方案一： 每个标签后面不换行(可读性奇差 不推荐！！！)
方案二： 父元素设置字体大小为 0，再单独给行内块元素设置字体大小

② 底部的空白（图片的幽灵空白）

产生原因：

默认行内块元素的底部与文本的基线对齐，底部的空白就是文本基线与文本底线的距离

解放方案：

方案一： 给父元素设置字体大小为 0
方案二： 给行内块元素本身设置 vertical-align，值只要不是 baseline 都可以
方案三： 修改显示模式为块级（主要针对于图片img）

③ 文字内容个数不同的行内块元素水平排列无法对齐

产生原因：

行内块元素基线对齐： 多行文字最后一行文字与基线对齐，单行文字就是该行文字与基线对齐，没有文字元素的底部与基线对齐。

解决方案：

给行内块元素本身设置 vertical-align，值只要不是 baseline 都可以

---

CSS盒子模型深入讲解

盒子模型的组成

① 盒子模型的相关概念

1. 每个元素都可以比作成一个盒子，页面布局就是盒子的排列和堆砌
2. 盒子模研究的概念： 内容、内边距、边框、外边距

内容（content）： 内容区域是元素中最主要的区域，元素中的文本内容以及后代元素都显示在内容区域。

内边距（padding）： 是内容与元素边界（边框）的距离。

边框（border）： 在元素的边界上。

外边距（margin）： 是元素与父元素或其他元素的距离。

② 影响盒子大小的因素

1. 元素的总宽总高 = 内容宽高 + 内边距 + 边框宽度
2. 外边距主要影响元素（盒子）的位置

盒子中的内容区域

① 设置内容区域的宽高的 CSS 属性

CSS 属性名	功能	属性值
width	固定宽度	长度
max-width	最大宽度	长度
min-width	最小宽度	长度
height	固定高度	长度
max-height	最大高度	长度
min-height	最小高度	长度

② 设置内容宽高的规则

1. 设置最小最大宽高更多地用于限制默认计算的宽高
2. 最小最大宽高一般不与固定宽高一起设置

③ 元素的默认宽度

行内元素和行内块元素：

默认宽度和高度都是被里面的内容撑开

块级元素

默认高度被内容撑开
默认宽度根据父元素内容的宽度进行计算

块级元素的默认宽度的计算规则：

元素的默认总宽度 = 父元素内容宽度 - 该元素的左右外边距
元素的默认内容宽度 = 父元素内容宽度 - 该元素的左右外边距 - 该元素的左右边框 - 该元素的左右内边距

盒子的内边距 padding

① 相关 CSS 属性

CSS 属性名	功能	属性值
padding-left	左内边距	长度
padding-right	右内边距	长度
padding-top	上内边距	长度
padding-bottom	下内边距	长度
padding	复合属性

② padding 设置规则

padding 复合属性的设置规则：

/* 所有方向的内边距 */
padding: 20px;

/* 上下  左右  */
padding: 30px 15px;

/* 上 左右 下 */
padding: 15px 20px 10px;

/* 上 右 下 左 */
padding: 10px 20px 30px 40px;

padding 值设置的规则：

1. 使用百分比设置内边距，不论任何方向的内边距参照的都是父元素内容的  宽度
2. 内边距的值不能是负值

不同显示模式的元素设置内边距：

1. 块级元素、行内块元素可以完美设置各个方向的内边距。
2. 行内元素可以完美设置左右内边距，上下内边距设置不完美。

边框 border

CSS 属性名	功能	属性值
border-style	边框风格	none：没有边框。 solid：实线。 dashed：虚线。 dotted：点线。 double：双实线
border-color	边框颜色	颜色
border-width	边框宽度	长度（不能用百分比）
border	复合属性
border-left-style border-left-color border-left-width border-left border-right-style border-right-color border-right-width border-right border-top-style border-top-color border-top-width border-top border-bottom-style border-bottom-color border-bottom-width border-bottom

CSS3 新增边框属性

边框圆角

CSS 属性名	含义	值
border-top-left-radius	左上角	长度
border-top-right-radius	右上角	长度
border-bottom-left-radius	左下角	长度
border-bottom-right-radius	右下角	长度
border-radius		长度

单个圆角属性值的设置规则：

/* 右下角正圆圆角，半径是20px */
border-bottom-right-radius: 20px;

/* 右上角 x半径20px，y半径60px */
border-top-right-radius: 20px 60px;

复合属性的使用：

/* 同时设置4个脚 */
/* 使用百分比 默认参照的是border-box的宽高百分比 */ 
border-radius: 50%;
border-radius: 10px;

/* 左上和右下   左下和右上 */
border-radius: 20px 60px;

/* 左上 左下和右上 右下 */
border-radius: 10px 30px 60px;


/* 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;

/*
    左上角： x:10px  y:15px
    右上角： x:20px  y:25px
    左下角： x:20px y:25px
    右下角   x:10px  y：35px
*/
border-radius: 10px 20px/15px 25px 35px;

border-radius: 10px/20px;

外轮廓

CSS 属性名	含义	值
outline-style	风格	同 border-style
outline-width	宽度	长度
outline-color	颜色	颜色
outline	复合属性
outline-offset	外轮廓与边框的距离， 并不是 outline 的子属性	长度

外轮廓与边框的区别：

1. 外轮廓不是盒子的一部分，不影响盒子大小，不占位置
2. 外轮廓位置如果与边框重合，外轮廓显示在上面

外边距 margin

① 相关 css 属性

CSS 属性名	功能	属性值
margin-left	左外边距	长度
margin-right	右外边距	长度
margin-top	上外边距	长度
margin-bottom	下外边距	长度
margin	复合外边距	长度

② margin 设置规则

margin 复合属性的设置规则：

1个值： 4个方向一起设置
2个值： 上下 左右
3个值： 上 左右 下
4个值： 上 右 下 左

margin 值设置的规则：

1. 使用百分比设置外边距，不论任何方向的外边距参照的都是父元素内容的宽度
2. 外边距可以设置负值
3. 块级元素的左右外边距同时设置为 auto，该元素在父元素中水平居中
***:左 上外边距  元素自己动，右 下 外边距 元素挤旁边元素。

不同显示模式的元素设置外边距：

1. 块级元素、行内块元素可以完美设置各个方向外边距
2. 行内元素只能设置左右外边距，上下外边距设置无效

③ margin 塌陷

什么是 margin 塌陷？

1、 第一个子元素的上外边距和最后一个子元素的下外边距，会塌陷到父元素上  （原理没弄清楚）
2、 只有块级元素的上下外边距才会发生塌陷。

如何解决 margin 塌陷？

1. 方案一： 给父元素设置边框
2. 方案二： 给父元素设置内边距
（上面两种方案的原理就是，既然设置了，就默认为需要强调这个设置 要显示出来，所以就不会塌陷 合并到一起了）
3. 方案三： 给父元素设置 overflow:hidden;（触发BFC）

④ margin 合并

什么是 margin 合并？

1. 上面兄弟元素的下外边距与下面兄弟元素的上外边距会合并，两者之间的距离取较大的外边距
2. 只有块级元素的上下外边距才会发生合并

如何解决 margin 合并？

不需要解决！ 在实际应用中 只设置一个元素的外边距即可。

隐藏元素

display 属性：

display: none;

彻底隐藏元素，不占据任何位置！

visibility 属性：

visibility: hidden;

元素虽隐藏但是仍然占据位置！

CSS3 新增盒子相关样式

① display 介绍

display 属性的值非常多，可以将任何元素设置成任何形态
详情移步CSS参考手册

② box-sizing 属性

规定 width 和 height 的设置规则，属性值如下：

content-box		默认值，width和height设置内容的宽高
border-box		width和height设置总宽高 （此时设置内边距边框等 盒子总体不会变化，会压缩内容宽高）

③ 盒子阴影 box-shadow

该属性值的设置规则如下：

1. 值中可以包含2 ~ 4 个长度，分别表示 水平偏移位置、垂直偏移位置、模糊值、外延值；长度必须按照顺序书写
2. inset关键字和颜色可以放在长度的前面或者后面
3. 可以给元素设置多阴影，多个阴影之间使用逗号分隔

/* 使用两个长度设置阴影的偏移位置 */
box-shadow: 5px 10px;
box-shadow: -5px 10px;
box-shadow: -5px -10px;

/* 设置偏移位置的同时设置颜色 */
box-shadow: 5px 5px pink;
box-shadow: yellow 5px 5px;

/* 设置阴影的模糊值 */
box-shadow: 5px 5px 15px;
box-shadow: 5px 5px 5px #ccc;
box-shadow: #099 5px 5px 15px;

/* 设置外延值 */
box-shadow: 5px 5px 15px 10px;
box-shadow: 5px 5px 15px 10px yellow;
box-shadow: yellow 5px 5px 15px 10px ;

/* 内阴影 */
box-shadow: 5px 5px inset;
box-shadow: -5px -5px inset;
box-shadow: inset 5px 5px 15px;
box-shadow: inset 5px 5px 15px yellow;
box-shadow: inset #f00 5px 5px 15px;


/* 多阴影 */
box-shadow: 5px 0 10px #f00, 
            0 5px 10px #ff0, 
            -5px 0 10px #080,
            0 -5px 10px #099;

④ 不透明度 opacity

1. 取值 0 ~ 1之间， 值越大越不透明
2. 0 表示完全透明，1 表示完全不透明

opacity 指定一个元素的不透明度。opacity属性指定了一个元素后面的背景的被覆盖程度。

---

常用 CSS 属性总结

字体样式

属性名	作用	属性值
font-size	设置文字大小	长度
font-weight	设置文字粗细	normal：正常。 lighter：细。 bold：粗。 100~900之间整百的数字，600以及以上表示粗
font-style	设置斜体字	normal：正常。 italic：斜体字。
font-family	设置字体族科	字体名称，字体列表
font	复合属性	如下👇👇👇👇

注意： chrome 浏览器规定文字大小最小是 12px！ 默认16px

① 字体族科 font-family

字体族科的设置：

font-family：宋体;
font-family: "Microsoft YaHei";

设置字体列表：

font-family: "Microsoft YaHei",黑体,宋体,sans-serif;
font-family: "Microsoft YaHei",黑体,宋体,serif;

衬线字体和非衬线字体：

衬线字体 serif：字体笔画粗细不一致，如宋体、楷体、仿宋体等
非衬线字体 sans-serif：字体笔画粗细一致，如微软雅黑、黑体、兰亭黑、思源黑体等

② 复合属性 font

/* 至少需要设置字体大小和字体族科 */
font: 14px 宋体;
font: 12px 楷体,宋体,"Micrsoft YaHei",serif;

/* 同时设置粗体字、字体大小、字体族科 */
font: 800 14px "Micrsoft YaHei",sans-serif;

/* 同时设置斜体字、字体大小、字体族科 */
font: italic 14px "Micrsoft YaHei",sans-serif;

/* 同时设置斜体字、粗体字、字体大小、字体族科 */
font: italic 800 14px "Micrsoft YaHei",sans-serif;
font: 800 italic 14px "Micrsoft YaHei",sans-serif;

③ 子属性和复合属性的关系

1. 复合属性写在子属性的后面，覆盖掉子属性；即使复合属性中没写对应的值也会用默认值覆盖。
2. 子属性写在复合属性的后面，会覆盖掉子属性对应的那个值。

文字颜色

属性名	作用	属性值
color	设置文字颜色	颜色

文本样式

属性名	作用	属性值
letter-spacing	设置字间距	长度(不能用百分比)
word-spacing	设置词间距	长度(不能用百分比)
text-indent	设置首行缩进	长度
text-decoration	设置文本修饰线	none：无修饰线。 underline：下划线。 overline：上划线。 line-throuth：删除线
text-align	设置元素中文本水平对齐方式	left：靠左对齐，默认值。 right：靠右对齐。 center：居中对齐。
vertical-align	设置行内或行内块元素与同行文本如何对齐	baseline：基线对齐，默认值。 top：顶线对齐。 bottom：底线对齐。 middle：中线对齐。 sub：下标字效果。 super：上标字效果。 长度：与文字基线距离，可以是负值。
line-height	设置行高	长度

① vertical-align

该属性有如下作用：

1. 设置行内元素或行内块元素与同行文本的对齐方式，注意需要直接将样式设置到行内或行内块元素上。（谁高度高谁就是参照物？）
2. 设置上标字sup和下标字sub
3. 设置单元格（td、th）中文本垂直对齐方式

② line-height 设置行高

行高的概念：

1. 什么是行高?
   上一行的中线与下一行中线的距离（line-hight减去font-size等于行距）
  
2. 什么是行距？
   上一行的底线与下一行的顶线之间的距离
   
3. 行高与行距的关系
   设置行高能够影响行距

使用行高实现元素中的一行文字垂直居中，满足一下条件：

1. 只有一行文字
2. 行高与高度一致 line-height=height

line-height 是 font 的子属性：

/* 
    40px 表示文字大小
    200px 表示行高
*/
font: 40px/200px "毛体字体";

CSS3 新增文本属性

CSS 属性名	含义	值
text-align-last	最后一行文本水平对齐方式	start：起始方向对齐，默认值。 end：结束方向对齐。 justify：两端对齐。 left：左对齐。 right：右对齐。 center：居中对齐。
text-decoration-line	文本修饰线类型	none：无修饰线。 underline：下划线。 line-throuth：删除线。 overline：上划线
text-decoration-style	文本修饰线风格	solid：实线。 dotted：点线。 dashed：虚线。 double：双实线。 wavy：波浪线
text-decoration-color	文本修饰线颜色	颜色
text-decoration	复合属性	值没有顺序和数量要求
white-space	设置文本显示格式	normal: 默认值。 pre：原格式显示。 pre-wrap：在pre基础上增加自动换行。 pre-line：在normal基础上识别换行。 nowrap：强制一行显示。
text-overflow	设置文本溢出方式	clip：默认值。 ellipsis：省略号。
text-shadow	文本阴影

单行长文本显示省略号：

 /* 强制显示在一行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;

text-shadow 文本阴影的设置规则：

/* 两个长度阴影偏移位置 */
text-shadow: 2px 2px;
text-shadow: 5px 5px #ccc;
text-shadow: #ccc -5px -5px ;

/* 设置模糊值 */
text-shadow: 5px 5px 5px#ccc;

/* 多层阴影 */
text-shadow:1px 1px #bbb, 
            2px 2px #aaa, 
            3px 3px #999, 
            4px 4px #888, 
            5px 5px #777; 

---

CSS3WEB字体

web 字体基本语法

/* 引入Web字体 给web字体取名字*/
@font-face {
      font-family: "FZSJ-WSMQSJW";
      src: url("FZSJ-WSMQSJW.woff2") format("woff2"),	/* chrome、firefox opera  safari  edge 最佳格式 */
           url("FZSJ-WSMQSJW.woff") format("woff"),	/* chrome、firefox opera  safari  IE9+ 最佳格式 */
           url("FZSJ-WSMQSJW.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
           url("FZSJ-WSMQSJW.eot") format("embedded-opentype"),  /* IE9兼容模式 */
           url("FZSJ-WSMQSJW.svg") format("svg");	/* iOS 4.1- */
      font-weight: normal;
      font-style: normal;
}
/*使用web字体*/
.aritcle {
    font-family: "FZSJ-WSMQSJW";
}

字体格式的转换工具：

• www.fontsquirrel.com/tools/webfo… FontSquirrel在线工具
• www.fontke.com/tool/fontfa… 字客网

定制字体

字体定制工具：

• www.iconfont.cn/webfont?spm… 阿里Web字体
• www.youziku.com/ 字体库网站
• www.ziti163.com/webfont/cre… 字体网

字体图标

① 阿里图标

地址： www.iconfont.cn/

② font-awesome

地址：fontawesome.dashgame.com/

③ 字体图标制作工具 icoMoon

地址： icomoon.io/app/#/selec…

---

CSS背景样式

属性名	作用	属性值
background-color	设置背景颜色	颜色
background-image （有精灵图知识点）	设置背景图像地址	url(图片地址)
background-repeat	设置背景图像重复方式	repeat：重置，重复。 repeat-x：只在水平方向重复。 repeat-y：只在垂直方向重复。 no-repeat：不重复。
background-position	设置背景图像在元素上的位置	关键字方式、坐标方式、百分比方式
background-attachment	设置背景图像固定	scroll：默认值。 fixed：固定。
background	复合属性	多个值使用空格隔开

① 背景颜色

1. 元素默认的背景颜色是透明色，默认值是 transparent
2. 给 body 元素设置背景色就是给整个页面设置背景色（前提是没有给html设置）

---当html不设置背景时，body的背景将作为整个浏览器的背景色，而不是body标签自己的背景色。当设置html背景色后，body的背景色就变成了body自己的背景色，此时html的背景色将被浏览器获取成为浏览器的背景色。

① 设置背景图像的位置 background-position

使用关键字设置属性值：

/* 
    水平位置： left、right、center
    垂直位置： top、bottom、center
*/

/* 设置两个关键字 */
background-position: left top;
background-position: right bottom;
background-position: bottom left;

/* 只设置一个关键字 另外一个默认是 center */
background-position: left; 
background-position: bottom;
background-position: center;

使用长度指定的坐标设置属性值：

/* 
    坐标原点： 元素的左上角
    x 轴方向： 从左到右
    y 轴方向： 从上到下
    坐标设置的是图像左上角的位置
*/

/* 使用两个长度表示坐标 */
background-position: 12px 50px;
background-position: 300px 100px;

/* 长度和关键字混合使用 */
background-position: 100px bottom;
background-position: right 20px;

/* 只使用一个长度，该长度表示x坐标， 垂直位置默认取 center */
background-position: 200px;

使用百分比设置图像属性值：

/* 
    1. 第一个百分比参照元素宽度，第二个百分比参照元素高度
    2. 根据百分比找出图像上的位置，再找出元素上的位置，两个点重合
*/
background-position: 50% 50%;
background-position: 100% 100%;
background-position: 100%;
background-position: 99% 99%;

background-position 的两个子属性：

background-position-x: 100px;
background-position-y: bottom;

② 背景图像固定 background-attachment

1. 实现背景图像固定效果： 背景图像不随着元素滚动； 元素滚动的时候能够显示背景图像不同的部分
2. 设置了背景图像固定之后，背景图像定位的坐标系不再是元素，而是视口

③ 背景复合属性 background

background 复合属性的值没有顺序要求，也没有数量要求！

---

CSS3 新增背景属性

新增属性

① background-origin

该属性可以设置背景图像定位的原点，有如下值：

padding-box		原点在内边距上，默认值
content-box		原点在内容上
border—box		原点在边框上

② background-clip

该属性可以设置背景图像的显示区域，有如下值：

border-box		边框以及以内有背景图，默认值
padding-box		内边距和内容上有背景图
content-box		只有内容上有背景图
text			只有文字上有背景图，需要加 -webkit- 私有前缀

③ background-size

该属性可以设置背景图片尺寸，值的设置规则如下：

1. 设置两个长度，分别表示图片的宽度、高度
2. 使用百分比作为长度，宽度参照元素宽度，高度参照元素高度
3. 如果只设置了一个长度，该长度表示图片的宽度，图片的高度根据比例自动计算
4. contain 自动调整图片大小适应元素，优先保证图片显示完整
5. cover 自动调整图片大小适应元素，保证元素上每一部分都有背景图，              常用   常用   常用

background 复合属性

新增了 3 个子属性，复合属性规则如下：

1. 如果值中存在 content-box、padding-box、border-box
   如果只有一个值，表示同时设置 background-origin 和 background-clip
   如果有两个值，第一个是 background-origin，第二个是 background-clicp
2. background-position 和 background-size 的值必须写在一起，使用 / 分隔
   前面是 background-position， 后面是 background-size

 background: #ccc url(../images/31.jpg) no-repeat content-box padding-box 0 0/cover;

多背景图

background: url(../images/bg-tl.png) no-repeat left top,
            url(../images/bg-tr.png) no-repeat right top,
            url(../images/bg-bl.png) no-repeat left bottom,
            url(../images/bg-br.png) no-repeat right bottom,
            url(../images/bg05.jpg) no-repeat center/cover;

如果背景图位置有重合，先写的背景图显示在上面！！！

CSS3 渐变

CSS 中，渐变被作为图片使用，需要相关的CSS属性进行配合，如 background-image。

线性渐变

linear-gradient(渐变方向， 颜色列表)

1. 渐变方向
   ① 使用关键字设置
     to left、to top、to left top、to right bottom ...
   ② 角度
     0deg ~ 360deg
     
2. 颜色列表
   每个颜色可以指定位置，位置使用长度表示
   如果颜色不指定位置，各个颜色的位置平均分布
   （假如指定位置为50px，则50px之前都是纯色，然后开始渐变，默认是从一开始就渐变
   颜色后面加距离的意思是：到这个距离时，该更换下一个颜色了，例如，30px-100px之间是黄色，100px-150px为粉色，依次类推。

但我要是最后位置放在300px那里，但是盒子只有200px，就会出现裁剪，只能到200px那里，剩下的都被裁剪了。在超出范围之前，只能显示这么多渐变。
~~~~自己找的资料：
color stop：https://www.jianshu.com/p/58b340a037ea
添加色标后，背景会从第一个颜色过渡到第二个颜色，再从第二个颜色过渡到第三个颜色，直到渐变的最后一个颜色为止。
乐总说：to right ，red30px， green30px， blue 40px， 总100px的话，green30px的起点就是30 然后向右，都是接着的。

、

径向渐变（了解）

radial-gradient(半径 at 圆心，颜色列表)

重复渐变

repeating-linear-gradient()
repeating-radial-gradient();

样式继承和默认样式

样式继承

1. 后代元素可以继承祖先元素上设置的样式
2. 那些样式可以继承？
   字体样式： font-size font-family font-weight font-style font
   文字颜色： color
   文本样式： text-align text-indent text-decoration line-height letter-spacing word-spacing
   注意： vertical-align 该样式不可以被继承

默认（自带）样式

body: 自带8px的外边距
h1~h6：自动上下外边距、粗体字、字体大小
p：自带上下外边距
ul、ol：自带左内边距、上下外边距
a: 自带下划线、文字颜色、鼠标光标
....

继承的样式、默认（自带）的样式、直接设置的样式

直接设置的样式 > 默认（自带）的样式 > 继承的样式

---

---

浮动

浮动的简介

1. 浮动最初实现文字环绕效果
2. 现在浮动是主流的页面布局方式之一

元素浮动之后的特点

1. 元素浮动之后会脱离文档流，浮动的元素如果与文档流中的元素位置发生重叠，浮动元素显示到上面。
2. 多个兄弟元素全部设置浮动，会水平排列；父元素宽度不够，自动换行。
3. 不论元素原来的显示模式是块级、行内、行内块，设置浮动之后就是浮动元素，独立于原来的显示模式，拥有自己的显示特点
4. 浮动元素的显示特点：
   ① 浮动元素默认的宽高被内容撑开
   ② 浮动元素可以完美地设置宽高、内外边距
   ③ 没有外边距的塌陷和合并（区别于块级元素）
   ④ 不会被父元素作为文本区处理（区别去行内块元素、行内元素）

浮动元素产生的影响

① 对后面兄弟元素的影响

影响：

浮动元素后面的兄弟元素会占据浮动元素原来的位置，会显示在浮动元素的下层。（正常都是“兄弟元素有浮同享”）

解决：

给紧邻浮动元素后面的那一个兄弟元素设置 clear:both

② 对父元素的影响

影响：

如果父元素没有设置固定高度，子元素设置浮动之后，父元素高度会塌陷（父元素高度不能被浮动的子元素撑起来）

解决：

- 方案一 ： 给父元素设置固定高度（不推荐）
- 方案二 ： 给父元素设置浮动（以浮制浮）（不推荐，会产生新的问题）
- 方案三 ： 给父元素设置 overflow，值不为 visible 即可（推荐）
- 方案四 ： 在浮动元素的后面添加一个兄弟块级元素，设置 clear:both; 该元素不要有高度和内容。
- 方案五 ： 实现原理同方案四，利用伪元素选择器动态地为父元素创建最后一个子元素（在所有浮动元素的后面），设置成块级元素，设置为 clear:both（方案五）

浮动相关的 CSS 属性

CSS 属性	功能	属性值
float	设置浮动	none：不浮动，默认值。 left：左浮动。 right：右浮动。
clear	清除浮动	left： 清除左浮动影响。 right：清除右浮动影响。 both：清除左右浮动的影响。

---

定位

相对定位

① 如何设置相对定位

position: relative;

② 相对定位元素定位的参考点

参照自己原来的位置进行定位

③ 相对定位元素的特点

1. 不脱离文档流
2. 不会改变元素的显示模式（保持原来的行内、块级、行内块、浮动）
3. 可以使用 left、right、top、bottom 调整元素的位置
   使用百分比作为长度，left和right参照父元素内容宽度，top和bottom参照父元素内容高度

绝对定位

① 如何设置绝对定位

position: absolute;

② 绝对定位元素定位的参考点

1. 绝对定位元素定位的参照点是包含块
2. 没有绝对定位的元素包含块就是父元素
   绝对定位元素的包含块是第一个定位（任何定位都可以）的祖先元素，如果祖先元素没有定位，包含块就是整个页面

③ 绝对定位元素的特点

1. 绝对定位脱离文档流
2. 不论元素原来的显示模式（行内、块级、行内块、浮动），设置为绝对定位，就是绝对定位元素，拥有自己的显示特点
3. 绝对定位元素的显示特点
   ① 默认宽高被内容撑开（区别于块级元素）
   ② 可以设置宽高以及内外边距（区别于行内元素）
   ③ 不存在外边距塌陷和合并，左右外边距设置为auto也不会居中（区别于块级元素）
   ④ 不会被父元素作为文本（区别于行内块元素）
4. 可以 left、right、top、bottom 调整绝对定位元素的位置
   使用百分比作为长度，left、right 参照包含块的宽度，top、bottom参照包含块的高度

固定定位

① 如何设置为固定定位

position: fixed;

② 固定定位的元素定位参考点

固定定位元素参照视口进行定位

③ 固定定位元素的特点（同绝对定位）

1. 固定定位脱离文档流
2. 不论元素原来的显示模式（行内、块级、行内块、浮动），设置为固定定位，就是固定定位元素，拥有自己的显示特点
3. 固定定位元素的显示特点
   ① 默认宽高被内容撑开（区别于块级元素）
   ② 可以设置宽高以及内外边距（区别于行内元素）
   ③ 不存在外边距塌陷和合并，左右外边距设置为auto也不会居中（区别于块级元素）
   ④ 不会被父元素作为文本（区别于行内块元素）
4. 可以 left、right、top、bottom 调整绝对固定位元素的位置
   使用百分比作为长度，left、right 参照视口的宽度，top、bottom参照视口的高度

固定定位就是一种特殊的绝对定位！

定位层级 z-index

1. 定位的元素的显示层级高于不定位的元素
2. 绝对定位、固定定位、相对定位显示层级是一致的，后面的元素会显示在上层
3. 使用 z-index 可以设置元素的显示层级，值是纯数字，数字越大显示层级越高，可以是负值
4. 只有定位的元素设置 z-index 才有效

定位相关 CSS 属性

CSS 属性名	功能	属性值
position	设置定位	static：不定位，默认值。 relative：相对定位。 absolute：绝对定位。 fixed：固定定位。
left	设置位置	长度
right	设置位置	长度
top	设置位置	长度
bottom	设置位置	长度
z-index	设置显示层级	纯数字

定位的应用

① 定位元素（绝对和固定）的默认宽高计算

1. 绝对定位和固定定位如果不设置固定宽高，默认宽高被内内容撑开
2. 绝对定位和固定定位元素如果没有设置固定宽度，同时设置 left 和 right，对宽度有影响
   绝对定位和固定定位元素如果没有设置固定高度，同时设置 top 和 bottom，对高度有影响

② 设置定位元素（绝对和固定）在包含块中水平垂直都居中

方案一：

position: abolute;
left: 50%;
top: 50%;
margin-left: -宽度/2;
margin-top: -高度/2;

方案二：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

---

CSS3变换 transform

变换相关 CSS 属性

CSS 属性名	含义	值
transform	设置变换方式
transform-origin	设置变换的原点（默认center）	使用关键字或坐标设置位置（对位移没啥作用，理解）
transform-style	设置子元素处于3D空间还是2D空间	flat：2D空间，默认值。 preserve-3d：3D空间（不论那个元素进行3d变换，父元素里设置这个；像180度这样直接翻面其实没影响？？）
perspective	设置观察者与平面距离	长度（设置给父元素）
perspective-origin	设置观察者位置	使用关键字或坐标设置位置（设置给父元素）
backface-visibility	设置元素背面是否可见	visible：可见，默认值。 hidden：不可见

总结：

1. 行内元素无法设置变换
2. 需要设置给变换的元素的属性：
   transform、tranform-origin、backface-visibility
   需要设置给变换元素的父元素的属性：
   transform-style、perspective、perspective-origin

2D 变换的方法

① 位移 translate 方法

translateX()				设置水平方向位移
translateY()				设置垂直方向位置
translate()					同时设置水平方向和垂直方向的位移

位移的变换方法参数的设置规则：

1. 使用长度设置位移距离，允许负值
   使用百分比，水平位移参照元素自身宽度，垂直位移参照元素自身高度
2. translate() 如果只设置一个值，表示水平位移的距离，垂直方向不位移。

② 缩放 scale 方法

scaleX()				设置水平方向的缩放比例
scaleY()				设置垂直方向的缩放比例
scale()					同时设置水平方向和垂直方向的缩放比例

缩放的变换方法参数的设置规则：

1. 使用纯数字或者百分比表示缩放的比例
2. scale() 如果只设置一个值，表示同时设置水平方向和垂直方向的缩放比例

③ 旋转 rotate 方法

rotate()    //沿x 或者y轴 旋转90deg  有隐藏效果 因为他的厚度一个像素都没有 是0  所以是看不到的

变换方法参数的设置规则：

1. 使用角度，可以是负值，角度单位是 deg
2. 角度越大，越往顺时针旋转

④transform设置多种变换效果

1.transform: translateX(100px) scale(.8) translateY(100px) translateX(200px);
  中间用空格隔开即可，相同方法可以一起用。

3D 变换的方法

① 3D 位移

translateZ()				 transform: translateZ(-100px);设置沿z轴位移的距离（正值表示近显示变大）   
translate3D()				同时设置x、y、z轴位移的距离，必须设置3个长度

② 3D 缩放

scaleZ()
scale3D()

3D 缩放没有效果！！！

③ 3D 旋转

rotateX()				x轴旋转
rotateY()				y轴旋转
rotateZ()				z轴旋转，等同于2D旋转 rotate()
rotate3D()				同时沿x轴、y轴、z轴一起旋转，设置4个值，前三个都是0或者1，对应的轴是否旋转，第4						   个值设置角度		

---

过渡 transition

过渡相关 CSS 属性

CSS 属性名	含义	值
transition-property	设置哪些属性可以过渡	all，默认值. 1个或多个属性，使用功逗号分隔。
transition-duration	设置过渡的持续时间	时间单位 s、ms
transition-delay	设置过渡的延迟时间	时间单位 s、ms
transition-timing-function	设置过渡的运动曲线
transition	复合属性	1个时间表示duration，如果两个时间第一是duration，第二个是delay

哪些 CSS 属性可以过渡？

1. 属性的值是长度的，如 width、height、margin、padding、border-width 等等
2. 属性的值是颜色的，如 color、background-color、border-color 等等
3. 属性的值是纯数字，如 opacity、font-weight
4. 变换属性 transform

什么时候设置过渡相关的属性 transition？

在元素的样式变化之前，提前设置过渡相关的属性。

贝塞尔曲线在线工具：

cubic-bezier.com

transition-timing-function 设置过渡运动曲线：

(可以理解为运动过程中速度怎么变化)
ease			平滑过渡，默认值
linear			匀速
ease-in			加速运动     （自己理解为缓入）
ease-out		减速运动       缓出
ease-in-out		先加速再减速    缓入缓出
cubic-bezier()	特定的贝塞尔曲线设置运动曲线
steps()			分步运动 ,第二个参数默认是 end
step-start		等同于 steps(1, start)
step-end		等同于 steps(1,end) 或者 steps(1)

触发过渡的条件

用户的行为和动作导致元素样式发生改变，如果元素设置了过渡效果，样式的改变具有过渡动画效果

1. 伪类选择器 :hover :active :focus :checked
2. JS 的事件
3. CSS 媒体查询

---

动画 animation

关键帧

@keyframes 关键帧名字 {
    from { 样式}
    to {}
}

@keyframes 关键帧名字 {
    100% {}
}

@keyframes 关键帧名字 {
    from {}
    40% {}
    80% {}
    to {}
}

关键帧与元素的关系：

1. 一个元素可以设置多个关键帧
2. 一个关键帧可以设置到多个元素上

动画相关 CSS 属性

CSS 属性名	含义	值
animation-name	设置关键帧	多个使用功逗号分隔
animation-duration	设置动画持续时间	时间
animation-delay	设置动画运行时间	时间
animation-timing-function	设置动画运动曲线	同 transition-timing-function ease 平滑过渡，默认值 linear 匀速 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速再减速 cubic-bezier() 特定的贝塞尔曲线设置运动曲线 steps() 分步运动 ,第二个参数默认是 end step-start 等同于 steps(1, start) step-end 等同于 steps(1,end) 或者 steps(1)
animation-iteration-count	设置动画执行次数	数字。 infinite：无数次
animation-direction	设置动画运动方向	normal：正常方向，默认值。 reverse：反向运动。 alternate：交替运动。 alternate-reverse：反向交替运动。
animation-play-state	设置动画运动状态	running：正在运动，默认值。 paused：暂停。
animation-fill-mode	设置动画之外的状态	none：默认值。 forwards：动画结束后处于结束帧状态。 backwards：动画开始之前处于起始帧状态。 both：兼具forwards和backwards
animation	复合属性	空格隔开不用加逗号；

---

---

---

页面布局

页面的组成部分

重置样式表

reset.css
normalize.css

版心 container

1. 宽度固定
2. 水平居中

编码规范

---

精灵图

什么是精灵图

把小的图片合并到一张大的图片上

多个元素使用相同的图片作为背景图像，但是设置不同的图像位置，实现各自元素显示的图案不同

精灵图的优点

减少图片的请求次数，提高网页加载速度。

制作精灵图在线工具

alloyteam.github.io/gopng/

---

多列布局

① 设置给包裹元素的 CSS 属性（共 8 个属性）

CSS 属性名	含义	值
column-count	设置列数	纯数字
column-width	设置列宽	长度
columns	同时设置列数和列宽
column-gap	设置列间距	长度
column-rule-style	列分隔线风格	同 border-style（分割线位于列间距中间）
column-rule-color	列分隔线颜色	颜色
column-rule-width	列分隔线宽度	长度
column-rule	列分隔线复合属性

column-count 和 column-width：

1. 单独设置 column-count 或单独设置 column-width 都可以实现多列布局
2. 同时设置 column-width 和 column-count，哪一个分出来列数少就按照哪一个
3. 设置列数后，图片或者文字不设置的话都在列里显示（自己总结）

② 设置给子元素的 CSS 属性（共 4 个属性）

CSS 属性名	含义	值
column-span	是否跨列（合并列 ）	none：不跨列。 all：跨所有列
-webkit-column-break-before	设置元素前面是否断列	auto：自动，默认值。 always：强制断列（从选中的元素器同列的后面全部另起一行（自己总结））。 avoid：不允许断列
-webkit-column-break-after	设置元素后面是否断列	auto：自动，默认值。 always：强制断列（选中元素自己不动，同列后面的后面全部断列另起一行）。 avoid：不允许断列
-webkit-column-break-inside	设置元素内部是否断列	auto：自动，默认值。 avoid：不允许断列

---

伸缩盒布局(新项目都用他)

伸缩容器和伸缩项目

① 概念定义

伸缩容器： 给元素设置 display:flex 或者 display:inline-flex（伸缩容器不在独占一行），该元素就变为伸缩容器。

伸缩项目： 伸缩容器的子元素就是伸缩项目。

② 伸缩项目的特点

1. 伸缩项目不会脱离文档流，多个伸缩项目默认沿着主轴排列（主轴默认是水平的）
2. 不论原来的显示模式是什么，变为伸缩项目之后，就有伸缩项目的特点。
   伸缩项目优先级高于浮动，不如定位。
3. 伸缩项目是独立的显示模式。
   1、伸缩项目默认宽高被内容撑开，不存在外边距塌陷合并 （区分块级元素）
   2、可以完美设置宽高、内外边距（区分行内）
   3、不会被父元素作为文本处理（区分行内块）
4、 伸缩项目具有伸缩性 

设置主轴方向和换行方式

主轴： 伸缩项目会沿着主轴进行排列，第一个伸缩项目默认在主轴起点处。

侧轴： 侧轴永远与主轴保持垂直，修改了主轴方向侧轴跟着变换。

① 设置主轴方向

给伸缩容器设置 flex-direction 可以设置主轴方向,该属性值如下：

row				水平从左到右，默认值
row-reverse		水平从右到左
column			垂直从上到下
column-reverse	垂直从下到上

② 设置换行方式

给伸缩容器设置 flex-wrap 可以设置伸缩项目在主轴上的换行方式，该属性值如下：

nowrap			不换行，默认值
wrap			自动换行
wrap-reverse	换行且翻转

③ 同时设置主轴方向和换行方式

给伸缩容器同时设置 flex-flow 可以同时设置主轴方向和换行方式， flex-flow是 flex-direction 和 flex-wrap 的复合属性。

设置伸缩项目在主轴上的对齐方式

给伸缩容器设置 justify-content(独属主轴的属性)，该属性值如下：

flex-start			靠主轴起点对齐
flex-end			靠主轴终点对齐
center				居中对齐
space-between		两端对齐
space-around		两端间距是中间间距的一半
space-evenly		两端间距与中间间距一致

设置伸缩项目在侧轴上的对齐方式

给伸缩容器设置 align-items，属性值：

stretch			拉伸，默认值。 如果伸缩项目不设置在侧轴上的长度，会拉伸成与伸缩容器在侧轴上的高度一致。
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中
baseline		基线对齐，不建议使用

② 多条主轴线 （伸缩项目在主轴上发生换行）

给伸缩容器设置 align-content 属性值：

stretch			拉伸，默认值。 如果伸缩项目不设置在侧轴上的长度，会拉伸成与伸缩容器在侧轴上的高度一致。
flex-start		靠侧轴起点对齐
flex-end		靠侧轴终点对齐
center			居中对齐
space-between	两端对齐
space-around	两端间距是中间间距的一半
space-evenly	两端间距与中间间距一致

伸缩项目居中：

单个伸缩项目在伸缩容器中水平垂直居中：1，水平主轴上和垂直侧轴上分别设置居中；2：伸缩项目中写设置外边距自动，上下自动就垂直，左右就水平居中，全部就一起居中。（使用 margin-left: auto，auto 则会计算当前的整个可用空间，然后将这么多的空间安排在元素的左侧，结果将元素一直向右推。）

  <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        body {

          方法一：  /* display: flex;
            justify-content: center;
            align-items: center; */
            
            display: flex;
            
            ···主轴和侧轴分别居中···


        }

        .box {
            width: 400px;
            padding: 20px;
            color: #fff;
            background: #099;
            margin: auto; ·····直接全方向外边距 自动·····
        }
    </style>
</head>

<body>
    <div class="box">
        不月自作种活攻洪便人送，人非这公这的卑王得使找，尝登变胜哉后血兮幕苟事普视故仍投虑娟，派君使韩，的当小谓二归况子老将死人治胆反承了，了么因巴气蒲不不虑他六，于回牙登系，承时赏秦明落爻便更都始入死得我，人看找你之志三回文，生葬拿说活郭韩赐藏张不锐丰招白看我。
    </div>
</body>

伸缩项目的伸缩性（只发生在主轴的方向）

① 伸缩项目在主轴上的基准长度 flex-basis

1. 该属性设置的是伸缩项目在主轴上的长度，     优先级高于 width 或 height。
2. 该属性默认值是 auto，表示不设置是伸缩项目在主轴上的长度

② 扩展比率 flex-grow

伸缩项目扩展的前提：

1. 伸缩容器在主轴方向上有富余空间
2. 伸缩项目的扩展比率不能是 0

伸缩项目扩展的规则：

各伸缩项目按照各自的扩展比率，瓜分伸缩容器的富余空间

③ 收缩比率 flex-shrink

伸缩项目收缩的前提：

1. 伸缩容器在主轴上长度不够（小于伸缩项目在主轴上的长度和）
2. 收缩比率不能是 0
3. 伸缩项目不能自动换行 flex-wrap:wrap

伸缩项目收缩的规则：

既要考虑伸缩比率 也要考虑伸缩项目本身的长度
亏空 100px

权重：
box01:  100px*3
box02:  200px*1
box03:  300px*2

分母： 100px*3 + 200px*1 + 300px*2 =  1100;

box01 补： 100 * 3/11
box02 补： 100 * 2/11
box03 补： 100 * 6/11

④ flex 复合属性

flex: 扩展比率 收缩比率 基准长度;
flex: grow shrink basis;

flex: 1 1 0;  /* 简写为 flex: 1; */
flex: 0 0 auto;   /* 简写为 flex: none; */

伸缩项目排序

给伸缩项目设置 order 属性设置排序，属性的值是纯数字，可以是负值，值越小排序越靠前

单独设置伸缩项目在侧轴上的对齐方式

给伸缩项目设置 align-self ,属性值：

auto			默认值，表示遵守伸缩容器中 aling-items 的设置
stretch			拉伸， 如果伸缩项目不设置在侧轴上的长度，会拉伸成与伸缩容器在侧轴上的高度一致。
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中
baseline		基线对齐，不建议使用

伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

CSS 属性名	含义	值
display	设置伸缩容器	flex inline-flex
flex-direction	设置主轴方向
flex-wrap	设置主轴上换行方式
flex-flow	同时设置主轴方向和换行方式
justify-content	伸缩项目在主轴上的对齐方式
align-items	伸缩项目在侧轴上的对齐方式（不换行）
align-content	伸缩项目在侧轴上的对齐方式（换行）

② 设置给伸缩项目的属性

CSS 属性名	含义	值
flex-basis	在主轴上的基准长度	长度
flex-shrink	收缩比率	数字，默认值是 1
flex-grow	扩展比率	数字，默认值是 0
flex	复合属性
order	设置排序顺序	数字
align-self	单独设置该伸缩项目侧轴对齐方式	同 align-items

布局方式有很多:

1 Flex布局
2 多列布局
3 自适应布局:圣杯布局 双飞翼布局(以前的经典布局，用float实现)，Flex实现（简单）
4 响应式布局
5 H5新增布局标签 （header nav aside article section main footer ）

---

---

媒体查询和响应式布局

视口 viewport

① 什么是视口

1. 视口是浏览器上的可视区域，页面就是显示在视口中
2. 视口是页面的初始包含块，是根元素的包含块

② 移动端视口和PC端视口

1. PC端，屏幕分辨率与视口分辨率一致,默认完美视口
2. 移动端不论屏幕分辨率多少视口的默认宽度统一是 980px（一般都比移动端浏览器可视区域大很多），进行移动端开发需要设置完美视口
···查资料发现：像素有比例但是没有固定宽度，同一张图像素越高越清晰。
（小乐老师解释：假如手机的视口300px，css里写了一个100px的东西，按理说只占其视口1/3
  但是因为手机大小不同，分辨率 物理像素都不一样，可能就显示的不对，需要设置完美视口）

③ 完美视口设置

什么是完美视口：

屏幕宽度与视口宽度一致，就是完美视口。

如何设置为完美视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">               (meta:vp)
这样的话屏幕多宽视口就多宽 1比1

媒体查询基本语法

① 媒体类型

all			所有的设备
screen		屏幕
print		打印机
speech		屏幕阅读器

② 媒体特性

width				视口宽度
max-width			最大视口宽度
min-width			最小视口宽度
device-width		屏幕宽度
max-device-width	最大屏幕宽度
min-device-width	最小屏幕宽度

③ 运算符

and				并且
,				或者
not				否定，只能用于媒体类型
only			肯定，只能用于媒体类型

媒体查询在 CSS 中使用

① 第一种使用方式： 媒体查询与其他CSS代码写在一起(推荐使用)

h1 {
    color: #f00;
}

@media (min-width：1024px) {
    h1 {
        color: #f00;
    }
}

② 第二种使用方式： @media 配合 link 标签

<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

响应式布局

① 阈值（断点）

常见方案一：

786px
992px
1200px

常见方案二：

640
1024

② 移动优先方案（媒体查询的设置）

  /* 小于 768px */
.container {
}

/* 768px ~ 992px */
@media (min-width: 768px) {
    .container {
    }
}

/* 992px ~ 1200px */
@media (min-width: 992px) {
    .container {
    }
}

/* 大于等于 1200px */
@media (min-width: 1200px) {
    .container {
    }
}

③pc优先方案（媒体查询的设置）

min-max 即可

---

---

BFC

什么是 BFC

Block Formatting Context 简称 BFC，中文翻译为 块级格式上下文。

① W3C 中对 BFC 的定义

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

译文：

浮动、绝对定位元素、不是块盒子的块容器(如inline-blocks、table-cells和table-captions)，以及overflow属性的值除visible以外的块盒(除非该值已传播到视口)，将为其内容建立新的块格式化上下文。

www.w3.org/TR/CSS22/vi…

② MDN 上对 BFC 的定义

A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.

译文：

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

developer.mozilla.org/en-US/docs/…

developer.mozilla.org/zh-CN/docs/…

③ 到底什么是 BFC

首先，BFC 的意思是 Block Formatting Context ，即块级格式上下文。 然后，当元素满足了某些条件，我们认为该元素创建了 BFC。 创建了 BFC 的元素我们可以把他看做是一个独立的容器，容器内的元素不论如何布局都不会影响到外面。

创建 BFC 的方式

• 根元素。
• 浮动元素。
• 绝对定位或固定定位的元素。
• 行内块元素。
• 表格单元格（th、td）、表格行（tr）、表格标题（caption）、table、thead、tbody、tfoot。
• overflow 的值不为 visible 的块元素。
• 伸缩项目。
• 多列容器。
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。

创建 BFC 可以解决的问题

① 清除子元素浮动的影响

给浮动元素的父元素创建 BFC，清除掉子元素浮动的影响。

② 解决外边距塌陷

给父元素创建 BFC，第一个和最后一个子元素的外边距不会塌陷。

---

---

\