CSS知识点复习整理
CSS知识点复习整理
-
- 1.常用CSS属性
- 2.CSS样式应用到元素上
- 3.内联样式（inline style）
- 4.文档样式表（document style sheet）
- 5.外部样式表
- 6.@import
- 7.CSS选择器（selector）
- 8.通用选择器（universal selector）
- 9.元素选择器（type selectors）
- 10.类选择器（class selectors）
- 11.class注意点
- 12.id选择器（id selectors）
- 13.id注意点
- 14.设置网页图标
- 15.最常用的CSS属性
- 16.CSS属性 - background-color
- 17.CSS属性 - color
- 18.颜色
- 19.RGB颜色
- 20.RGBA颜色
- 21.CSS文本属性 - text-decoration
- 22.CSS文本属性 - letter-spacing、word-spacing
- 23.CSS文本属性 - text-transform
- 24.CSS文本属性 - text-indent
- 25.CSS文本属性 - text-align
- 26.CSS字体属性 - font-size
- 27.CSS字体属性 - font-family
- 28.CSS字体属性 - font-weight
- 29.CSS字体属性 - font-stlye
- 30.CSS字体属性 - font-variant
- 31.CSS字体属性 - line-height
- 32.CSS字体属性 - font
- 33.CSS属性的继承
- 34.CSS属性的层叠
- 35.CSS属性的优先级
- 36.CSS属性使用经验
- 37.块级、行内级元素
- 38.替换、非替换元素
- 39.元素的分类总结
- 40.CSS属性 - display
- 41.CSS属性 - inline-block
- 42.CSS属性 - visibility
- 43.CSS属性 - overflow
- 44.元素之间的空格
- 45.元素之间的包含关系
- 46.盒子模型（Box Model）
- 47.盒子模型 - 内容相关属性
- 48.盒子模型 - 内边距相关属性
- 49.盒子模型 - 外边距相关属性
- 50.盒子模型 - 上下margin传递
- 51.盒子模型 - 上下margin折叠
- 52.盒子模型 - border（边框）
- 53.盒子模型 - 边框样式的取值
- 54.盒子模型 - 边框相关的属性
- 55.盒子模型 - 边框的形状
- 56.盒子模型 - 边框妙用-实现三角形
- 57.盒子模型 - 行内级非替换元素的注意点
- 58.CSS属性 - border-*-*-radius
- 59.CSS属性 - border-radius
- 60.CSS属性 - outline
- 61.CSS属性 - box-shadow
- 62.CSS属性 - text-shadow
- 63.CSS属性 - box-sizing
- 64.CSS属性 - 元素的水平居中显示
- 65.CSS背景属性 - background-image
- 66.CSS背景属性 - background-repeat
- 67.CSS背景属性 - background-size
- 68.CSS背景属性 - background-position
- 69.CSS背景属性 - background-attachment
- 70.CSS背景属性 - background
- 71.CSS背景属性 - cursor
- 72.CSS属性 - 定位 - 标准流
- 73.CSS属性 - 定位 - margin、padding定位
- 74.CSS属性 - 定位 - position
- 75.CSS属性 - 定位 - static - 静态定位
- 76.CSS属性 - 定位 - relative - 相对定位
- 77.CSS属性 - 定位 - fixed - 固定定位
- 78.CSS属性 - 定位 - 脱标元素的特点
- 79.CSS属性 - 定位 - absolute - 绝对定位
- 80.CSS属性 - 定位 - 子绝父相
- 81.CSS属性 - 定位 - 绝对定位技巧
- 82.CSS属性 - 定位 - position总结
- 83.CSS属性 - 定位 - 元素的层叠
- 84.CSS属性 - 定位 - z-index
- 85.CSS属性 - 浮动 - float
- 86.CSS属性 - 浮动 - 规则一
- 87.CSS属性 - 浮动 - 规则二
- 88.CSS属性 - 浮动 - 规则三
- 89.CSS属性 - 浮动 - 规则四
- 90.CSS属性 - 浮动 - 规则五
- 91.CSS属性 - 浮动 - 存在的问题
- 92.CSS属性 - 浮动 - 清浮动的常见方法
- 93.CSS属性 - 浮动 - 清浮动clear
- 94.CSS属性 - 语义化元素
- 95.CSS属性 - 媒体元素 - video
- 96.CSS选择器 - 属性选择器 - [att]
- 97.CSS选择器 - 属性选择器 - [att=val]
- 98.CSS选择器 - 属性选择器 - [attr*=val]
- 98.CSS选择器 - 属性选择器 - [attr^=val]
- 99.CSS选择器 - 属性选择器 - [attr|=val]
- 100.CSS选择器 - 属性选择器 - [attr~=val]
- 100.CSS选择器 - 属性选择器 - [attr$=val]
- 101.CSS选择器 - 属性选择器 - [attr$=val]
- 102.CSS选择器 - 属性选择器 - [attr$=val]
- 103.CSS选择器 - 相邻兄弟选择器
- 104.CSS选择器 - 全体兄弟选择器
- 105.CSS选择器 - 选择器组 - 交集选择器
- 106.CSS选择器 - 选择器组 - 并集选择器
- 107.CSS选择器 - 伪类（pseudo-classes）
- 108.CSS选择器 - 动态伪类（dynamic pseudo-classes）
- 108.CSS选择器 - 动态伪类 - :focus
- 108.CSS选择器 -去除a元素默认的:focus效果
- 109.CSS选择器 -结构伪类（structural pseudo-classes） - :nth-child( )
- 110.CSS选择器 -结构伪类 - :nth-child( )
- 111.CSS选择器 -结构伪类 - :nth-last-child( )
- 112.CSS选择器 -结构伪类 - :nth-of-type( )、:nth-last-of-type( )
- 113.CSS选择器 -结构伪类
- 114.CSS选择器 -结构伪类 - :empty
- 115.CSS选择器 -否定伪类（negation pseudo-class）
- 116.CSS选择器 -伪元素（pseudo-elements）
- 117.CSS选择器 -伪元素 - ::first-line
- 118.CSS选择器 -伪元素 - ::first-letter
- 119.CSS选择器 -伪元素 - ::before和::after
- 总结
1.常用CSS属性
看俩眼先：
文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
字体：font、font-family、font-style、font-size、font-variant、font-weight
背景：background、background-color、background-image、background-repeat、background-attachment、background-position
盒子模型：width、height、border、margin、padding
列表：list-style
表格：border-collapse
显示：display、visibility、overflow、opacity、filter
定位： vertical-align、position、left、top、right、bottom、float、clear
2.CSS样式应用到元素上
内联样式（inline style）
文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）
3.内联样式（inline style）
将样式直接写在元素的style属性上
4.文档样式表（document style sheet）
将样式写在head元素的style元素中
type属性值默认是text/css
5.外部样式表
- 将样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用
type属性值默认是text/css
- 在CSS文件中使用@charset指定文件编码，一般都是UTF-8
6.@import
可以在style元素或者CSS文件中使用@import导入其他的CSS文件，不建议使用，效率比link元素低
7.CSS选择器（selector）
通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）
8.通用选择器（universal selector）
所有的元素，一般用来给所有元素作一些通用性的设置
9.元素选择器（type selectors）
例如：设置所有的div元素，或者叫做“标签选择器”
10.类选择器（class selectors）
例如：设置class值有one的元素
11.class注意点
- 一个元素可以有多个class值，每个class之间用空格隔开
- class值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
- 最好不要用标签名作为class值
12.id选择器（id selectors）
例如：设置id值为one的元素
13.id注意点
- 一个HTML文档里面的id值是唯一的，不能重复
- id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
- 最好不要用标签名作为id值
14.设置网页图标
- link元素除了可以用来引入CSS文件，还可以设置网页的图标（href的值是图标链接）
- link元素的rel属性不能省略，用来指定文档与链接资源的关系
- 一般rel若确定，相应的type也会默认确定，所以可以省略type
- 网页图标支持的图片格式是ico、png，常用大小是16x16、24x24、32x32（单位：像素）
15.最常用的CSS属性
- color：前景色（文字颜色）
- font-size：文字大小
- background-color：背景色
- width ：宽度
- height：高度
16.CSS属性 - background-color
- background-color决定背景色
17.CSS属性 - color
- color属性用来设置文本内容的前景色
包括文字、装饰线、边框、外轮廓等的颜色
18.颜色
- 基本颜色关键字
red：红色，black：黑色，yellow：黄色，blue：蓝色，purple：紫色，white：白色 - RGB颜色
十进制：rgb(red, green, blue)
十六进制：#rrggbb、#rgb - RGBA颜色：rgba(red, green, blue, alpha)
19.RGB颜色
- RGB颜色：通过R（Red）、G（Green）、B（Blue）三种颜色通道的变化、叠加产生各式各样的颜色
- 十进制表示形式
rgb(red, green, blue)，每一种颜色取值范围0~255
rgb(255, 0, 0)：红色，rgb(0, 255, 0)：绿色，rgb(0, 0, 255)：蓝色，rgb(255, 255, 0)：黄色，rgb(0, 0, 0)：黑色，rgb(255, 255, 255)：白色
- 十六进制表示形式
#rrggbb，每一种颜色取值范围00~FF，大小写都可以：#ff0000：红色，#00ff00：绿色，#0000ff：蓝色，#000000：黑色，#ffffff：白色，#ffff00：黄色
#rgb
20.RGBA颜色
- rgba(red, green, blue, alpha)
alpha取值范围是0.0~1.0
0代表完全透明，1代表完全不透明
- 关键字transparent等价于rgba(0, 0, 0, 0)，完全透明
21.CSS文本属性 - text-decoration
- none：无任何装饰线
可以去除a元素默认的下划线 - underline：下划线
- overline：上划线
- line-through：中划线（删除线）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
a{
text-decoration:none;
color: #333;
}
.taobao{
color: #00ffff;
}
p{
text-decoration: overline;
}
div{
text-decoration: line-through;
}
span{
text-decoration: underline;
}
style>
head>
<body>
<a href="#">百度一下a>
<div>
<a href="#" class="taobao">淘宝一下a>
div>
<p>hahahahap>
<div>hehehediv>
<span>hihihispan>
<u>heiheieheiu>
body>
html>
22.CSS文本属性 - letter-spacing、word-spacing
- letter-spacing、word-spacing分别用于设置字母、单词之间的间距
默认是0，可以设置为负数
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.p1{
letter-spacing: 10px;
/* letter-spacing: -10px; */
}
.p2{
word-spacing: 10px;
/* word-spacing: -10px; */
}
style>
head>
<body>
<p class="p1">hello worldp>
<p>hello worldp>
<p class="p2">hello worldp>
body>
html>
23.CSS文本属性 - text-transform
- capitalize：将每个单词的首字符变为大写
- uppercase：将每个单词的所有字符变为大写
- lowercase：将每个单词的所有字符变为小写
- none：没有任何影响
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.text1{
text-transform: capitalize;
}
.text2{
text-transform: uppercase;
}
.text3{
text-transform: lowercase;
}
style>
head>
<body>
<div class="text1">hello worddiv>
<div class="text2">hello worddiv>
<div class="text3">Hello Worddiv>
body>
html>
24.CSS文本属性 - text-indent
- text-indent用于设置第一行内容的缩进，刚好是缩进2个文字
text-indent: 2em;
25.CSS文本属性 - text-align
- left：左对齐
- right：右对齐
- center：正中间显示
- justify：两端对齐
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* left/right/center */
box1{
background-color: blue;
text-align: center;
}
box2{
background-color: purple;
text-align: center;
}
box3{
background-color: grey;
text-align: center;
}
.inner1{
background-color: purple;
width: 200px;
}
.box4{
background-color: #0045fd;
/* 让内嵌子元素div居中必须先取消其块级特性 */
text-align: center;
}
.inner2{
background-color: rebeccapurple;
width: 200px;
/* 取消块级元素独占一行的特性 */
display: inline-block;
}
/* 2.justify */
.box5{
background-color: red;
color: white;
width: 500px;
/* text-align:justify对最后一行没有效果 */
text-align:justify;
/* text-align-last: justify;设置最后一行 */
/* text-align-last: justify; */
}
style>
head>
<body>
<div class="box1">hahahhadiv>
<div class="box2">
<img src="" alt="">
div>
<div class="box3">
<div class="inner1">hehehehhediv>
div>
<div class="box4">
<div class="inner2">hihihihidiv>
div>
<div class="box5">
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
div>
body>
html>
26.CSS字体属性 - font-size
-
具体数值+单位
比如100px
也可以使用em单位：1em代表100%，2em代表200%，0.5em代表50% -
百分比
基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
27.CSS字体属性 - font-family
- font-family用于设置文字的字体名称
- 可以设置1个或者多个字体名称（从左到右按顺序选择字体，直到找到可用的字体为止）
- 一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文
所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面
28.CSS字体属性 - font-weight
font-weight用于设置文字的粗细（重量），不带单位
strong、b、h1~h6等标签的font-weight默认就是bold
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900：每一个数字表示一个重量
- normal：等于400
- bold：等于700
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.price{
color: red;
font-weight: 700;
/* font-weight: bold; */
}
style>
head>
<body>
<strong>hahhahahastrong>
<h1>标题h1>
<p>
<span class="price">￥99span>
p>
body>
html>
29.CSS字体属性 - font-stlye
- font-style用于设置文字的常规、斜体显示
normal：常规显示
italic：用字体的斜体显示，前提是font-family字体支持斜体
oblique：文本倾斜显示 - em、i、cite、address、var、dfn等元素的font-style默认就是italic
- 设置font-style为italic的span元素，使用效果等价于em元素
30.CSS字体属性 - font-variant
font-variant可以影响小写字母的显示形式
- normal：常规显示
- small-caps：将小写字母替换为缩小过的大写字母
31.CSS字体属性 - line-height
- line-height用于设置文本的最小行高
- 行高可以先简单理解为一行文字所占据的高度
- 行高的严格定义是：两行文字基线（baseline）之间的间距
- 基线（baseline）：与小写字母x最底部对齐的线
- 注意区分height和line-height的区别
height：元素的整体高度
line-height：元素中每一行文字所占据的高度 - 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
让line-height等同于height
32.CSS字体属性 - font
- font是一个缩写属性
font-style font-variant font-weight font-size/line-height font-family
- font-style、font-variant、font-weight可以随意调换顺序，也可以省略
- /line-height可以省略，如果不省略，必须跟在font-size后面
- font-size、font-family不可以调换顺序，不可以省略
33.CSS属性的继承
- 一个元素如果没有设置某属性的值，就会跟随父元素的值
- 不能继承的属性，一般可以使用inherit值强制继承
- CSS属性继承的是计算值，并不是当初编写属性时的指定值（字面值）
34.CSS属性的层叠
- CSS允许多个相同名字的CSS属性层叠同在一个元素上
- 浏览器的开发者工具非常清晰地显示了哪个CSS属性会生效
- 哪个CSS属性会生效，取决于CSS属性所处环境的优先级高低
35.CSS属性的优先级
- 按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
!important：10000
内联样式：1000
id选择器：100
类选择器、属性选择器、伪类：10
元素选择器、伪元素：1
通配符：0 - 比较优先级的严谨方法
从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
如果数量相同，比较下一个较小的权值，以此类推
如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”
36.CSS属性使用经验
- 为何有时候编写的CSS属性不好使，有可能是因为
选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对 - 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错
37.块级、行内级元素
根据元素的显示（能不能在同一行显示）类型，HTML元素可以主要分为2大类
- 块级元素（block-level elements）
独占父元素一行
比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等 - 行内级元素（inline-level elements）
多个行内级元素可以在父元素的同一行中显示
比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等
38.替换、非替换元素
根据元素的内容（是否浏览器会替换掉元素）类型，HTML元素可以主要分为2大类
- 替换元素（replaced elements）
元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
比如img、input、iframe、video、embed、canvas、audio、object等 - 非替换元素（non-replaced elements）
和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等
39.元素的分类总结
元素的分类总结
40.CSS属性 - display
- block：让元素显示为块级元素
- inline：让元素显示为行内级元素
- none：隐藏元素
- inline-block：让元素同时具备行内级、块级元素的特征
41.CSS属性 - inline-block
- 可以让元素同时具备块级、行内级元素的特征
跟其他行内级元素在同一行显示
可以随意设置宽高
宽高默认由内容决定 - 可以理解为
对外来说，它是一个行内级元素
对内来说，它是一个块级元素 - 常见用途
让行内级非替换元素（比如a、span等）能够随时设置宽高
让块级元素（比如div、p等）能够跟其他元素在同一行显示
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 1.样式重置 */
ul {
/* 不常用 */
/* list-style-image: url(""); */
/* margin-top: 8px; */
/* list-style-position */
/* 不常用 */
/* list-style-position: outside; */
/* list-style-position: inside; */
/* list-style:是 list-style-type、list-style-image、list-style-position的缩写属性*/
/* 前俩个存在一个就行 */
/* list-style: outside url(""); */
/* 常规操作 */
list-style: none;
padding: 0;
margin: 0;
}
/* 2.整体样式 */
a {
text-decoration: none;
color: #0000cc;
}
/* 3.每一个li的样式 */
.page ul li {
display: inline-block/* 对内是行元素，对外是快元素 =>所有li在一行显示 */
}
.page ul li a {
display: inline-block;/* 对外是块级元素，可设置宽高 */
width: 34px;
height: 34px;
border: 1px solid #e1e2e3;
/* 横向居中 */
text-align: center;
/* 行高=div高度->垂直居中 */
line-height: 34px;
/* 调整间距 */
margin-right: 5px;
}
.page ul li a:hover {
border: 1px solid #38f;
background-color: #f2f8ff;
}
/*叠加css属性 */
.page .prev a,.page .next a {
/* 并集选择器 */
width: 88px;
}
/* 4.点击后的a效果 */
.page .active {
border: none;
font-weight: 700;
color: #000;
}
.page .active:hover {
border: none;
background-color: transparent;/* transparent：透明 */
}
style>
head>
<body>
<div class="page">
<ul>
<li class="prev"><a href="#"><上一页a>li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a class="active">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">6a>li>
<li><a href="#">7a>li>
<li><a href="#">8a>li>
<li><a href="#">9a>li>
<li><a href="#">10a>li>
<li class="next"><a href="#">下一页>a>li>
ul>
div>
body>
html>
42.CSS属性 - visibility
- visible：显示元素
- hidden：隐藏元素
- visibility: hidden; 和 display: none; 的区别
visibility: hidden;
虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
display: none;
不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
43.CSS属性 - overflow
- overflow用于控制内容溢出时的行为
visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto：自动根据内容是否溢出来决定是否提供滚动机制
44.元素之间的空格
- 行内级元素（包括inline-block元素）的代码之间如果有空格，会被解析显示为空格
- 解决方法
给元素加float
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
/* 消除元素之间的空格 */
/* 1.设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size */
/* body {
font-size: 0;
} */
span,strong,div {
/* font-size: 16px; */
/* 2.直接设置浮动，注意：一般是基线对齐 */
float:left;
}
span {
background-color: #e67e22;
}
strong {
background-color: #9b59b6;
}
div {
display: inline-block;
background-color:#2ecc71;
}
style>
<body>
<span>spanspan>
<strong>strongstrong>
<img src="" alt="">
<div>div元素div>
body>
html>
45.元素之间的包含关系
- 块级元素、inline-block元素
一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）
特殊情况，p元素不能包含其他块级元素 - 行内级元素（比如a、span、strong等）
一般情况下，只能包含行内级元素
46.盒子模型（Box Model）
- 内容（content）
盒子里面装的东西 - 内边距（padding）
盒子边缘和里面装的东西之间的间距 - 边框（border）
就是盒子的边框，边缘部分 - 外边距（margin）
盒子和其他盒子之间的间距
47.盒子模型 - 内容相关属性
- width：宽度
min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width - height：高度
min-height：最小高度，无论内容多少，高度都大于或等于min-height
max-height：最大高度，无论内容多少，高度都小于或等于max-height
48.盒子模型 - 内边距相关属性
- padding-left：左内边距
- padding-right：右内边距
- padding-top：上内边距
- padding-bottom：下内边距
- padding：是padding-top、padding-right、padding-bottom、padding-left的简写属性
- 按照顺时针方向设值：top、right、bottom、left
- 如果缺少left, 那么left就使用right的值
- 如果缺少bottom, 那么bottom就使用top的
49.盒子模型 - 外边距相关属性
- margin-left：左外边距
- margin-right：右外边距
- margin-top：上外边距
- margin-bottom：下外边距
- margin：是margin-top、margin-right、margin-bottom、margin-left的简写属性
50.盒子模型 - 上下margin传递
- margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素 - margin-bottom传递
如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素 - 如何防止出现传递问题？
给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC: 设置overflow为auto - 建议
margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距
51.盒子模型 - 上下margin折叠
- 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
- 水平方向上的margin（margin-left、margin-right）永远不会collapse
- 折叠后最终值的计算规则
两个值进行比较，取较大的值 - 如何防止margin collapse？
只设置其中一个元素的margin - 两个兄弟块级元素之间上下margin的折叠
- 父子块级元素之间margin的折叠
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 100px;
height: 100px;
background-color: #ff0000;
}
/* 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠） */
/* 水平方向上的margin（margin-left、margin-right）永远不会collapse */
/* 如何防止margin collapse？
只设置其中一个元素的margin
*/
.box1 {
margin-bottom: 40px;
}
.box2 {
margin-top: 20px;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
body>
html>
52.盒子模型 - border（边框）
- 边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性 - 边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性 - 边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
53.盒子模型 - 边框样式的取值
- none：没有边框，边框颜色、边框宽度会被忽略
- dotted：边框是一系列的点
- dashed：边框是一条虚线
- solid：边框是一条实线
- double：边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值
- groove：边框看上去好象是雕刻在画布之内
- ridge：和grove相反，边框看上去好象是从画布中凸出来
- inset：该边框使整个框看上去好象是嵌在画布中
- outset：和inset相反，该边框使整个框看上去好象是从画布中凸出来
54.盒子模型 - 边框相关的属性
- border-top、border-right、border-bottom、border-left
- 边框颜色、宽度、样式的编写顺序任意
- border：统一设置4个方向的边框
55.盒子模型 - 边框的形状
- 边框的形状可能是
矩形、梯形、三角形等形状
56.盒子模型 - 边框妙用-实现三角形
57.盒子模型 - 行内级非替换元素的注意点
- 以下属性对行内级非替换元素不起作用
width、height、margin-top、margin-bottom - 以下属性对行内级非替换元素的效果比较特殊
padding-top、padding-bottom、上下方向的border - 以下属性对行内级非替换元素不起作用
width、height、margin-top、margin-bottom - 以下属性对行内级非替换元素的效果比较特殊
padding-top、padding-bottom、上下方向的border
58.CSS属性 - border---radius
- 圆角半径相关的属性有
- border---radius定义的是四分之一椭圆的半径
第1个值是水平半径
第2个值是垂直半径（如果不设置，就跟随水平半径的值）
- 还可以设置百分比
参考的是border-box的宽度 - border-top-left-radius: 55pt 25pt
59.CSS属性 - border-radius
- border-radius是一个缩写属性
- 斜线/前面是水平半径，后面是垂直半径
- 4个值的顺序是top-left、top-right、bottom-right、bottom-left（顺时针方向）
如果bottom-left没设置，就跟随top-right
如果bottom-right没设置，就跟随top-left
如果top-right没设置，就跟随top-left
60.CSS属性 - outline
- outline表示元素的外轮廓
不占用空间
默认显示在border的外面 - outline相关属性有
outline-width
outline-style：取值跟border的样式一样，比如solid、dotted等
outline-color
outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似 - 应用实例
去除a元素、input元素的focus轮廓效果
outline:none;
61.CSS属性 - box-shadow
box-shadow属性可以设置一个或者多个阴影
- 第1个length：水平方向的偏移，正数往右偏移
- 第2个length：垂直方向的偏移，正数往下偏移
- 第3个length：模糊半径（blur radius）
- 第4个length：延伸距离
- color：阴影的颜色，如果没有设置，就跟随color属性的颜色
- inset：外框阴影变成内框阴影
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: #f00;
/* =inset?&&{2,4}&&
第1个：水平方向的偏移，正数往右偏移
第2个：垂直方向的偏移，正数往下偏移
第3个：模糊半径（blur radius）
第4个：延伸距离（向四周）
：阴影的颜色，如果没有设置，就跟随color属性的颜色（可省略）
inset：外框阴影变成内框阴影（可省略）
*/
box-shadow: -15px 15px 5px orange inset;
}
style>
head>
<body>
<div class="box">div>
body>
html>
62.CSS属性 - text-shadow
- text-shadow用法类似于box-shadow，用于给文字添加阴影效果
- text-shadow同样适用于::first-line、::first-letter
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
font-size: 25px;
font-weight: 700;
text-shadow: 5px 5px 5px red,
-5px 5px 5px green;
}
p {
width: 500px;
}
p::first-line {
text-shadow: 2px 2px 2px orange;
}
p::first-letter {
font-size: 25px;
text-shadow: 2px 2px 2px purple;
}
style>
head>
<body>
<div class="box">你好啊div>
<p>
lalallalalalallalalalallalalal
lalallalalalallalalalallalalal
lalallalalalallalalalallalalal
lalallalalalallalalalallalalal
lalallalalalallalalalallalalal
lalallalalalallalalalallalalal
lalallalalalallalalalallalalal
lalallalalalallalalalallalalal
lalallalalalallalalalallalalal
p>
body>
html>
63.CSS属性 - box-sizing
box-sizing用来设置盒子模型中宽高的行为
- content-box
padding、border都布置在width、height外边 - border-box
padding、border都布置在width、height里边
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f00;
/* 默认不在宽高内 */
padding-bottom: 20px;
border-bottom: 20px solid purple;
/* 内容盒子 */
/* content-box：含义是设置宽高和高度时只是设置指定内容的高度 */
/* border-box：含义是设置宽高和高度时是内容+内边距+边框的宽度（内容被压缩了） */
/* box-sizing: content-box; */
box-sizing: border-box;
}
style>
head>
<body>
<div class="box">div>
<span>span元素span>
body>
html>
64.CSS属性 - 元素的水平居中显示
- 在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
- 行内级元素、inline-block元素
水平居中：在父元素中设置text-align: center - 块级元素
水平居中：margin: 0 auto
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
height: 200px;
background-color: #f00;
/* 1.普通文本 */
/* text-align: center; */
/* 2.行内元素 */
/* text-align: center; */
/* 3.图片：行内替换元素 */
/* text-align: center; */
/* 4.行内块级元素：inline-block */
/* text-align: center; */
text-align: center;/* 会让‘box’div的块级元素继承该属性导致文字居中 */
}
strong {
background-color: purple;
}
.ib {
display: inline-block;
width: 100px;
height: 100px;
background-color: orange;
}
.block {
background-color: yellowgreen;
width: 100px;
height: 100px;
/* 5.块级元素(在自身元素中添加该属性值) */
/* margin俩个值含义：（上下边距），（左右边距） */
margin: 0 auto;
}
style>
head>
<body>
<div class="box">
<div class="block">哈哈哈div>
<span>呵呵呵span>
div>
body>
html>
65.CSS背景属性 - background-image
- background-image用于设置元素的背景图片
会盖在(不是覆盖)background-color的上面 - 如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
66.CSS背景属性 - background-repeat
用于设置背景图片是否要平铺
- repeat：平铺
- no-repeat：不平铺
- repeat-x：只在水平方向平铺
- repeat-y：只在垂直平方向平铺
67.CSS背景属性 - background-size
用于设置背景图片的大小
- auto：以背景图本身大小显示
- cover：缩放背景图，以完全覆盖铺满元素
- contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
- percentage：百分比，相对于背景区（background positioning area）
- length：具体的大小，比如100px
68.CSS背景属性 - background-position
用于设置背景图片在水平、垂直方向上的具体位置
- 水平方向还可以设值：left、center、right
- 垂直方向还可以设值：top、center、bottom
- 如果只设置了1个方向，另一个方向默认是center
比如background-position: 80px; 等价于 background-position: 80px center;
69.CSS背景属性 - background-attachment
- scroll：背景图片跟随元素一起滚动（默认值）
- local：背景图片跟随元素以及元素内容一起滚动
- fixed：背景图片相对于浏览器窗口固定
70.CSS背景属性 - background
- background是一系列背景相关属性的简写属性，常用格式是
image position/size repeat attachment color
background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
其他属性也都可以省略，而且顺序任意
71.CSS背景属性 - cursor
cursor可以设置鼠标指针（光标）在元素上面时的显示样式
-
auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
-
default：由操作系统决定，一般就是一个小箭头
-
pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
-
text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
-
none：没有任何指针显示在元素上面
72.CSS属性 - 定位 - 标准流
默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
- 从左到右、从上到下按顺序摆放好
- 默认情况下，互相之间不存在层叠现象
73.CSS属性 - 定位 - margin、padding定位
- 在标准流中，可以使用margin、padding对元素进行定位
其中margin还可以设置负数 - 比较明显的缺点是
设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
不便于实现元素层叠的效果
74.CSS属性 - 定位 - position
- static：静态定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
75.CSS属性 - 定位 - static - 静态定位
- position属性的默认值
- 元素按照normal flow布局
- left 、right、top、bottom没有任何作用
76.CSS属性 - 定位 - relative - 相对定位
- 元素按照normal flow布局
- 可以通过left、right、top、bottom进行定位
定位参照对象是元素自己原来的位置 - left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
- 相对定位的应用场景
在不影响其他元素位置的前提下，对当前元素位置进行微调
77.CSS属性 - 定位 - fixed - 固定定位
- 元素脱离normal flow（脱离标准流、脱标）
- 可以通过left、right、top、bottom进行定位
定位参照对象是视口（viewport） - 当画布滚动时，固定不动
78.CSS属性 - 定位 - 脱标元素的特点
- 可以随意设置宽高
- 宽高默认由内容决定
- 不再受标准流的约束
不再严格按照从上到下、从左到右排布
不再严格区分块级、行内级，块级、行内级的很多特性都会消失 - 不再给父元素汇报宽高数据
- 脱标元素内部默认还是按照标准流布局
79.CSS属性 - 定位 - absolute - 绝对定位
- 元素脱离normal flow（脱离标准流、脱标）
- 可以通过left、right、top、bottom进行定位
定位参照对象是最邻近的定位祖先元素
如果找不到这样的祖先元素，参照对象是视口 - 定位元素（positioned element）
position值不为static的元素
也就是position值为relative、absolute、fixed的元素
80.CSS属性 - 定位 - 子绝父相
- 在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
- 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
子元素设置position: absolute
简称为“子绝父相”
81.CSS属性 - 定位 - 绝对定位技巧
- 绝对定位元素（absolutely positioned element）
position值为absolute或者fixed的元素 - 对于绝对定位元素来说
定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度 - 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
left: 0、right: 0、top: 0、bottom: 0、margin:0 - 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
left: 0、right: 0、top: 0、bottom: 0、margin: auto
另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
82.CSS属性 - 定位 - position总结
83.CSS属性 - 定位 - 元素的层叠
84.CSS属性 - 定位 - z-index
- z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
取值可以是正整数、负整数、0 - 比较原则
如果是兄弟关系
z-index越大，层叠在越上面
z-index相等，写在后面的那个元素层叠在上面
如果不是兄弟关系
各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值
85.CSS属性 - 浮动 - float
- none：不浮动，默认值
- left：向左浮动
- right：向右浮动
86.CSS属性 - 浮动 - 规则一
- 元素一旦浮动后
脱离标准流
朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 - 定位元素会层叠在浮动元素上面
87.CSS属性 - 浮动 - 规则二
- 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
比如行内级元素、inline-block元素、块级元素的文字内容
88.CSS属性 - 浮动 - 规则三
- 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
89.CSS属性 - 浮动 - 规则四
- 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
90.CSS属性 - 浮动 - 规则五
- 浮动元素之间不能层叠
如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
- 浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端
91.CSS属性 - 浮动 - 存在的问题
- 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
- 解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
- 清浮动的目的是
让父元素计算总高度的时候，把浮动子元素的高度算进去
92.CSS属性 - 浮动 - 清浮动的常见方法
- 给父元素设置固定高度
扩展性不好（不推荐） - 在父元素最后增加一个空的块级子元素，并且让它设置clear: both
会增加很多无意义的空标签，维护麻烦
违反了结构与样式分离的原则（不推荐） - 在父元素最后增加一个br标签：
会增加很多无意义的空标签，维护麻烦
违反了结构与样式分离的原则（不推荐） - 给父元素增加::after伪元素
纯CSS样式解决，结构与样式分离（推荐）
93.CSS属性 - 浮动 - 清浮动clear
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
- 一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠
94.CSS属性 - 语义化元素
95.CSS属性 - 媒体元素 - video
- HTML5增加了对媒体类型的支持（在HTML5之前是通过flash或者其他插件实现的）
音频：audio
视频：video - video元素常见属性：
src：媒体的来源（测试地址http://vfx.mtime.cn/Video/2019/05/30/mp4/190530103807409887.mp4 ）
controls：增加控制工具栏
autoplay：自动播放，但是存在兼容性问题
muted：静音，增加后不静音并且自动播放会生效
loop：循环播放 - source元素
如果存在兼容性问题，可以将多个视频格式的数据源放到source元素中
src：通过src指定数据的来源
96.CSS选择器 - 属性选择器 - [att]
拥有title属性的元素
97.CSS选择器 - 属性选择器 - [att=val]
title属性值恰好等于one的元素
98.CSS选择器 - 属性选择器 - [attr*=val]
title属性值包含单词one的元素
98.CSS选择器 - 属性选择器 - [attr^=val]
title属性值以单词one开头的元素
99.CSS选择器 - 属性选择器 - [attr|=val]
- title属性值恰好等于one 或者 以单词one开头且后面紧跟着连字符-的元素
- 一般是用在lang属性上面
100.CSS选择器 - 属性选择器 - [attr~=val]
- title属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开）
100.CSS选择器 - 属性选择器 - [attr$=val]
- title属性值以单词one结尾的元素
101.CSS选择器 - 属性选择器 - [attr$=val]
- div元素里面的span元素（包括直接、间接子元素）
102.CSS选择器 - 属性选择器 - [attr$=val]
- div元素里面的直接span子元素（不包括间接子元素）
103.CSS选择器 - 相邻兄弟选择器
- div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）
104.CSS选择器 - 全体兄弟选择器
- div元素后面的p元素（且div、p元素必须是兄弟关系）
105.CSS选择器 - 选择器组 - 交集选择器
- 同时符合2个条件的元素：div元素、class值有one
- 所有同时符合3个条件的元素：div元素、class值有one、title属性值等于test
106.CSS选择器 - 选择器组 - 并集选择器
- 所有的div元素 + 所有class值有one的元素 + 所有title属性值等于test的元素
107.CSS选择器 - 伪类（pseudo-classes）
常见的伪类有
- 动态伪类（dynamic pseudo-classes）
:link、:visited、:hover、:active、:focus - 目标伪类（target pseudo-classes）
:target - 语言伪类（language pseudo-classes）
:lang( ) - 元素状态伪类（UI element states pseudo-classes）
:enabled、:disabled、:checked - 结构伪类（structural pseudo-classes）
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty - 否定伪类（negation pseudo-classes）
:not()
108.CSS选择器 - 动态伪类（dynamic pseudo-classes）
- 使用举例
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上
a:active 激活的链接（鼠标在链接上长按住未松开） - 使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active
记忆：女朋友看到LV后，ha ha大笑 - 除了a元素，:hover、:active也能用在其他元素上
108.CSS选择器 - 动态伪类 - :focus
- :focus指当前拥有输入焦点的元素（能接收键盘输入）
文本输入框一聚焦后，背景就会变红色
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
- 动态伪类编写顺序建议为
:link、:visited、:focus、:hover、:active
记忆：女朋友看到LV包包后，（Feng）疯一样地ha ha大笑
108.CSS选择器 -去除a元素默认的:focus效果
109.CSS选择器 -结构伪类（structural pseudo-classes） - :nth-child( )
- :nth-child(1)
是父元素中的第1个子元素
110.CSS选择器 -结构伪类 - :nth-child( )
- :nth-child(2n)
n代表任意正整数和0
是父元素中的第偶数个子元素（第2、4、6、8…个）
跟:nth-child(even)同义
- :nth-child(2n + 1)
n代表任意正整数和0
是父元素中的第奇数个子元素（第1、3、5、7…个）
跟:nth-child(odd)同义
111.CSS选择器 -结构伪类 - :nth-last-child( )
- :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
:nth-last-child(1)，代表倒数第一个子元素
:nth-last-child(-n + 2)，代表最后2个子元素
112.CSS选择器 -结构伪类 - :nth-of-type( )、:nth-last-of-type( )
- :nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素
- :nth-last-of-type()用法跟:nth-of-type()类似
不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数
113.CSS选择器 -结构伪类
- :first-child，等同于:nth-child(1)
- :last-child，等同于:nth-last-child(1)
- :first-of-type，等同于:nth-of-type(1)
- :last-of-type，等同于:nth-last-of-type(1)
- :only-child，是父元素中唯一的子元素
- :only-of-type，是父元素中唯一的这种类型的子元素
- :root，根元素，就是HTML元素
114.CSS选择器 -结构伪类 - :empty
- :empty代表里面完全空白的元素
115.CSS选择器 -否定伪类（negation pseudo-class）
- :not()的格式是:not(x)
x是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示除x以外的元素
- :not()支持简单选择器，不支持组合。比如下面的写法是不支持的
116.CSS选择器 -伪元素（pseudo-elements）
- 常用的伪元素有
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
117.CSS选择器 -伪元素 - ::first-line
- ::first-line可以针对首行文本设置属性
- 只有下列属性可以应用在::first-line伪元素
字体属性、颜色属性、背景属性
word-spacing、letter-spacing、text-decoration、text-transform、line-height
118.CSS选择器 -伪元素 - ::first-letter
- ::first-letter可以针对首字母设置属性
- 只有下列属性可以应用在::first-letter伪元素
字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
text-decoration、text-transform、letter-spacing、word-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）
119.CSS选择器 -伪元素 - ::before和::after
- ::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
- 在CSS属性值中，使用url(图片的URL)来引用图片
url(dot.png);
url(‘dot.png’);
url(“dot.png”);
总结
小辈只是个没有感情的搬运工…