1 CSS编写的位置
1.1 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 style="color: red; font-size: 60px;">行内样式</h1>
</body>
</html>
1.2 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
color: red;
font-size: 60px;
}
h2{
color: green;
font-size: 40px;
}
p{
color: blue;
font-size: 30px;
}
img{
width:200px;
}
</style>
</head>
<body>
<h1>内部样式</h1>
<h2>这是h2</h2>
<p>这是p标签</p>
<img src="../图片/1639631785043.jpeg" alt="dog">
</body>
</html>
1.3 外部样式
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./3.css">
</head>
<body>
<h1>内部样式</h1>
<h2>这是h2</h2>
<p>这是p标签</p>
<img src="../图片/1639631785043.jpeg" alt="dog">
</body>
</html>
css文件
h1{
color: red;
font-size: 60px;
}
h2{
color: green;
font-size: 40px;
}
p{
color: blue;
font-size: 30px;
}
img{
width:200px;
}
2 CSS样式表的优先级
行内样式优先级最高，内部样式与外部样式平级，按照代码执行顺序，前面的样式会被后执行的样式给覆盖掉
3 CSS的书写规范
CSS代码风格
展开风格——一般开发时用
h1 {
color: red;
font-size: 40px;
}
紧凑风格——项目上线时用，可减小文件体积
h1{color: red;font-size:40px;}
项目上线时，会通过工具（webpack）将【展开风格】的代码变成【紧凑风格】
4 CSS基本选择器
4.1 通配选择器
为页面中所有元素设置样式
* {
color: red;
font-size: 30px;
}
清除样式的时候会使用
4.2 元素选择器
为页面中某种元素设置样式
h1 {
color: red;
font-size: 30px;
}
p {
color: green;
font-size: 40px;
}
4.3 类选择器
根据class的值，也就是类名选择元素
类名不能用纯数字，如果类名用多个单词组成，可以用 “-” 连接起来，如 me-to-you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_类选择器</title>
<style>
.lei1 {
color: red;
}
.lei2 {
color: blueviolet;
}
.size {
font-size: 40px;
}
</style>
</head>
<body>
<h1 class="lei1">这是h1类1</h1>
<h2 class="lei1">这是h2类1</h2>
<p class="lei1 size">这是p标签1类1</p>
<p class="lei1">这是p标签2类1</p>
<p class="lei1">这是p标签3类1</p>
<hr>
<h1 class="lei2">这是h1类2</h1>
<h2 class="lei2">这是h2类2</h2>
<p class="lei2 size">这是p标签1类2</p>
<p class="lei2">这是p标签2类2</p>
<p class="lei2">这是p标签3类2</p>
</body>
</html>
4.4 ID选择器
ID选择器是唯一的，不能以数字开头，不能有空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_ID选择器</title>
<style>
#id1 {
color: red;
}
#id2 {
color: blueviolet;
}
.size{
font-size: 50px;
}
</style>
</head>
<body>
<h1 id="id1">这是h1类1</h1>
<h2>这是h2类1</h2>
<p>这是p标签1类1</p>
<p>这是p标签2类1</p>
<p>这是p标签3类1</p>
<hr>
<h1 id="id2" class="size">这是h1类2</h1>
<h2>这是h2类2</h2>
<p clas>这是p标签1类2</p>
<p>这是p标签2类2</p>
<p>这是p标签3类2</p>
</body>
</html>
5 CSS复合选择器
5.1 交集选择器
选中同时符合多个条件的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_交集选择器</title>
<style>
.rich {
color: gold;
}
.beauty {
color: pink;
}
p.rich{
color: gold;
font-size: 60px;
}
p.beauty {
color: pink;
font-size: 60px;
}
.rich.beauty {
font-size: 60px;
}
</style>
</head>
<body>
<h1 class="rich">土豪张三</h1>
<h1 class="beauty">明星李四</h1>
<h1 class="rich beauty">土豪明星王五</h1>
<hr>
<p class="beauty">漂亮猫</p>
<p class="rich">土豪狗</p>
</body>
</html>
5.2 并集选择器
选中多个选择器对应的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_交集选择器</title>
<style>
.rich {
color: gold;
}
.beauty {
color: pink;
}
.rich,
.beauty,
#mouce,
.cat,
.dog {
width: 200px;
background-color: blueviolet;
font-size: 50px;
}
</style>
</head>
<body>
<h1 class="rich">土豪张三</h1>
<h1 class="beauty">明星李四</h1>
<h1>破产王五（无样式）</h1>
<hr>
<p class="cat">漂亮猫</p>
<p class="dog">土豪狗</p>
<p id="mouce">小老鼠</p>
</body>
</html>
5.3 后代选择器
5.3.1 HTML元素之间的关系
- 父元素：直接包裹某个元素的元素，就是该元素的父元素
- 子元素：被父元素直接包裹的元素，就是子元素
- 祖先元素：父元素的父元素
- 后代元素：子元素的子元素
- 兄弟元素：拥有共同父元素的元素之间就是兄弟元素
ul li {
color: lawngreen;
}
ol li {
color: blue;
}
ul li a {
color: gray;
}
ol li a {
color: brown;
}
.ol1 .ol1Div{
background-color: blueviolet;
width: 200px;
}
.ol2 div.font{
background-color: blueviolet;
width: 200px;
}
.ol2 p.font{
background-color: purple;
width: 200px;
}
5.4 子代选择器
选中指定元素中，符合要求的子元素
/* div中的子元素a */
div>a {
color: blueviolet;
}
/* div中的子元素p中的子元素a */
div>p>a {
color: red;
}
/* .last类中的子元素a */
.last>a{
color: skyblue;
}
/* div中.last类后代中的子元素a */
div .last>a{
color: black;
}
/* div元素且是.last类的元素中的子元素a */
div.last>a{
color: chocolate;
}
5.5 兄弟选择器
5.5.1 相邻兄弟选择器
选中指定元素后，符合条件的相邻兄弟元素
/* 选中div下面紧紧相邻的p元素 */
div+p {
color: royalblue;
}
/* 选中li下面紧紧相邻的li元素 */
li+li {
color: red;
}
5.5.2 通用兄弟选择器
选中指定元素后，符合条件的所有兄弟元素
/* 选中div兄弟元素中所有的p元素 */
div~p {
color: burlywood;
}
/* 选中li兄弟元素中所有的li元素 */
li~li {
color: red;
}
5.6 属性选择器
选中属性值符合一定要求的元素
/* 选中具有title属性的元素 */
[title] {
color: blueviolet;
}
/* 选中具有title属性，且属性值为eat的元素 */
[title = "eat"] {
color: brown;
}
/* 选中具体title属性，且属性值以e开头的元素 */
[title ^= "e"] {
color: rebeccapurple;
}
/* 选中具体title属性，且属性值以p结尾的元素 */
[title $= "p"] {
color: purple;
}
/* 选中具体title属性,且属性值中包含e的元素 */
[title *= 'e'] {
color: crimson;
}
5.7 伪类选择器
选中特殊状态的元素
/* 选中没访问过的a标签 */
a:link {
color: orange;
}
/* 选中访问过的a标签 */
a:visited {
color: lightcoral;
}
5.7.1 动态伪类选择器
-
:link超链接未被访问的状态 -
:visited超链接访问过的状态 -
:hover鼠标悬停在元素上的状态 -
:active元素激活的状态/* 选中没访问过的a标签 */ a:link { color: orange; } /* 选中访问过的a标签 */ a:visited { color: lightcoral; } /* :link 与 :visited 只能用于超链接 */ /* 鼠标悬停在元素上时的状态 */ a:hover { color: blueviolet; } /* 元素在激活时的状态 */ a:active { color: pink; } -
:focus获取焦点的元素/* 元素获取焦点时的状态 */ input:focus, select:focus { background-color: blueviolet; color: aliceblue; } /* :link 与 :visited 只能用于表单 */
5.7.2 结构伪类
常用的：
:first-child所有兄弟元素中的第一个:last-child所有兄弟元素中的最后一个:nth-child(n)所有兄弟元素中的第n个:first-of-type所有同类型兄弟元素中的第一个:last-of-type所有同类型兄弟元素中的最后一个:nth-of-type(n)所有同类型兄弟元素中的第n个
关于n的值：
- 0 或 不写：什么都选不中——几乎不用
- n：选中所有子元素——几乎不用
- 1~正无穷的整数：选中对应序号的子元素
- 2n 或 even：选中序号为偶数的子元素
- 2n+1 或 odd：选中序号为奇数的子元素
- -n+3：选中的是前3个
n的值都是an+b的形式。
了解即可：
:nth-last-child(n)所有兄弟元素中的倒数第n个:nth-last-of-type(n)所有用类型兄弟元素中的倒数第n个:only-child选中没有兄弟元素的元素（独生子女）:only-of-type选中没有同类型兄弟元素的元素:root选中html根元素:empty内容为空的元素（空格也算内容）
5.7.3 否定伪类
:not() 排除满足括号中条件的元素
5.7.4 UIweil
:checked被选中的复选框或单选按钮:enable可用的表单元素（没有disabled属性）:disabled不可用的表单元素（有disabled属性）
5.7.5 目标伪类（了解）
:target 选中锚点指向的元素
5.7.6 语言伪类
:long() 根据指定的语言选择元素（本质是看 long() 属性的值）。
5.8 伪元素选择器
- 作用：选中元素中的一些特殊的位置
- 常用伪元素：
::first-letter选中元素中的第一个文字。::first-line选中元素中的第一行文字。::selection选中被鼠标选中的内容。::placeholder选中输入框的提示文字::before在元素最开始的位置，创建一个子元素（必须用content属性指定内容）::after在元素最后的位置，创建一个子元素（必须用content属性指定内容）
6 选择器的优先级
6.1 简单来说
- 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
6.2 详细讲
-
计算方式：每个选择器，都可以计算出一组权重，格式为**（a，b，c）**
-
a：ID 选择器的个数
-
b：类，伪类，属性 选择器的个数
-
c：元素、伪元素 选择器的个数
-
例如：
选择器 权重 ul > li （0，0，2） div ul > li p a span （0，0，6） #atguigu .slogan （1，1，0） #atguigu .slogan a （1，1，1） #atguigu .slogan a:hover （1，2，1）
-
-
比较规则，按照从左到右的顺序，依次比较大小，当前位胜出之后，后面的不再比了，例如：
- （1，0，0） > （0，2，2）
- （1，1，0） > （1，0，3）
- （1，1，3） >（1，1，2）
-
特殊规则：
- 行内样式权重大于所有选择器
!important的权重，大于行内样式，大于所有选择器。
7 CSS的三大特性
7.1 层叠性
-
概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）
什么是冲突？————元素的同一个样式名，被设置了不同的值
7.2 继承性
-
概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
-
规则：优先继承离得近的
-
常见的可继承属性
text-?? ，font-?? ，line-?? ，color ······
-
备注：参照MDN网站，可查询属性是否可被继承
7.3 优先级
-
简单聊：
!important*> 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式 -
详细聊：计算权重
计算权重是需要注意：并集选择器的每一个部分是分开算的！
div,h2,p { div { | h2 { | p { color: red ==> color: red + color: red + color: red } } | { | { /* 上面所有选择器的权重都是（0，0，1） */
8 PX像素
- 屏幕是由很多个发光的小点组成的，一个点就是1px
9 颜色的表示
9.1 表示一：颜色名
div {
color: red;
}
- 简单，但不常用
- 具体有多少种颜色名可以写参考MDN文档
- - CSS：层叠样式表 | MDN (mozilla.org)
9.2 表示二：rgb或rgba
-
编写方式：使用 红、绿、蓝 这三种光的三原色进行组合
- r 表示 红色
- g 表示 绿色
- b 表示 蓝色
- a 表示 透明度
-
举例：
.line1 { color: red; } .line2 { color: rgb(255, 0, 0); } .line3 { color: rgb(100%, 0%, 0%); } .line4 { color: rgba(255, 155, 0, 0.4); } .line5 { color: rgba(255, 155, 0, 40%); }- 若三种颜色值相同，呈现的颜色是灰色，值越大，灰色越深
- rgb（0，0，0）是黑色，rgb（255，255，255）是白色
- 对于rgba来说，前三位与rgb保持一致，要么是0~255的数字，要么是百分比
9.3 表示三：HEX或HEXA
-
HEX 的原理与 rgb 一样，依然是通过红、绿、蓝 进行组合，只不过要用6个数字，分别组成3组来表达
-
格式为：#rrggbb #红红绿绿蓝蓝
-
每一位数字的取值范围是0~f，十六进制
-
所有每种光的最小值是00，最大值是ff
.div1 { color: #0e4c5a; } .div2 { color: #0e4c5a58; } /* 如果每种颜色的俩位都是相同的，就可以简写 */ .div3 { color:#2c1; /* => #22cc11; */ } /* 但要注意前三位简写了，透明度也要简写 */ .div4 { color:#2c1e; /* => #22cc11ee; */ }注意点，IE浏览器不支持HEXA，但支持HEX
9.4 表示四：HSL或HSLA
-
HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl（色相 , 饱和度 , 亮度）
- 色相：取值范围是0~360度，具体度数对应的颜色如下图：
-
饱和度：取值范围是0%~100%。（向色相中添加灰色，0%就是全灰，100%就是一定灰都没有）
-
亮度：取值范围是0%~100%。（0%亮度没了，所有就是黑色，100%太亮了，所有就是白色）
-
HSLA 其实就是在 HSL 的基础上，添加了透明度。取值是01或0%100%，可以有小数点
10 CSS字体属性
10.1 字体大小
-
属性名：font-size
-
语法：
div { font-size: 40px; } -
注意点：
- Chrome浏览器支持的最小文字为12px，默认文字大小为16px，当字体大小是0px时，字会消失
- 不同浏览器默认的字体大小可能不一样，所有最好给一个明确的值，不要用默认大小
- 通常以给 **body **设置 font-size 属性，这样body中的其他元素就都可以继承了
10.2 字体族
-
属性名：font-family
-
语法：
div { font-family:"STCaiyun","Microsoft YaHei",sans-serif; } -
注意：
- 使用字体的英文名字兼容性会更好，具体是英文名去百度查
- 如果字体名包含空格，必须用引号包裹起来
- 如果设置多个字体，按从左到右的顺序查，找到就用，没有找到就用后面的，且通常在最后加上 serif（衬线字体）或 sans-serif（非衬线字体）
- windows系统中，默认字体就是微软雅黑
- 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，也可能大，也可能小
- 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。
10.3 字体风格
-
属性值：font-style
-
常用值：
- normal：正常（默认值）
- italic：斜体（使用字体自带的斜体效果，没有时再强制倾斜）
- oblique：斜体（强制倾斜产生的斜体效果）
实现斜体时，跟推荐使用italic
-
语法：
div { font-style: italic }
10.4 字体粗细
-
属性名：font-weight
-
常用值：
-
关键词
- lighter：细
- normal：正常
- bold：粗
- bolder：更粗（很多字体都不支持）
-
数值
- 100~1000 且无单位，数值越大，字体越粗（或一样粗，具体看字体设计时的精确程度）
- 100~300 等于 lighter，400~500 等于 normal，600 及以上等于 bold
-
-
语法：
div { font-weight: bold; } div { font-weight: 600; }
10.5 字体复合写法
-
属性名：font，可以把上述字体样式合并成一个属性
-
编写规则：
- 字体大小、字体族必须都写上
- 字体族必须是最后一位，字体大小必须是倒数第二位
- 各个属性间用空格隔开
-
实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性
-
语法：
div { font: bold italic 100px "STCaiyun","Microsoft YaHei",sans-serif; }
11 CSS常用文本属性
11.1 文本颜色
-
属性名：color
-
可选值：
- 颜色名
- rgb 或 rgba
- HEX 或 HEXA
- HSL 或 HSL
开发中常用的是：rgb/rgba 或 HEX/HEXA（十六进制）
-
举例：
div { color: rgb(112, 45, 78) }
11.2 文本间距
- 字母间距：letter-spacing
- 单词间距：word-spacing（通过空格识别词）
- 属性值为像素（px），正值让间距增大，负值让间距缩小
11.3 文本修饰
-
属性名：text-decoration
-
可选值：
- none：无装饰线（常用）
- underline：下划线（常用）
- overline：上划线
- line-through：删除线
可搭配如下值使用：
- dotted：虚线
- wavy：波浪线
- 也可以指定颜色
-
举例：
a { text-decoration :none; }
11.4 文本缩进
-
属性名：text-indent
-
属性值：css 中的长度单位，例如：px
-
举例：
div { text-indent: 40px; }
11.5 文本对齐-水平对齐
-
属性名：text-align
-
常用值：
- left：左对齐（默认值）
- right：右对齐
- center：居中对齐
-
举例：
div { text-align: center; }
11.6 行高
-
属性名：line-height
-
可选值：
- normal：由浏览器根据字体大小决定的一个默认值
- 像素（px）
- 数字：参考自身 font-size 的倍数（很常用）
- 百分比：参考自身 fontsize 的百分比
-
备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
-
举例：
div { line-height: 60px; line-height: 1.667; line-height: 166%; } -
行高注意事项：
- line-height 过小会怎么样？——文字产生重叠，且最小值是0，不能为负数
- line-height 是可以继承的，且为了能够更好的呈现文字，最好写数值
- lineheight 和 height 是什么关系？
- 设置了height，那么高度就是 height 的值
- 不设置 height 的时候，会根据 lineheight 计算高度
-
应用场景：
-
对于多行文字，控制行与行之间的距离
-
对于单行文字，让 height 等于 line-height，可以实现文字垂直居中
备注：由于字体设计的原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感
-
11.7 文本对齐-垂直对齐
-
顶部：无需任何属性，默认就是垂直顶部对齐
-
居中：对于单行文字，让 height = line-height 即可
对于多行文字垂直居中，——后面用定位去做。
-
底部：对于单行文字，目前临时的方式
让 line-height = （height * 2）- font-size - x
备注：x是根据字体族，动态决定的一个值
垂直方向上的底部对齐，更好的解决办法是用定位去做
11.8 vertical-align
-
属性名：vertical-align
-
作用：用于指定用一行元素之间，或表格单元格内文字的垂直对齐方式
-
常用值：
- baseline（默认值）：使元素的基线与父元素的基线对齐
- top：使元素的顶部与其所在行的顶部对齐
- middle：使元素的中部与父元素的基线加上父元素字母X的一半对齐
- bottom：使元素的底部与其所在行的底部对齐
特别注意：bertical-align 不能控制块元素
12 CSS列表属性
-
列表相关的属性，可以作用在ul、ol、li，元素上
CSS属性名 功能 属性值 list-style-type 设置列符号 常用值如下：
none：不显示前面的标识（常用）
square：实心方块
disc：圆形
decimal：数字
lower-roman：小写罗马字
upper-roman：大写罗马字lower-alpha：小写字母
upper-alpha：大写字母list-style-position 设置列符号的位置 inside：在li的里面
outside：在li的外面list-style-image 自定义列表符号 url（图片地址） list-style 复合属性 没有数量，顺序要求
13 CSS表格属性
-
边框相关属性（其他元素也能用）
属性名 功能 属性值 border-width 边框高度 CSS中可用的长度值 border-color 边框颜色 CSS中可用的颜色值 border-style 边框风格 none：默认值
solid：实线
dashed：虚线
dotted：点线
double双实线border 边框复合属性 没有数量，顺序要求 注意：
- 以后在盒子模型中，会详细讲边框的相关知识
-
表格独有的属性（只有table标签才能用）
CSS属性名 功能 属性值 table-layout 设置列宽度 auto：自动，列宽根据内容计算（默认值）
fixed：固定列宽，平均分border-spacing 单元格间距 CSS 中可用的长度值。
生效前提：单元格边框不能合并border-collapse 合并单元格边框 collapse：合并
separate：不合并empty-cells 隐藏没有内容的单元格 show：显示（默认）
hide：隐藏
生效前提：单元格边框不能合并caption-side 设置表格标题位置 top：在上面（默认值）
bottom：在表格下面以上5个属性，只有表格才能使用，即：**
**标签
14 背景属性
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| background-color | 设置背景颜色 | 符合CSS中颜色规范的值，默认值是 transparent （透明的意思） |
| background-image | 设置背景图片 | url（图片的地址） |
| background-repeat | 设置图片重复方式 | repeat：重复，铺满整个元素，默认值 repeat-x：只在水平方向重复。 repeat-y：只在垂直方向重复 no-repeat：不重复 |
| background-position | 设置背景图位置 | 通过关键字设置位置： 写俩个值，用空格隔开 水平：left、center、right 垂直：top、center、bottom 如果只写一个只，另一个方向的默认值就是center 通过长度指定坐标位置： 以元素左上角，为坐标原点，设置图片左上角的位置。 俩个值，分别是 x 坐标和 y 坐标。 只写一个值，会被当做 x 坐标，y 坐标取 center |
| background | 复合属性 | 没有数量和顺序要求 |
15 CSS鼠标属性
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| cursor | 设置鼠标光标的样式 | pointer：小手 move：移动图标 text：文字选择器 具体更多属性值可以去MDN官网上看 |
扩展：自定义鼠标图标
/* 自定义鼠标光标 */
cursor：url(“./arrow.png”), pointer;
16 CSS盒子模型
16.1 CSS 长度单位
-
px：像素
-
em：相对元素 font-size 的倍数
-
rem：相对根字体大小，html标签就是根
-
%：相对父元素计算
注意：CSS中设置长度，必须加单位，否则无效
16.2 元素的显示模式
-
块元素（block）
特点：
- 在页面独占一行，不会与任何元素共用一行，是从上到下排列的
- 默认宽度：撑满父元素
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
-
行内元素（inline）
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 无法通过CSS设置宽高
-
行内块元素（inline-block）
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
注意：早期元素只分为：行内元素、块级元素，区分条件也只有一条：”是否独占一行“，如果按照这种分类方式，行内块元素应该算作行内元素。
16.3 总结各元素的显示模式
-
块元素（block）
- 主体结构标签：< html >、< body >
- 排版标签：< h1 >~< h6 >、< hr >、< p >、< pre >、< div >
- 列表标签：< ul >、< ol >、< li >、< dl >、< dt >、< dd >
- 表格相关标签：< table >、< tbody >、< thead >、< tfoot >、< tr >、< caption >
- < form >与< option >
-
行内元素（inline）
- 文本标签：< br >、 < em >、< strong >、< sup >、< sub >、< ins >
- < a >与< label >
-
行内块元素（inline-block）
- 图片：< img >
- 单元格：< td >、< th >
- 表单控件：< input >、< textarea >、< select >、< button >
- 框架标签：< iframe >
16.4 修改元素显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：
- none：元素会被隐藏
- block：元素将作为块元素显示
- inline：元素将作为行内元素显示
- inline-block：元素将作为行内块元素显示
16.5 盒子模型的组成
CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。
- margin（外边距）：盒子与外界的距离
- border（边框）：盒子的边框
- padding（内边距）：紧贴内容的补白区域
- content（内容）：元素中的文本或后代元素都是它的内容
图示如下：
盒子的大小 = content + 左右 padding + 左右 border
注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。
16.6 盒子内容区（content）
-
width：设置内容区域宽度
-
max-width：设置内容区域的最大宽度
-
min-width：设置内容区域的最小宽度
-
height：设置内容区域的最大高度
-
max-height：设置内容区域的最大高度
-
min-height：设置内容区域的最小高度
注意：
max-width、min-width 一般不与 width 一起用
max-height、min-height 一般不与 height 一起用
16.7 关于默认宽度
所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。
总宽度 = 父的 content – 自身的左右 margin
内容区的宽度 = 父的 content – 自身的左右 margin – 自身的左右 border – 自身的左右 padding。
16.8 盒子内边距
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| padding-top | 上内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding-left | 左内边距 | 长度 |
| padding | 复合属性 | 长度，可以设置1~4个值 |
padding 复合属性的使用规则：
-
padding：10px 四个方向内边距都是10px
-
padding：10px 20px 上10px，左右20px（上下、左右）
-
padding：10px 20px 30px 上10px，左右20px，下30px（上、左右，下）
-
padding：10px 20px 30px 40px 上10px，右20px，下30px，左40px（上、右、下、左）
注意点：
- padding 的值不能为负数
- 行内元素的作用内边距是没问题的，上下内边距不能完美的设置
- 块元素、行内元素，四个方向内边距都可以完美设置
16.9 盒子边框
- border-style：边框样式
- border-width：边框宽度
- border-color：边框颜色
- border：上面三个的复合属性
- border-left：下面三个的复合属性
- border-left-style：左边框的样式
- border-left-width：左边框的宽度
- border-left-color：左边框的颜色
- border-right：与border-left一样，也是复合属性，也有另外三个具体的属性
- border-top：与border-left一样，也是复合属性，也有另外三个具体的属性
- border-bottom：与border-left一样，也是复合属性，也有另外三个具体的属性
边框相关的属性共 20 个
border-style、border-width、bordercolor 其实也是复合属性
16.10 盒子外边距——margin
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| margin-left | 左外边框 | CSS中的长度值 |
| margin-right | 右外边框 | CSS中的长度值 |
| margin-top | 上外边框 | CSS中的长度值 |
| margin-bottom | 下外边框 | CSS中的长度值 |
| margin | 复合属性，可以下1~4个值，规律与padding一样（顺时针） | CSS中的长度值 |
16.10.1 外边距margin的注意事项
- 子元素的 margin，是参考父元素的 content 计算的。（因为父元素的 content 中承载着子元素）
- 上 margin、左 margin：影响自己的位置；下 margin、右 margin：影响后面兄弟元素的位置。
- 块元素、行内块元素，均可以完美地设置四个方向上的margin，但行内元素，左右 margin 可以完美设置，上下 margin 设置无效
- **margin **的值也可以是 auto，如果给一个 块元素 设置左右 margin 都为 auto，该块元素会在父元素中水平居中
- margin 可以是负值
16.10.2 margin 塌陷问题
-
什么是 margin 塌陷？
第一个子元素的 上margin 会作用在其父元素上，最后一个子元素的 下margin 会作用在其父元素上。
-
如何解决 margin 塌陷？
- 给父元素设置不为0的 padding。
- 给父元素设置宽度不为0的 border。
- 给父元素设置css样式 overflow：hidden。
16.10.3 margin 合并问题
-
什么是 margin 合并？
上面兄弟元素的下外边距 和下面兄弟元素的 上外边距 会合并，取最大值，而不是相加。
-
如何解决 margin 塌陷？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。
16.11 处理内容溢出
- overflow：溢出内容的处理方式，可选值如下：
- visible：显示，默认值
- hidden：隐藏
- scroll：显示滚动条，不论内容是否溢出
- auto：自动显示滚动条，内容不溢出不显示
- overflow-x：水平方向溢出处理，可选值同上（实验属性）
- overflow-y：垂直方向溢出处理，可选值同上（实验属性）
overflow 常用值是 hidden 和 auto ，除了能处理溢出的显示方式，还能解决很多疑难杂症。
16.12 隐藏元素的方式
-
方式一：visibility 属性
visibility 属性默认值是 show，如果设置为 hidden，元素会隐藏，
元素看不见了，但是还占据着原来的位置（元素的大小依然保持）
-
方式二：display 属性
设置 display：none，就可以让元素隐藏
彻底隐藏，不但看不见，也不占据原来的位置，没有大小宽高。
16.13 样式的继承
有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素一开一级一级继承（优先继承离得近的祖先元素）。
-
会继承的CSS属性:
字体属性、文本属性（除了vertical-align）、文字颜色 等。 -
不会继承的CSS属性
边框、背景、内边距、外边距、宽高、溢出方式 等。一个规律：能继承的属性都是不影响布局的，简单来说，都是和盒子模型没关系的。
16.14 默认样式
元素一般都有些默认样式，例如：
-
< a > 元素：下划线、字体颜色、鼠标小手
-
< h1 > ~ < h6 > 元素：文字加粗、文字大小、上下外边距
-
< p > 元素：上下外边距
-
< ul > 、< ol > 元素：左内边距
-
< body > 元素：8px 外边距（4个方向）
···············
优先级：元素的默认样式 > 继承的样式
16.15 布局小技巧
-
行内元素、行内块元素，可以被父元素当做文本处理
即可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐
例如：text-align、line-height、text-indent 等
-
如何让子元素，在父元素中 水平居中
- 若子元素为块元素，给子元素加上：margin：0 auto；
- 若子元素为行内元素、行内块元素，给父元素加上：text-align：center
-
如何让子元素，在父元素中 垂直居中
-
若子元素为块元素，给子元素加上：margin-top，值为（父元素content – 子元素盒子总高）/ 2
-
若子元素为行内元素、行内块元素：
让父元素的height = line-height，每个子元素都加上：vertical-align:middle；
补充：若想绝对垂直居中，父元素 font-size 设置为0
-
16.16 元素之间的空白问题
-
产生原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
-
解决方法：
- 去掉换行和空格（垃圾方法）
- 给父元素设置 font-size：0，再给需要显示文字的元素，单独设置字体大小（老师虽然推荐，但还是太麻烦）
16.17 行内块的幽灵空白问题
-
产生原因：
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的
-
解决方案：
- 给行内块设置 vertical，值不为 baseline 即可，设置为 middel、bottom、top 即可
- 若父元素中只有一张图片，设置图片为 display：block
- 给父元素设置 font-size：0，如果该行内块内部还有文本，则需单独设置 font-size
17 浮动与定位
17.1 浮动简介
在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
17.1.1 元素浮动后的特点
- 脱离文档流。（坏事）
- 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。（好事）
- 不会独占一行，可以与其它元素共用一行。（好事）
- 不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding。（好事）
- 不会像行内块一样被当做文本处理（没有行内块空白问题）。（好事）
17.1.2 浮动后会有哪些影响
- **对兄弟元素的影响：**后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的后面；对前面的兄弟元素无影响。
- **对父元素的影响：**不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
17.1.3 解决浮动产生的影响（清除浮动）
解决方案：
-
给父元素指定高度。
-
给父元素也设置浮动，但会带来其他影响
-
给父元素设置 overflow：hidden。
-
在所有浮动元素的最后面，添加一个块元素，并给该块元素设置 clear：both。
-
给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方法4是一样的。推荐使用
.父元素::after { content: ''; display: block; clear: both; }布局中的一个原则：设置浮动的时候，兄弟元素要么都浮动，要么都不浮动。
17.2 相对定位
17.2.1 如何设置相对定位
- 给元素设置 position：relative 即可实现相对定位
- 可以使用 left、right、top、bottom 四个属性调整位置
17.2.2 相对定位的参考点在哪里？
- 相对自己原来的位置
17.2.3 相对定位的特点
-
不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素馋产生任何影响。
-
定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
默认规则是：
- 定位的元素会盖在普通元素之上
- 都发生定位的两个元素，后写的元素会盖在先写的元素之上
-
left 不能和 right 一起设置，top 和 bottom 不能一起设置
-
相对定位的元素，也能继续浮动，但不推荐这样做
-
相对定位的元素，也能通过 margin 调整位置，但不推荐这样做
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。
17.3 绝对定位
17.3.1 如何设置绝对定位？
- 给元素设置 position：absolute 即可实现绝对定位。
- 可以使用 left、right、top、bottom 四个属性调整位置。
17.3.2 绝对定位的参考点在哪里？
-
参考它的包含块。
什么是包含块？
- 对于没有脱离文档流的元素：包含块就是父元素。
- 对于脱离文档流的元素：包含块是第一个拥有绝对定位的祖先元素（如果所有祖先都没有定位，那包含块就是整个页面）。
17.3.3 绝对定位元素的特点：
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left 不能和 right 一起设置，top 和 bottom 不能一起设置。
- 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
- 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
何为定位元素？——默认宽、高都被内容所撑开，且能自由设置宽高。
17.4 固定定位
17.4.1 如何设置为固定定位？
- 给元素设置 position、fixed 即可实现固定定位。
- 给元素使用 left、right、top、bottom 四个属性调整位置。
17.4.2 固定定位的参考点在哪里？
-
参考它的 视口
什么是视口？——对于pc浏览器来说，视口就是我们看网页的那扇 “窗户” 。
17.4.3 固定定位元素的特点
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left 不能 right 一起同，top 和 bottom 不能一起设置。
- 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
- 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为固定定位后，都变成了定位元素。
17.5 粘性定位
17.5.1 如何设置粘性定位？
- 给元素设置 position：sticky 即可实现粘性定位。
- 可以使用 left、right、top、bottom 四个属性调整位置，不过最常用的是 top 值。
17.5.2 粘性定位元素的特点
- 离它最近的一个拥有 “滚动机制” 的祖先元素，即使这个祖先不是最近的真实可滚动祖先。
17.5.3 粘性定位元素的特点
- 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的值是 top 值。
- 粘性定位和浮动可以同时设置，但不推荐这样做。
- 粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。
粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。
17.6 定位层级
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
- 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
- 可以通过 CSS 属性 z-index 调整元素的显示层级。
- z-index 的属性值是数字，没有单位，值越大显示层级越高。
- 只有定位的元素设置 z-index 才有效。
- 如果 z-index 值大的元素，依然没有覆盖 z-index 值小的元素，那么请检查其包含块的层级。
17.7 定位的特殊应用
注意：
- 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高都被内容撑开，且依然可以设置宽高。
- 发生相对定位后，元素依然是之前的显示模式。
- 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。
17.7.1 让定位元素的宽充满包含块
- 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0。
- 高度想与包含块一致，top 和 bottom 设置为 0。
17.7.2 让定位元素在包含块中居中
-
方案一：
left: 0; right: 0; top: 0; bottom: 0; margin: auto; -
方案二：
left: 50%; top: 50%; margin-left: 负的宽度一半; margin-right: 负的高度一半;
注意：该定位的元素必须设置宽高！！！
18 布局
18.1 版心（container）
- 在 PC 端网页中，一般会有一个固定宽度且水平居中的盒子，来显示网页的主体内容，这是网页的 版心。
- 版心的宽度一般是 960~1200 像素之间。
- 版心可以是一个，也可以是多个。
18.2 布局常用名词
| 位置 | |
|---|---|
| 顶部导航条 | topbar |
| 页头 | header、page_header |
| 导航 | nav、navigator、navbar |
| 搜索框 | search、search_box |
| 横幅、广告、宣传图 | banner |
| 主要内容 | content、main |
| 侧边栏 | aside、sidebar |
| 页脚 | footer、page_footer |
18.3 重置默认样式
* {
margin: 0;
padding: 0;
......
}
此种方法，在简单案例中可以使用，实际开发中不会用。局限性太大。
选择到具有默认样式的元素，清空其默认的样式。
经过 reset 后的网页，好似 “一张白纸” ，开发人员可根据设计稿，精细的去添加具体的样式。（主流）
-
18.3.3 Normalize.css
Normalize.css 是一种最新方案，在清除默认样式的基础上，保留一些有价值的默认样式。
- 官网地址：http://necolas.github.io/normalize.css/
相对于 reset.css，Normalize.css 有如下优点
- 保护了有价值的默认样式。
- 为大部分HTML元素提供一般化的样式。
- 新增 HTML5 元素的设置。
- 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。
备注：Normalize.css 的重置，和 reset.css 相比，更加温和，开发时可根据实际情况进行选择。（还不成熟一般不用）
19 H5简介
19.1 什么是HTML5？
-
新一代的标准
-
官网地址：
- W3C提供：https://www.w3.org/TR/html/index.html
- WHATWG提供：https://whatwg-cn.github.io/html/multipage
-
HTML5 在狭义上是指新一代的HTML标准，在广义上是指：整个前端。
19.2 HTML5优势
- 针对 JavaScript，新增了很多接口，
- 新增了一些语义化标签、全局属性。
- 新增了多媒体标签，替代flash。
- 更侧重语义化，对SEO更友好。
- 可移植性好，大量应用在移动设备上。
19.3 HTML5兼容性
-
支持谷歌、火狐等主流浏览器。
IE浏览器必须要IE9及以上版本才支持HTML5，且IE9仅支持部分HTMl5新特性。
20 新增语义化标签
20.1 新增布局标签
| 标签名 | 语义 | 单/双标签 |
|---|---|---|
| header | 整个页面，或部分区域的头部 | 双 |
| footer | 整个页面，或部分区域的底部 | 双 |
| nav | 导航 | 双 |
| article | 文章、帖子、杂志、新闻、博客、评论等 | 双 |
| section | 页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题） | 双 |
| aside | 侧边栏 | 双 |
| main | 文档主要内容（WHATWG没有语义，IE不支持），几乎不用 | 双 |
| hgroup | 包裹连续的标题，如文章主标题、副标题的组合（W3C将其删除） | 双 |
关于 article 和 section：
- article 里面可以有多个 section。
- section 强调的是分段或分块。
- article 比 section 更强调独立性。
20.2 新增状态标签
20.2.1 meter标签
-
语义：定义已知范围的标量测量。也被称为 gauge （尺度），双标签，例如：电量、磁盘用量等。
-
常用属性如下：
| 属性 | 值 | 描述 |
|---|---|---|
| high | 数值 | 规定高值 |
| low | 数值 | 规定低值 |
| max | 数值 | 规定最大值 |
| min | 数值 | 规定最小值 |
| optimum | 数值 | 规定最优值 |
| value | 数值 | 规定当前值 |
20.2.2 progrees标签
-
语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。
-
常用属性如下：
属性 值 描述 max 数值 规定目标值 value 数值 规定当前值
20.3 新增列表标签
| 标签名 | 语义 | 单/双标签 |
|---|---|---|
| datalist | 用于搜索框的关键字提示 | 双 |
| details | 用于展示问题和答案，或对专有名词进行解释 | 双 |
| summary | 写在 details 的里面，用于指定问题或专有名词 | 双 |
<input type="text" list="mydata">
<datalist id="mydata">
<option value"周杰伦">周杰伦</option>
<option value"周冬雨">周冬雨</option>
<option value"温兆伦">温兆伦</option>
<option value"马冬梅">马冬梅</option>
</datalist>
<details>
<summary>如何走上人生巅峰？</summary>
<p>一步一步走啊</p>
</details>
20.4 新增文本标签
20.4.1 文本注音
| 标签名 | 语义 | 单/双标签 |
|---|---|---|
| ruby | 包裹需要注音的文字 | 双 |
| rt | 写注音，rt 标签写在 ruby 的里面 | 双 |
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng</rt>
</ruby>
20.4.2 文本标记
| 标签名 | 语义 | 单/双标签 |
|---|---|---|
| mark | 标记 | 双 |
注意：W3C 建议 mark 用于标记搜索结果中的关键字。
20.5 新增表单功能
20.5.1 表单控件新增属性
| 属性名 | 功能 |
|---|---|
| placeholder | 提示文字（注意：不是默认值，value是默认值），适用于文字输入类的表单控件。 |
| required | 表示该输入项必填，适用于除按钮外的其他表单控件 |
| autofocus | 自动获取焦点，适用于所有表单控件 |
| autocomplete | 自动完成，可以设置为 on 或 off，适用于文字输入类的表单控件，注意：密码输入框、多行输入框不可用 |
| pattern | 填写正则表达式，适用于文本输入类表单控件。注意：多行输入不可用，且空的输入框不会验证，往往与required 配合使用。 |
20.5.2 input新增属性值
| 属性名 | 功能 |
|---|---|
| 邮箱类型的输入框，提交时会验证格斯，为空时不验证。 | |
| url | url类型的输入框，提交时会验证格式，为空时不验证。 |
| number | 数字类型的输入框，提交时会验证格式，为空时不验证。 |
| search | 搜索类型的输入框，提交时不会验证格式 |
| tel | 电话类型的输入框，提交时不会验证格式，在移动端时，会唤起数字键盘。 |
| range | 范围选择框，默认值为50，提交时不会验证格式 |
| color | 颜色选择框，默认值为黑色，提交时不会验证格式 |
| date | 日期选择框，默认值为空，提交时不会验证格式 |
| month | 月份选择框，默认值为空，提交时不会验证格式 |
| week | 周选择框，默认值为空，提交时不会验证格式 |
| time | 时间选择框，默认值为空，提交时不会验证格式 |
| datetime-local | 日期+时间选择框，默认值为空，提交时不会验证格式 |
20.5.3 form标签新增属性
| 属性名 | 功能 |
|---|---|
| novalidate | 如果给 form 标签设置了该属性，表单提交的时候，不再进行验证。 |
20.6 新增多媒体标签
20.6.1 视频标签
**< video >**标签用来定义视频，它是双标签。
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL地址 | 视频地址 |
| width | 像素值 | 设置播放器宽度 |
| height | 像素值 | 设置播放器高度 |
| controls | - | 向用户显示视频控件（比如播放、暂停按钮） |
| muted | - | 视频静音 |
| autoplay | - | 视频自动播放 |
| loop | - | 循环播放 |
| poster | URL地址 | 视频封面 |
| preload | auto/metadata/none | 视频预加载，如果使用autoplay，则忽略该属性。 none：不预加载 metadata：仅预先获取视频的元数据 auto：下载整个视频文件，即使用户不希望使用它 |
20.6.2 音频标签
**< audio >**标签用来定义音频，它是双标签。
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL地址 | 音频地址 |
| controls | - | 向用户显示音频控件 |
| autoplay | - | 自动播放 |
| muted | - | 音频静音 |
| loop | - | 循环播放 |
| preload | auto/metadata/none | 音频预加载，如果使用autoplay，则忽略该属性。 none：不预加载 metadata：仅预先获取音频的元数据 auto：下载整个音频文件，即使用户不希望使用它 |
20.7 新增全局属性（了解）
| 属性名 | 功能 |
|---|---|
| contenteditable | 表示元素是否可被用户编辑吗，可选值为true或false |
| draggable | 表示元素可以被拖动，可选值为true或false |
| hidden | 隐藏元素（不占位） |
| spellcheck | 规定是否对元素进行拼写和语法检查，可选值为true或false |
| contextmenu | 规定元素的上下文菜单，用户在鼠标右击元素时显示 |
| data-x | 用于存储页面的私有定制数据 |
20.8 HTML5兼容性处理
-
添加元信息，让浏览器处于最优渲染模式
<!--设置IE总是使用最新的文档模式进行渲染--> <meta http-quiv="X-UA-Compatible" content="IE-Edge"> <!--优先使用 webkit（Chromium）内核进行渲染，针对360等双核浏览器--> <meta name="renderer" content="webkit"> -
使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。
<!--[if lt ie 9]> <script src="xxx/html5shiv.js"></script> <!--[endif]> -
示例：
<!--[if IE 8]>仅IE8可见<![endif]> <!--[if gt IE 8]>仅IE8以上可见<![endif]> <!--[if lt IE 8]>仅IE8以下可见<![endif]> <!--[if gte IE 8]>仅IE8及以上可见<![endif]> <!--[if lte IE 8]>仅IE8及以下可见<![endif]> <!--[if !IE 8]>非IE8的IE可见<![endif]>
21 CSS3简介
- CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际 面临的问题。
- CSS3 在未来会按照模块化的方式去发展： https://www.w3.org/Style/CSS/current-work.html
- CSS3 的新特性如下：
- 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。
- 新增了更好的视觉效果，例如：圆角、阴影、渐变等。
- 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。
- 新增了全新的布局方案 —— 弹性盒子。
- 新增了 Web 字体，可以显示用户电脑上没有安装的字体。
- 增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制 透明度。
- 增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。
- 增加动画与过渡效果，让效果的变换更具流线性、平滑性。
21.2 CSS3私有前缀
如下代码中的 -webkit- 就是私有前缀
div {
width:400px;
height:400px;
-webkit-border-radius: 20px;
}
-
W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核， 使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。
-
举个例子：
-webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -
查询 CSS3 兼容性的网站：https://caniuse.com/
21.3 常用浏览器私有前缀
Chrome 浏览器： -webkit
Safari 浏览器： -webkit
Firefox 浏览器： -moz
Edge 浏览器： -webkit
旧 Opera 浏览器： -o
旧 IE 浏览器： -ms
注意：
我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因 为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助 现代的构建工具，去帮我们添加私有前缀。
22 CSS3基本语法
22.1 CSS3新增长度单位
- rem 根元素字体大小的倍数，只与根元素字体大小有关
- vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。
- vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。
- vmax 视口宽高中大的那个的百分之多少。（了解即可）
- vmin 视口宽高中小的那个的百分之多少。（了解即可）
22.2 CSS3新增颜色设置方式
CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla ，由于之前已经详细讲解，此处略 过。
22.3 CSS3新增选择器
CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素；这些在 CSS2 中已经详细讲解，此处略过。
22.4 CSS3新增盒模型相关属性
22.4.1 box-sizing 怪异盒模型
使用 box-sizing 属性可以设置盒模型的两种类型
| 可选值 | 含义 |
|---|---|
| **content-box ** | width 和 height 设置的是盒子内容区的大小。（默认值） |
| border-box | width 和 height 设置的是盒子总大小。（怪异盒模型） |
22.4.2 resize 调整盒子大小
使用 resize 属性可以控制是否允许用户调节元素尺寸。
| 值 | 含义 |
|---|---|
| none | 不允许用户调整元素大小。 (默认) |
| both | 用户可以调节元素的宽度和高度。 |
| horizontal | 用户可以调节元素的宽度 。 |
| vertical | 用户可以调节元素的高度。 |
22.4.3 box-shadow 盒子阴影
使用 box-shadow 属性为盒子添加阴影。
-
语法：
box-shadow: h-shadow v-shadow blur spread color inset; -
各个值的含义：
值 含义 h-shadow 水平阴影的位置，必须填写，可以为负值 v-shadow 垂直阴影的位置，必须填写，可以为负值 blur 可选，模糊距离 spread 可选，阴影的外延值 color 可选，阴影的颜色 **inset ** 可选，将外部阴影改为内部阴影 -
默认值： box-shadow:none 表示没有阴影
-
示例：
/* 写两个值，含义：水平位置、垂直位置 */ box-shadow: 10px 10px; /* 写三个值，含义：水平位置、垂直位置、颜色 */ box-shadow: 10px 10px red; /* 写三个值，含义：水平位置、垂直位置、模糊值 */ box-shadow: 10px 10px 10px; /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */ box-shadow: 10px 10px 10px red; /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */ box-shadow: 10px 10px 10px 10px blue; /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */ box-shadow: 10px 10px 20px 3px blue inset;
22.4.4 opacity 不透明度
-
opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完 全不透明。
opacity 与 rgba 的区别？
opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。
22.5 CSS3 新增背景属性
22.5.1 background-origin
- 作用：设置背景图的原点。
- 语法：
- padding-box ：从 padding 区域开始显示背景图像。—— 默认值
- border-box ： 从 border 区域开始显示背景图像。
- content-box ： 从 content 区域开始显示背景图像。
22.5.2 background-clip
-
作用：设置背景图的向外裁剪的区域。
-
语法：
- border-box ： 从 border 区域开始向外裁剪背景。 —— 默认值
- padding-box ： 从 padding 区域开始向外裁剪背景。
- content-box ： 从 content 区域开始向外裁剪背景。
- text ：背景图只呈现在文字上。
注意：若值为 text ，那么 backgroun-clip 要加上 -webkit- 前缀。
22.5.3 background-size
-
作业：设置背景图的尺寸。
-
语法：
-
用长度值指定背景图片大小，不允许负值。
background-size: 300px 200px; -
用百分比指定背景图片大小，不允许负值。
background-size: 100% 100%; -
auto ： 背景图片的真实大小。 —— 默认值
-
contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整 背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。
background-size: contain; -
cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要 注意：背景图片有可能显示不完整。—— 相对比较好的选择
background-size: cover;
-
22.5.4 backgorund 复合属性
-
语法：
background: color url repeat position / size origin clip注意：
- origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如 果设置了两个值，前面的是 origin ，后面的 clip 。
- size 的值必须写在 position 值的后面，并且用 / 分开。
22.5.5 多背景图
CSS3 允许元素设置多个背景图片
/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
url(../images/bg-rt.png) no-repeat right top,
url(../images/bg-lb.png) no-repeat left bottom,
url(../images/bg-rb.png) no-repeat right bottom;
22.6 CSS3新增边框属性
22.6.1 边框圆角
-
在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角。
-
同时设置四个角的圆角：
border-radius:10px; -
分开设置每个角的圆角（几乎不用）：
属性名 作用 border-top-left-radius 设置左上角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的 x 半径、 y 半径。border-top-right-radius 设置右上角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的 x 半径、 y 半径。border-bottom-right-radius 设置右下角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的 x 半径、 y 半径。border-bottom-left-radius 设置左下角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的 x 半径、 y 半径。 -
分开设置每个角的圆角，综合写法（几乎不用）：
border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y
22.6.2 边框外轮廓（了解）
-
outline-width ：外轮廓的宽度。
-
outline-color ：外轮廓的颜色。
-
outline-style ：外轮廓的风格。
- none ： 无轮廓
- dotted ： 点状轮廓
- dashed ： 虚线轮廓
- solid ： 实线轮廓
- double ： 双线轮廓
-
outline-offset 设置外轮廓与边框的距离，正负值都可以设置。
注意： outline-offset 不是 outline 的子属性，是一个独立的属性。
-
outline 复合属性
outline:50px solid blue;
22.7 CSS3新增文本属性
22.7.1 文本阴影
-
在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。
-
语法：
text-shadow: h-shadow v-shadow blur color;值 描述 h-shadow 必需写，水平阴影的位置。允许负值。 v-shadow 必需写，垂直阴影的位置。允许负值。 blur 可选，模糊的距离。 color 可选，阴影的颜色 默认值： text-shadow:none 表示没有阴影。
22.7.2 文本换行
-
在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。
-
常用值如下：
值 含义 normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值） pre 原样输出，与 pre 标签的效果相同。 pre-wrap 在 pre 效果的基础上，超出元素边界自动换行。 pre-line 在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格 会忽略。 nowrap 强制不换行
22.7.3 文本溢出
-
在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
-
常用值如下：
值 含义 clip 当内联内容溢出时，将溢出部分裁切掉。 （默认值） ellipsis 当内联内容溢出块容器时，将溢出部分替换为 … 。 注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为 nowrap 值。
22.7.4 文本修饰
-
CSS3 升级了 text-decoration 属性，让其变成了复合属性。
text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor -
子属性及其含义：
- text-decoration-line 设置文本装饰线的位置
- none ： 指定文字无装饰 （默认值）
- underline ： 指定文字的装饰是下划线
- overline ： 指定文字的装饰是上划线
- line-through ： 指定文字的装饰是贯穿线
- text-decoration-style 文本装饰线条的形状
- solid ： 实线 （默认）
- double ： 双线
- dotted ： 点状线条
- dashed ： 虚线
- wavy ： 波浪线
- text-decoration-color 文本装饰线条的颜色
- text-decoration-line 设置文本装饰线的位置
22.7.5 文本描边
注意：文字描边功能仅 webkit 内核浏览器支持。
- -webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
- -webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
- -webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。
22.8 CSS3 新增渐变
22.8.1 线性渐变
-
多个颜色之间的渐变， 默认从上到下渐变。
background-image: linear-gradient(red,yellow,green); -
使用关键词设置线性渐变的方向。
background-image: linear-gradient(to top,red,yellow,green); background-image: linear-gradient(to right top,red,yellow,green); -
使用角度设置线性渐变的方向。
background-image: linear-gradient(30deg,red,yellow,green); -
调整开始渐变的位置。
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);
22.8.2 径向渐变
-
多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）
background-image: radial-gradient(red,yellow,green); -
使用关键词调整渐变圆的圆心位置。
background-image: radial-gradient(at right top,red,yellow,green); -
使用像素值调整渐变圆的圆心位置。
background-image: radial-gradient(at 100px 50px,red,yellow,green); -
调整渐变形状为正圆 。
background-image: radial-gradient(100px,red,yellow,green); background-image: radial-gradient(50px 100px,red,yellow,green);
- 调整形状的半径 。
background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(50px 100px,red,yellow,green);
- 调整开始渐变的位置。
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
22.8.3 重复渐变
无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变
- 使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。
- 使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient 。
我们可以利用渐变，做出很多有意思的效果：例如：横格纸、立体球等等。
22.9 Web字体
22.9.1 基本用法
可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。
-
语法（简写）
@font-face { font-family: "情书字体"; src: url('./方正手迹.ttf'); } -
语法（高兼容性写法）
@font-face { font-family: "atguigu"; font-display: swap; src: url('webfont.eot'); /* IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), url('webfont.woff') format('woff'), /* chrome、firefox */ url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android*/ url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */ }
22.9.2 定制字体
- 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
- 可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont
22.9.3 字体图标
- 相比图片更加清晰。
- 灵活性高，更方便改变大小、颜色、风格等。
- 兼容性好， IE 也能支持。
字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多的阿里图标库作为演示。
阿里图标官网地址：https://www.iconfont.cn/
22.10 2D变换
前提：二维坐标系如下图所示
22.10.1 2D位移
2D 位移可以改变元素的位置，具体使用方式如下：
-
先给元素添加 转换属性 transform
-
编写 transform 的具体值，相关可选值如下：
值 含义 translateX 设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。 translateY 设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度的百分比。 translate 一个值代表水平方向，两个值代表：水平和垂直方向。 -
注意点：
位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。
浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
transform 可以链式编写，例如：
transform:translateX(30px) translateY(40px);位移对行内元素无效。
位移配合定位，可实现元素水平垂直居中
.box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
22.10.2 2D缩放
2D 缩放是指：让元素放大或缩小，具体使用方式如下：
-
先给元素添加 转换属性 transform
-
编写 transform 的具体值，相关可选值如下：
值 含义 scaleX 设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。 scaleY 设置垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。 scale 同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。 -
注意点：
- scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解。
- 借助缩放，可实现小于 12px 的文字。
22.10.3 2D旋转
2D 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：
-
先给元素添加 转换属性 transform
-
编写 transform 的具体值，相关可选值如下：
值 含义 rotate 设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。
注意： rotateZ(20deg) 相当于 rotate(20deg) ，当然到了 3D 变换的时候，还能写：
rotate(x,x,x)
22.10.4 2D扭曲（了解即可）
2D 扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可，具体使用方式如下：
-
先给元素添加 转换属性 transform
-
编写 transform 的具体值，相关可选值如下：
值 含义 skewX 设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯 。 skewY 设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯 。 skew 一个值代表 skewX ，两个值分别代表： skewX 、 skewY
22.10.5 多重变换
多个变换，可以同时使用一个 transform 来编写。
transform: translate(-50%, -50%) rotate(45deg);
注意点：多重变换时，建议最后旋转。
22.10.6 变换原点
- 元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。
- 修改变换原点对位移没有影响， 对旋转和缩放会产生影响。
- 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
- 如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%
- transform-origin: 50% 50% ， 变换原点在元素的中心位置，百分比是相对于自身。—— 默认值
- transform-origin: left top ，变换原点在元素的左上角 。
- transform-origin: 50px 50px ， 变换原点距离元素左上角 50px 50px 的位置
- transform-origin: 0 ，只写一个值的时候，第二个值默认为 50% 。
22.11 3D变换
22.11.1 开启3D空间
重要原则：元素进行 3D 变换的首要操作：父元素必须开启 3D 空间！
使用 transform-style 开启 3D 空间，可选值如下：
- flat ： 让子元素位于此元素的二维平面内（ 2D 空间）—— 默认值
- preserve-3d ： 让子元素位于此元素的三维空间内（ 3D 空间）
22.11.2 设置景深
何为景深？—— 指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立体。
使用 perspective 设置景深，可选值如下:
- none ： 不指定透视 ——（默认值）
- 长度值 ： 指定观察者距离 z=0 平面的距离，不允许负值。
注意： perspective 设置给发生 3D 变换元素的父元素！
22.11.3 透视点位置
所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。
使用 perspective-origin 设置观察者位置（透视点的位置），例如：
/* 相对坐标轴往右偏移400px， 往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）*/ perspective-origin: 400px 300px;注意：通常情况下，我们不需要调整透视点位置。
22.11.4 3D位移
3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移，具体使用方式如下：
- 先给元素添加 转换属性 transform
- 编写 transform 的具体值， 3D 相关可选值如下：
| 值 | 含义 |
|---|---|
| translateZ | 设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能 写百分比。 |
| translate3d | 第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，且均 不能省略。 |
22.11.5 3D旋转
3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，具体使用方式如下：
- 先给元素添加 转换属性 transform
- 编写 transform 的具体值， 3D 相关可选值如下：
| 值 | 含义 |
|---|---|
| rotateX | 设置 x 轴旋转角度，需指定一个角度值( deg )，面对 x 轴正方向：正值顺时针，负 值逆时针。 |
| rotateY | 设置 y 轴旋转角度，需指定一个角度值( deg )，面对 y 轴正方向：正值顺时针，负 值逆时针。 |
| rotate3d | 前 3 个参数分别表示坐标轴： **x , y , z ，**第 4 个参数表示旋转的角度，参数不允 许省略。 例如： transform: rotate3d(1,1,1,30deg) ，意思是： x 、 y 、 z 分别旋转 30 度。 |
22.11.6 3D缩放
3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，具体使用方式如下：
- 先给元素添加 转换属性 transform
- 编写 transform 的具体值， 3D 相关可选值如下：
| 值 | 含义 |
|---|---|
| scaleZ | 设置 z 轴方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小 于 1 缩小。 |
| scale3d | 第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，参数不允许 省略。 |
22.11.7 多重变换
多个变换，可以同时使用一个 transform 来编写。
transform: translateZ(100px) scaleZ(3) rotateY(40deg);
注意点：多重变换时，建议最后旋转。
22.11.8 背部可见性
使用 backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：
- visible ： 指定元素背面可见，允许显示正面的镜像。—— 默认值
- hidden ： 指定元素背面不可见
注意： backface-visibility 需要加在发生 3D 变换元素的自身上。
22.12 过度
过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一 种样式。
22.12.1 transition-property
- 作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡 效果。
- 常用值：
- none ：不过渡任何属性。
- all ：过渡所有能过渡的属性。
- 具体某个属性名 ，例如： width 、 heigth ，若有多个以逗号分隔。
不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持 过渡。
常见的支持过渡的属性有：颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属 性、 3D 变换属性、阴影。
22.12.2 transition-duration
- 作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。
- 常用值：
- 0 ：没有任何过渡时间 —— 默认值。
- s 或 ms ：秒或毫秒。
- 列表 ：
- 如果想让所有属性都持续一个时间，那就写一个值。
- 如果想让每个属性持续不同的时间那就写一个时间的列表。
22.12.3 transition-delay
- 作用：指定开始过渡的延迟时间，单位： s 或 ms
22.12.4 transition-timing-function
-
作用：设置过渡的类型
-
常用值：
- ease ： 平滑过渡 —— 默认值
- linear ： 线性过渡
- ease-in ： 慢 → 快
- ease-out ： 快 → 慢
- ease-in-out ： 慢 → 快 → 慢
- step-start ： 等同于 steps(1, start)
- step-end ： 等同于 steps(1, end)
- steps( integer,?) ： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的 步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个 参数默认值为 end 。
- cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型。
在线制作贝赛尔曲线：https://cubic-bezier.com
扫一扫
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
