CSS提供了三种方法，可以将CSS样式应用到元素上：
style属性上<style>标签写在<head>标签中，通过选择器应用到元素上style.css中，再通过<link>标签引入text-transform 属性指定如何将元素的文本大写。text-indent 属性能定义一个块元素首行文本内容之前的缩进量。行内内容（例如文字）如何相对它的块父元素对齐，left靠左 center居中 right靠右 justify两端对齐
默认值为left
需要注意的是，当子元素是div时，对父元素设置text-align是不生效的：
.box {
height: 500px;
text-align: center;
background-color: red;
}
.inner {
height: 200px;
width: 200px;
background-color: blue;
}
然而此时.inner并没有在.box里居中对齐
text-align决定了行内级元素在父元素中是如何对齐的，而<div>元素默认的display属性是block块级元素，不属于行内级元素
可以将.inner的特性改掉：display: inline-block; 这样就可以通过text-align实现居中对齐了
另外的，如果为.inner设置margin: 0 auto;也可以实现居中对齐
分别用于设置字母、单词之间的间距
默认为0，可以设置为负数
单位有px em % 可以被继承
px 像素 15pxem 相对父元素字体大小的倍数 1.5em% 相对父元素字体大小的倍数 150%浏览器默认的字体大小是16px，这个值是因浏览器而异的，也与用户设置有关
用于设置字体名称
用于设置文字的粗细
不同的浏览器展示效果是不同的
设置文本样式
可以改变小写字母的显示样式
line-height用于设置文本的行高：一行文本占据的高度
行高 = 文本占据的高度 + 平分剩余的空隙
行高 = 两行文字基线（baseline）之间的间距
.box {
height: 200px;
line-height: 200px;
color: red;
}
此时.box内的文字将会垂直居中，如果是文本可以通过此方式
font属性可以将上述所有属性表示出来：
font-style font-variant font-weight font-size/line-height font-familyfont-style font-variant font-weight）可以随意调换顺序，也可以省略 line-height可以省略，如果不省略则必须跟在font-size后面font-sizefont-family\` 不可以调换顺序，不可以省略.box {
font: italic small-caps 700 30px/30px serif;
}
.box {
font: 30px/1.5 serif;
}
需要注意的是，font-size/line-height中的line-height在书写时，不必一定要有单位，例如30px/1.5表示的是字体大小为30px 而行高为30px的1.5倍，即45px
img.#h2[title=something]*= 属性包含某个值^=属性以某值开始$=属性以某值结尾选择.box元素内的所有标签为span的子元素
.box span {
color: red;
}
匹配div元素下的所有子元素
div * {
color: red;
}
选择.box中为span的所有子元素，且该子元素是直接子代
.box > span {
color: red;
}
使用符号+连接
相邻的.bro兄弟元素的颜色为红色：
.brother + .bro {
color: red;
}
使用符号~连接
所有的.bro兄弟元素的颜色都为红色：
.brother ~ .bro {
color: red;
}
同时符合两个选择器条件，可以实现精准选择某一个元素
1.元素类型为div 2.类名为.box
div.box {
color: red;
}
同时匹配多个元素，可以给多个元素设置相同的样式
body, p, div, h2, span {
margin: 0;
}
伪类是选择器的一种，它用于选择处于特定状态的元素
div:hover {
color: red;
}
:link :visited :hover :active :focus:target 匹配URL上的fragment:lang():enabled :disabled :checkednth-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:nth-child(1):nth-child(2n)n代表任意正整数 和 0:nth-child(even)同义:nth-child(2n+1)n代表任意正整数 和 0nth-child(odd)同义:nth-child(-n+2):nth-last-child(···):nth-child相同，但是是从后向前数与:nth-child不同的是，:nth-of-type只会在相同类型的元素中计数并选中，忽略掉其他类型的元素
上述结构伪类的简化写法
: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元素
:empty 代表里面完全空白的元素（没有子节点）
:root {
font-size: 16px;
}
等价于
html {
font-size: 16px;
}
:not(···)
···中填写的是一个简单选择器用于选中某个特定的元素
::first-line::first-letter::before::after伪元素采用::作为前缀用于和伪类作区分
content属性可以是字符串，可以是图片/SVG，也可以借助伪类插入图形
.box::after {
content: 'Something';
}
.box::before {
content: url(../assets/icon.svg);
}
.box::after {
content: '';
/* 8*8正方形 */
display: inline-block;
height: 8px;
width: 8px;
background-color: red;
}
CSS的某些属性具有继承性
.box {
color: red;
}
<div class="box">
<span> Span1 </span>
<span> Span2 </span>
<span> Span3 </span>
</div>
上例中的color属性可以被.box的每个子元素继承，所有的<span>都为红色
常见的属性都是具有继承性的，不必特意去记忆
需要注意的是：子元素从父元素继承来的font-size: 2em;继承的是计算值，而不是原始值，如果父元素设置了font-size: 2em;，此时子元素再设置font-size: 2em;达到的效果实际上是在父元素的基础上的2em，实质上是font-size: 4em;
当某些属性不具备继承性，但是我们希望子元素能直接继承时：
.father {
border: 2px soild red;
}
.child {
border: inherit;
}
将属性值设置为inherit即可直接继承来自父元素的样式
CSS的翻译是：层叠样式表，那么什么是层叠？
多个样式属性覆盖上去，生效的顺序
权重值：
CSS样式优先级：内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符
# 100. [] :hover 10button ::before 1* 0<div>是块级元素，会独占一行，而<span>是行内元素，会在同一行显示
HTML元素有很多，当把元素放到页面上时，元素被设置的CSS display属性决定了它占据页面中一行多大的空间
h1 div pspan a img strong i例如，我们手动修改div元素display: inline-block;那么它此时也会在行内显示，而不再独占一行
CSS的display属性可以修改元素的显示类型，有四个常用值
block 让元素显示为块级元素 h1 div pinline 让元素显示为行内级元素 span a img strong iinline-block 让元素同时具备行内级、块级元素的特征 none 隐藏元素当我们为一个div元素设置了更小的宽度，它将仍然独占一行，剩余的宽度会被浏览器分配给了margin-right: auto填满一行
我们为span设置宽高时不会生效，但是为img设置宽高时则会生效，这是因为img元素是一个行内替换元素（官方文档），它具有以下特点：
video input标签也是一个行内替换元素inline-block元素 span默认不支持width与heightfont覆盖了font-sizeHTML中的每个元素都可以看做是一个盒子，可以具备以下四个属性：
设置内容是通过width / height实现的，需要注意的是，对行内非替换元素来说，设置宽高是无效的
min-width 最小宽度 无论内容为多少 宽度都大于等于 min-widthmax-width 最大宽度 无论内容为多少 宽度都小于等于 max-width当我们不给元素手动设置width时，其默认值为 width: auto; 由浏览器决定其宽度
div这类块级元素 auto 代表其独占一行span这类行内级元素 auto 代表其宽度与内容相同padding: 5px 6px 7px 8px; 对应上右下左padding: 10px 20px 30px; 缺少left，left使用right的值padding: 10px 20px; 上下10px，左右20pxpadding: 10px; 上下左右都为10pxborder-widthborder-styleborder-colorborder-radiusborder-box： 内容 + pending + border缩写属性 border: 1px soild red;
特性：上下的margin重叠部分会被折叠，但左右的margin不影响
margin同样由上下左右组成 可以缩写 规则同padding
当margin-left或margin-right的值为百分比时，它是相对于父元素宽度的偏移量
考虑嵌套元素：
<div class="container">
<div class="child"></div>
</div>
要将.child相对父元素下移10px 可以通过为.container设置padding-top: 10px; 也可以为.child设置margin-top: 10px;实现
但是需要注意的是，为.container设置padding时，其自身的宽度也会跟着改变，此时可以为.container设置box-sizing: border-box;来修正其宽度的改变
当为.child设置margin时，实际效果却是连带着父元素.container一起移动了，这时需要为.container设置overflow: auto;创建BFC
margin-top的传递
margin-top值会传递给父元素margin是不会传递的margin-top时不生效的原因margin-bottom的传递（不常见 不常用）
auto，那么这个块级元素的margin-bottom值会传递给父元素如何规避margin传递导致的问题
padding-top / padding-bottom来实现相同的效果（推荐）border 中止margin的传递（不好用）BFC：块级格式化上下文，给当前盒子建立一个独立的空间，不会再受外界属性的影响margin的折叠
margin-bottom 与 margin-top 可能合并为1个margin 这种现象称为折叠margin不会发生折叠margin折叠：只设置其中一个元素的marginmargin也会发生折叠（不常见）问题：text-align只对行内级元素起作用，如果非要用此属性实现水平居中，可以将div改为display: inline-block;
块级元素一定占据父元素的整行，浏览器是依靠设置margin: auto;实现的，如果我们手动设置了margin: 0;那么该元素将无法整行显示，剩余的宽度空间会被默认分配给margin-right，让元素居左显示。
这时，我们可以为元素指定margin: 0 auto;让浏览器自动决定左右边距的大小，此时元素就可以居中显示了
outline表示元素的外轮廓
border的外面<a>，或焦点位于<input>时的外轮廓 都是通过outline属性实现的box-shadow属性可以设置一个或多个阴影
<shadow>表示, 隔开，从前到后叠加参数说明：
offset-x 水平方向偏移量 向右偏移offset-y 垂直方向偏移量 向下偏移blur-radius 模糊半径spread-radius 延伸半径color 阴影颜色 如果未设置 则会跟随color前景色inset 外框阴影变成内框阴影（不常用）盒子模型属性在某些行内非替换元素上不生效或具有特殊的特性：
<span>设置padding: 30px;此时padding虽然会将span的背景颜色撑开，但是实际却不占用空间（上下不占用空间，但左右正常占用空间）span设置border也是一样的，会将背景颜色撑开，但是上下不占用空间，左右正常margin上下不会生效，左右正常这是因为行内非替换元素本来就是在一个段落中和其他内容在一行里显示的，如果对某个元素设置了上下移动，整个段落布局将会被破坏
默认情况下，元素都是按照 Normal Flow 进行排布的（标准流、常规流、正常流、文档流 document flow）
在标准流中想要调整元素之间的间距，可以使用margin 或 padding对元素进行定位
margin 或padding 就会影响到标准流中其他元素的定位效果如果希望能实现层叠，将某个元素从标准流中移出，实现层叠的效果，需要设置元素的position属性，将元素脱离标准流
例如，为某个元素设置了display: fixed; 那么以后对这个元素设置的定位都不再对标准流中的其他元素造成影响了
定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为：
static 静态定位 默认值当position被设置为以下四个属性时，元素将变为定位元素
relative 相对定位absolute 绝对定位sticky 粘性定位fixed 固定定位是position的默认值
left right top bottom均不起作用left right top bottom进行定位 left属性 元素将发生移动 但是原来占据的大小仍然被占据（仍然在标准流中）应用场景：在不影响其他元素位置的前提下，对当前元素位置进行微调
.span {
font-size: 10px;
position: relative;
bottom: 8px;
}
<div>
2<span>3</span> = 8
</div>
这样最终的样式就成为了：$2^3=8$
绝对定位是相对于最近的一个定位元素
元素脱离normal flow
可以通过left right top bottom进行定位
定位的参照对象是视口（viewpoint）
当画布滚动时，固定不动
视口（ViewPort）：文档的可视区域
画布（Canvas）：渲染文档的区域 文档内容超出视口范围 则可以滚动查看
画布 >= 视口
left right top bottom定位 position值不为static的元素，即：relative absolute fixedposition: absolute;一般与position: relative;共同使用，让父元素变成定位元素的同时不脱离标准流，还能让其中的子元素实现在父元素内的绝对定位。
.nav-bar {
position: sticky;
top: 0; /* 滚动出scrollport后元素固定的位置 */
}
sticky是相对于最近的滚动祖先包含视口的（the nearest ancestor scroll container's scrollport）
此处的绝对定位 （absolutely positioned element）：absolute fixed 在某些情况下 二者的特性是相同的
width heightspan stronginline-block 行内级元素但是可以设置宽高（但是实际上并不是）| 脱离标准流 | 定位元素 | 绝对定位元素 | 定位参照物 | |
|---|---|---|---|---|
static | ❌ | ❌ | ❌ | ❌ |
relative | ❌ | ✔ | ❌ | 元素自身原来的位置 |
absolute | ✔ | ✔ | ✔ | 最临近的定位祖先元素（如果找不到这样的元素 参照对象为视口） |
fixed | ✔ | ✔ | ✔ | 视口 |
left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度下例中，margin的左右值被设置为了auto
父元素的宽度 = 块级子元素自身宽度 +
margin-left+margin-right
那么左右间距由浏览器决定，将剩余的宽度平均分配给margin-left和margin-right
.container {
width: 800px;
height: 300px;
background-color: red;
}
.box {
height: 100px;
background-color: green;
width: 200px;
margin: 0 auto;
}
<div class="container">
<div class="box"></div>
</div>
在上例的基础上修改属性，此时子元素.box的相对定位相对的是父元素定位元素.container
此时满足公式
.container width = .box width +
left+right+margin-left+margin-right
.container {
position: relative;
}
.box {
position: absolute;
width: auto;
left: 0;
right: 0;
}
此时.box的width被修改为了默认值auto 且left和right被设置为了0，那么剩余的宽度将由ml mr的默认值决定，他们的默认值都为0，这时公式可以写作：800px = auto + 0 + 0 + 0 + 0，此时.box将占据100%
这和下面的代码是同等效果的：
.container {
position: relative;
}
.box {
position: absolute;
width: 100%;
}
下例中，我们明确设置.box的宽度为200px，公式变为800px = 200px + 0 + 0 + 0 + 0，这时浏览器会默认将剩余的值都分配给mr（由不同浏览器决定）
.container {
position: relative;
}
.box {
position: absolute;
width: 200px;
left: 0;
right: 0;
}
在此基础上，我们修改代码，将mr ml都修改为auto，此时公式就变成了 800px = 200px + 0 + 0 + auto + auto，浏览器会将剩余值平均分配给ml与mr 即可实现水平居中
.container {
position: relative;
}
.box {
position: absolute;
width: 200px;
left: 0;
right: 0;
margin: 0 auto;
}
水平方向是如此，那么同理，垂直居中也是一样的，在高度上也符合公式
outer box height = inner box height +
top+bottom+margin-top+margin-bottom
修改代码，为其添加上top bottom为0 并指定所有的margin都为auto（height在先前的代码设置过，此处只展示修改的代码）
公式变为 300px = 100px + 0 + 0 + auto + auto，mt mb由浏览器平均分配，可以实现垂直居中
.container {
position: relative;
}
.box {
position: absolute;
width: 200px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
至此，我们实现了元素的水平垂直居中：父元素设置相对定位，子元素设置绝对定位，子元素left right top bottom设置为0，margin都设置为auto 由浏览器平均分配
left right top bottom都为0，margin为0left right top bottom都为0，margin为auto为元素的属性设置auto并不代表着让这个元素居中，而是交给浏览器处理，让浏览器决定其展示效果
例如设置800px = 200px + ml0 + mr0 + left(auto) + right(auto)时并不会居中，浏览器对left right属性的auto值给出的默认行为是：该元素原来在哪里，那么就仍然放在哪里
以width属性为例：width: auto;
z-index属性用来设置定位元素的层叠属性（仅对定位元素有效） z-indexauto（0）z-index越大，层叠在越上面z-index相等，写在后面的那个元素层叠在上面z-index的具体数值float属性可以指定一个元素沿其容器的左侧或者右侧放置，允许文本和内联元素环绕它
float属性让元素产生浮动效果 right left none(默认值)小问题：行内级元素如<span>之间的空格：
以下内容展示在浏览器上时，中间会出现间隙，这是因为浏览器将<span>之间的空格识别为了换行符
<div class="box">
<span>123</span>
<span>asd</span>
<span>www</span>
</div>
这样书写的时候，就不会有间隙了，但是代码的可阅读性大打折扣：
<div class="box">
<span>123</span><span>asd</span><span>www</span>
</div>
可以通过这样的方法解决，换行符的字体大小为0，自然就不再展示出来了：
.box {
font-size: 0;
}
.box span {
font-size: 16px;
}
上述的方法不优雅，通过浮动来实现更优雅，所有的<span>都脱离标准流并且紧挨着：
.box span {
float: left;
}
static) < float < !staticdiv设置了padding 那么浮动元素将至多浮动到padding的边缘 不会超过inline-block元素、块级元素的内容TODO: 案例 缺视频
flex-direction)布局元素的一维布局方法(grid二维布局)flex-grow拉伸元素）当flex container中的子元素变成了 flex item时，具备以下特点
设置 display 属性为 flex 或者 inline-flex 时，元素可以成为flex container
flex: flex container以block-level的形式存在inline-flex: flex container以inline-level形式存在主轴与交叉轴
flex-direction: 设置主轴的方向row row-reverse column column-reverseflex-flow
flex-direction和flex-wrap的简写 顺序随意 且都可以省略flex-direction: column wrap;flex-direction
row row-reverse column column-reverseflex-wrap
width属性，这是因为flex item的宽度和很多因素有关no-wrap （默认值） 单行显示wrap 多行显示wrap-reverse 多行显示但是从下向上显示（沿着主轴的排列顺序不变）justify-content
flex-start （默认值） 与 main start 对齐
flex-end 与 main end 对齐
center 居中对齐
space-between
space-around
space-evently
align-items
normal 在弹性布局中，效果和stretch一样
stretch 当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
stretch 要想生效，高度（宽度）必须为autoflex-start 与 cross start 对齐
flex-end 与 cross end 对齐
center 居中对齐
baseline 与基准线对齐
align-content (不常用)
justify-content类似flex-grow
决定了 flex items 如何扩展（拉伸/成长）
给某一个item设置了grow时，那么剩余的空间都将分配给这个item 此item获得剩余空间并拉伸
如果所有 flex items 的 flex-grow 属性总和超过1，每个flex item扩展的size为
flex-basis
flex-shrink
order (不常用)
align-self
flex
是一个缩写属性
none: 相当于设置了flex: 0 0 auto 分别代表flex-grow flex-shrink flex-basis
auto: 相当于设置了 flex: 1 1 auto
如果只设置了一个值：
flex-growflex-shrink设置了两个值：
flex: 1 1 flex-grow flex-shrinkflex: 1 10px flex-grow flex-basis设置了三个值
flex: 1 1 10px;列表元素在向下排列时，如果遇到最后一行元素不能填满整行的情况，此时设置的justify-content: space-between;就会导致最后一行显示异常，要让最后一行能够居左对齐，可以采用这种方法：
<div class="box">
<div class="item"> Item </div>
<div class="item"> Item </div>
<div class="item"> Item </div>
<div class="item"> Item </div>
<div class="item"> Item </div>
<span></span>
<span></span>
</div>
.box {
width: 500px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item {
width: 110px;
height: 140px;
}
& > span {
width: 110px;
}
}
在列表元素末尾添加若干个<span>元素（行内级元素，数量为列数-2），并且为其设置宽度（不设置高度），当最后一行没被.item填满时，就由<span>补充，而其他的<span>由于没有高度，不会被展示，所以自然就会隐藏起来
在前面我们使用过一些CSS函数：
rgb rgba translate rotate scale 等下面我们再学习几个非常好用的CSS函数：
var 使用CSS定义的变量calc 计算CSS值 通常用于计算元素的大小或位置blur 毛玻璃（高斯模糊）效果gradient 颜色渐变函数CSS中可以自定义属性
/* 两种方式皆可 */
/* 只在其后代元素内可以使用 */
.html {
--primary-color: #fff;
}
:root {
--primary-color: #0f0;
}
.box {
color: var(--primary-color);
}
.title {
color: var(--primary-color);
}
规则集定义的选择器，是自定义属性的可见作用域（只在选择器内部有效）
所以推荐给自定义属性定义在html中，也可以使用:root选择器选中html，这样变量可以在全局使用
<div class="container">
<div class="left-box"></div>
<div class="right-box"></div>
</div>
.container {
width: 300px;
.left-box {
width: 50px;
}
.right-box {
width: calc(100% - 50px)
}
}
要让右侧的.right-box实现占满300px - 50px的剩余空间，且考虑左侧块宽度的动态伸缩
此处的100%代表了width属性的100%，而width的100%则代表相对于包含块（父元素）宽度的百分比
blur函数可以将高斯模糊应用于输出图片或元素
blur(radius)radius 模糊的半径 用于定义高斯函数的偏差值 偏差值越大 图片越模糊通常会和这两个属性一起使用：
filter 将模糊或颜色偏移等图形效果应用于元素backdrop 为元素后面的区域添加模糊或者其他效果例如音乐歌词的背景展示的一般是音乐封面模糊+遮罩后的样式：
.box {
position: relative;
}
.cover {
position: absolute;
height: 100%;
width: 100%;
/* 添加模糊的同时 添加黑色半透明遮罩 */
background-color: rgba(0, 0, 0, .2);
backdrop-filter: blur(10px);
}
gradient是一种<image> CSS数据类型的子类型
<image> 数据类型描述的是2D图形background-image list-style-image border-image content等<image> 常见的方式是通过URL来引入一个图片资源设置颜色渐变，本质上是设置了一张图片的颜色渐变。重点了解线性渐变的使用：
.box {
width: 100px;
height: 100px;
background-image: liner-gradient(to right, red, blue); /* 由红变蓝线性渐变 方向从左到右 */
background-image: liner-gradient(to right top, red, blue); /* 方向右上角 */
background-image: liner-gradient(45deg, red, blue); /* 方向45度 */
}
其他渐变函数：
radial-gradient()repeating-linear-gradient()repeating-radial-gradient()p { font-size: 16px; } 和 p.text { font-size: 1.2em; }1.2eminherit、百分比转为绝对值 自适应和响应式
在PC端是不区分视口宽度的，在移动端可以通过<meta>标签设置布局视口的宽度：
width设置布局视口的宽度
<meta name="viewport" content="width=980px">
<meta name="viewport" content="width=device-width">
为了避免布局元素放到不同宽度设备上展示会出现缩放，所以一般不会直接指定布局视口的宽度为某一值
而是设置为device-width等于设备的宽度
有时候可能会看到：一些CSS属性名前带有前缀
-o-* -xv-* -ms-* mso-* -moz-* -webkit-*
.box {
-o-transform: translate(100px);
-ms-transform: translate(100px);
-webkit-transform: translate(100px);
-moz-transform: translate(100px);
}
官方文档中称之为：vendor-specific extensions 供应商特定扩展
为什么需要浏览器前缀？ CSS属性在制定之初并没有成为标准，浏览器为了防止后续会修改名字，给新的属性添加了浏览器前缀
浏览器私有前缀，只有对应的浏览器才能解析
模块化打包工具会自动添加浏览器前缀
FC全称是 Formatting Context， 译作格式化上下文。元素在标准流里面都是属于一个BFC的
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
标准流中的元素属于格式化上下文，它可以是块级或行内级的，但不能同时是块级和行内级的。块级元素参与块级格式化上下文。行内级元素参与行内级格式上下文。
div p h1 h2）a span i）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.
浮动、绝对定位元素、不是块级元素的块容器（例如内联块、表格单元格和表格标题），以及
overflow值不为visible的块级元素（除非该值已被传播到视口）为其内容建立新的块格式化上下文。
<html>float不为noneposition为absolute或fixeddisplay为inline-blockdisplay为table-cell table-caption（表格单元格&表格标题默认值）display为inline-table table table-row table-row-group table-header-group table-footer-group （ HTML table 默认属性）overflow计算值 不为visible的块元素display为flex inline-flex元素的直接子元素display为grid inline-grid元素的直接子元素display值为flow-root的元素In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直放置。两个同级框之间的垂直距离由“边距”属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
在块格式上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会因浮动而缩小），除非框建立了新的块格式上下文（在这种情况下框本身可能会因浮动而变窄）。
在BFC中，所有的块级元素都会遵循BFC的规则排列：
margin的折叠特性collapse）根据文档中的这段描述，就可以解释：为什么BFC可以解决margin的折叠问题、浮动高度塌陷的问题了
两个位于body下的块级元素在正常情况下按照BFC的排布规则，从上至下依次排列，二者之间没有距离
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
.box1 {
height: 100px;
background-color: red;
}
.box2 {
height: 100px;
background-color: blue;
}
我们为两个元素分别设置垂直方向的margin，此时BFC的规则就被触发了：在同一个BFC中，垂直方向的margin会发生折叠，取二者较大的值，真正的边距变成了20px，而不是臆想中的30px
.box1 {
height: 100px;
background-color: red;
margin-bottom: 10px;
}
.box2 {
height: 100px;
background-color: blue;
margin-top: 20px;
}
这两个盒子位于同一个BFC之中进行布局：<html>标签形成的BFC
那么我们让这两个盒子中的某个盒子形成一个新的BFC，让盒子在两个不同的BFC中进行布局，就可以解决margin的折叠问题
我们在.box1外面包裹一个.container，并且为.container设置overflow: auto;。此时.container内就形成了一个新的BFC，.box1在这个新的BFC中进行布局，这样两个盒子就不会再出现margin折叠的问题了
<body>
<div class="container">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
.container {
overflow: auto;
}
.box1 {
height: 100px;
background-color: red;
margin-bottom: 10px;
}
.box2 {
height: 100px;
background-color: blue;
margin-top: 20px;
}
需要注意的是：
.box1设置overflow: auto;，这是无效的，这只代表了.box1内形成了一个新的BFC，其中元素将在这个新的BFC中布局，而.box1仍然在<html>内的BFC中并未改变。.container设置了垂直方向的margin，.container仍然会与.box2发生边距折叠浮动布局元素没有高度，需要清除浮动
实质上，通过BFC来“清除浮动”的说法是存在误解的，我们此次从原理上解释：为什么BFC可以做到清除浮动的效果
下例中.container宽度为350px，其中包裹了四个浮动元素，一行最多容纳三个浮动元素，第四个浮动元素将换到下一行，可以发现.container的高度发生了塌陷，在页面上不可见，这是因为浮动元素由于脱离了标准流，不会向父级元素汇报高度
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
.container {
width: 350px;
background-color: red;
}
.item {
width: 100px;
height: 100px;
background-color: blue;
border: 1px solid black;
float: left;
}
我们不能简单的从现象归纳本质：BFC让浮动元素向父级元素汇报了高度，所以解决了高度塌陷的问题
绝对定位元素position: absolute | fixed;也脱离了标准流，也不会向父元素汇报高度，相应的也会产生同样的父元素高度塌陷的问题
但是BFC能解决float的父元素高度塌陷问题，却无法解决绝对定位元素的高度塌陷问题
要通过清除浮动的方式解决，可以修改以下代码：
<div class="container clear-fix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.clear-fix::after {
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
相当于给父元素内部创建了一个新元素，这个元素在浮动元素的下面。
如果要使用BFC解决此方案，也十分简单：
.container {
width: 350px;
background-color: red;
overflow: auto;
}
给.container设置overflow: auto;，让.container创建一个新的BFC，这样之前的高度塌陷问题也能够被解决
官方文档中是这样解释的：
In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:
在某些情况下（例如，参见上文第10.6.4和10.6.6节），建立块格式化上下文的元素的高度计算如下：
If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.
如果它只有内联级别子级，则高度是最上面的线框顶部和最下面的线框底部之间的距离。
If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.
如果它有块级子框，则高度是最上面的块级子盒的上边距边缘与最下面的块级个子盒的下边距边缘之间的距离。
Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.
绝对定位的子对象被忽略，相对定位的框被认为没有偏移。请注意，子框可能是匿名块框。
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
此外，如果元素有任何浮动子体，其底部边距边缘低于元素的底部内容边缘，则会增加高度以包括这些边缘。仅考虑参与此块格式化上下文的浮点数，例如，绝对定位子体内的浮点数或其他浮点数。
从原理上解释，要实现这样的效果必须同时满足两个条件：
auto（height的默认值即为auto）BFC的高度是auto的情况下，是按照如下方法计算高度的：
inline-level元素，是行高的顶部和底部的距离block-level元素，是由最底层的快上边缘和最底层块盒子的下边缘之间的距离display: absolute | fixed;）将overflow设置为auto是开发中较为常用的创建BFC的方法之一，这个方法的优点是简单且没有副作用（overflow默认值为visibile）
W3C 9.4.1 Block formatting contexts
W3C 10.6.7 'Auto' heights for block formatting context roots
媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口，可以根据特定的特性比如屏幕的宽度来修改你的页面
媒体查询的使用方式主要有三种：
@media @import使用不同的CSS规则（常用）media属性，为<style> <link> <source>和其他HTML元素指定特定的媒体类型Window.matchMedia()和MediaQueryList.addListener()方法来测试/监控媒体状态在日常开发中更为常用的是通过@media来应用不同的CSS规则
当屏幕宽度小于800px时，应用miniScreen.css的样式
@import url(./css/miniScreen.css) (max-width: 800px);
<link rel="stylesheet" media="(max-width: 800px)" href="./css/miniScree.css" />
@media (max-width: 800px) {
body {
background: orange;
}
}
在使用媒体查询时，必须指定要使用的媒体类型
all类型 @media时，后面的条件可以省略掉，省略时其值为all媒体特性描述了浏览器、输出设备的具体特征
常用的媒体特性
除了方向orientation，其余媒体特性都支持设置最大/最小值 min-* max-*
当媒体特性中包含多个特性表达式，他们之间通过逻辑操作符连接起来
@media (max-width: 800px) and (min-width: 200px) {
body {
color: red;
}
}
and 组合多个媒体查询规则not 否定媒体查询only 仅在整个查询都匹配时才应用样式, 逗号用于将多个媒体查询合并为一个规则根据屏幕尺寸，动态修改font-size以优化文字在不同屏幕的展示效果
@media (min-width: 320px) {
body {
font-size: 10px;
}
}
@media (min-width: 768px) {
body {
font-size: 15px;
}
}
@media (min-width: 1025px) {
body {
font-size: 20px;
}
}
link元素是外部资源链接元素，规范了文档与外部资源的关系，通常位于head标签中
常见的应用：
常见的属性：
href：此属性指定被链接资源的URL 可以是绝对的，也可以是相对的rel：指定链接类型，常见的链接类型： icon：站点图标stylesheet：CSS样式dns-prefetch：对链接指向的资源进行DNS预解析与协议握手CSS中的颜色为RGB表示法，每个位置的值的范围为0~255
.div {
/* 红色 */
color: rgb(255, 0, 0);
/* 黑色 */
color: rgb(0, 0, 0);
/* 白色 */
color: rgb(255, 255, 255);
}
此处的rgb()是一个CSS函数，RGB颜色也可以用十六进制的方式表示：
.div {
/* 红色 */
color: #ff0000;
/* 黑色 */
color: #000000;
/* 白色 */
color: #ffffff;
}
每2位数字代表了一个颜色的数值，当值为255时，即对应十六进制中的FF
除了使用RGB格式表示颜色，还有RGBA表示法，其中的A代表透明度
设置的font-family只有当字体在系统中存在才会被展示，如果要使用自定义的字体就需要用到网络字体
xxx.ttf 并放到对应的目录中@font-face引入字体，并设置格式HTML/CSS/Javascript/Font 一起部署在静态服务器中@font-face {
font-family: 'ziu';
src: url('./fonts/ZiuFont.ttf');
}
.box {
font-family: 'ziu';
}
.ttf 它是TrueType字体 .ttf.ttf .otf.eot.svg .svgz.woff 建立在TrueType上将字体直接设计为图标的样子
用例：在iconfont中收藏图标，到个人中心中下载代码，其中就包含字体图标文件，以ttf为后缀
@font-face {
font-family: 'iconfont';
src: url(./fonts/iconfont.ttf);
}
i {
font-family: 'iconfont';
}
<i>\\e63e</i>
在HTML中以字体图标的Unicode的方式引入，即可显示图标
更常见的做法，是通过伪元素引入字体图标
.icon-video:before {
content: '\\e63e';
}
CSS Sprite 是一种CSS图像合成技术 将各种小图片合并到一张图片上 然后利用CSS的背景定位 来显示指定位置的图片部分
将精灵图保存下来后，在代码中通过background-image引入
i.hot-icon {
/* background: url('../asset/topbar.png') no-repeat -192px 0; */
background-image: url('../asset/topbar.png'); /* 引入精灵图 */
background-repeat: no-repeat; /* 不重复显示 */
background-position: -192px 0; /* 偏移到目标元素的位置(x,y) */
/* 改为inline-block展示 使能width与height */
display: inline-block;
/* 宽高调整为要展示小图标的宽高 */
width: 26px;
height: 13px;
}
由于以下这段文字中包含空格、换行符，但是实际展示中空格和换行符会被合并，遇到完整单词时会发生换行
<div class="box">
我是Ziuuuuu ziu Ziuuuuuuuu
你好你好你好你好 你好你好 my name is ziu
</div>
.box {
white-space: nowrap; /* 不换行 */
}
white-space用于设置空白处理和换行规则
空格、Tab、
text-overflow通常用来设置文本溢出时的行为
text-overflow生效的前提是overflow不为visible，例如overflow: auto;
**常用写法：**将超出部分隐藏，并且在末尾缀上...
.title {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高
这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个
margin：auto它就可以上下左右都居中了
div {
width: 600px;
height: 600px;
position: relative;
}
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
利用flex，
align-items:center是控制垂直方向居中，justify-content:center是控制水平方向的居中。
div {
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
img {}
通过百分比将图片移动到容器中心，再对齐中心点就行了。
div {
width: 600px;
height: 600px;
position: relative;
}
img {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
}
与负margin方法原理相同，只不过用到了
translate(-50%, -50%);来移动自身的50%
div {
width: 600px;
height: 600px;
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.child {
width: 200px;
height: 200px;
margin: 0 auto; /* 定宽块级元素 */
background-color: red;
}
水平居中
垂直居中
水平居中
垂直居中
在HTML5之前，网站分布层级通常包括以下内容：
header nav main footerdiv标签，通过id或class来区分元素HTML5新增了语义化的元素
header 头部元素nav 导航元素section 定义文档某个区域的元素article 内容元素aside 侧边栏元素footer 尾部元素HTML5增加了对媒体类型的支持：
audiovideo使用方式一般有两个：
<video>和<audio><video src="./assets/video.mp4"></video>
src 视频播放的URL地址width height 设置视频宽高controls 是否展示控制栏autoplay 是否自动播放muted 是否静音播放preload: none | metadata | auto 是否需要预加载视频，metadata表示预加载元数据（比如视频时长）poster 一海报帧的URL可能有些视频格式当前浏览器不支持，可以预设好多个地址，浏览器会自动加载直到加载到支持的格式
<video src="./assets/video.mp4">
<source src="./assets/video.ogg" />
<source src="./assets/video.webm" />
</video>
<audio src="./assets/music.mp4" controls></audio>
placeholder 占位文本multiple 多选标签autofocus 自动聚焦输入框datetimenumbertelcoloremail在HTML5中，新增了一种全局属性的格式data-* 用于自定义数据属性
dataset轻松获取到data-*来传递数据的<div class="item" age="18" data-name="ziu" data-age="18"></div>
const el = document.querySelector('.item')
console.log(el.dataset.age) // 18
console.log(el.dataset.name) // 'ziu'