transform
并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变，例如span, a）
scale
值类型：
- 数字： 1：保持不变 2：放大一倍 0.5：缩小一半
- 百分比：百分比不常用
放大时，虽然不会撑大父盒子，但是可能会超出父盒子。
rotate
rotate的单位
- 度（degrees）、
- 百分度（gradians）
- 弧度（radians）
- 圈数（turns）
transform-origin
默认的转换原点是 center
transform-origin：当前元素形变的原点。比如在进行scale缩放，rotate旋转，skew倾斜时，都会有一个原点。对于translate位移来说没有用。
一个值：设置x轴的原点
两个值：设置x轴和y轴的原点。
值的类型：必须是<length>, <percentage> 或 left, center, right, top, bottom关键字中的一个。
<length>：从左上角开始计算。
百分比：参考元素本身大小。
transform设置多个值
就是给transform设置多个形变的函数。完成多个变形效果。多个函数通过空格分隔。
/* <transform-function>+ +: 一个或者多个, 并且多个之间以空格分隔 transform: scale() translate(); <box-shadow># #: 一个或者多个, 多个之间以, 分隔 box-shadow: 1px 1px 1px 1px #f00, */ transform: translate(50px) scale(1.2) rotate(45deg);
哪些css属性支持动画
可以参考mdn文档： developer.mozilla.org/zh-CN/docs/…
Animation
transition可以来过渡动画，但是过渡动画有如下的缺点：
- transition只能定义开始状态和结束状态，不能定义中间状态，只有两个状态。
- transition不能重复执行，除非一再触发动画。
- transition需要在特定状态下会触发才能执行，比如某个属性被修改了。
如果我们希望可以有更多状态的变化，我们可以使用CSS Animation。
代码规范
css书写顺序
- 公共css样式类名
通过_连接多个单词。
- 多单词连接
通过-连接。
HTML5新增
HTML5语义化元素
header头部元素
nav导航元素
section定义文档某个区域的元素
article内容元素
aside侧边栏元素
footer尾部元素
video
常用属性
一些视频文件的后缀
做兼容性，可能一些浏览器不支持video指定的文件
<video src="./assets/fcrs.mp4" width="600" controls muted> <source src="./asset/fcrs.ogg"> <source src="./asset/fcrs.webm"> <p>当前您的浏览不支持视频的播放, 请更换浏览器查看!</p> </video>
audio
常用属性
同video一样，并非所有的浏览器都支持当前指定的音频格式，所以我们需要做兼容性处理。
<audio src="./assets/yhbk.mp3" controls autoplay muted> <source src="./assets/yhbk.ogg"> <p>当前您的浏览不支持音频的播放, 请更换浏览器查看!</p> </audio>
HTML5 input补充
- placeholder：输入框的占位文字。
- multiple：多个值。比如select option可以选中多个值。
- autofocus：自动聚焦。
input的type值也有很多扩展：
- date
- time
- number
- tel
- color
全局属性
在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性。
data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到。通常用于HTML和JavaScript数据之间的传递。
<div class="box" data-name="zh" data-sex="1"></div> <script> const boxEl = document.querySelector(".box") console.log(boxEl.dataset.name) // zh </script>
white-space
white-space用于设置空白（空格，tab， 换行）处理和换行规则 注意换行也算是空白。
normal：合并所有连续的空白，允许单词超屏时自动换行。（默认值）
nowrap：合并所有连续的空白，不允许单词超屏时自动换行
pre：阻止合并所有连续的空白（如果有换行符，他不合并，就会出现换行效果），不允许单词超屏时自动换行
<style> .box { width: 200px; background: orange; white-space: pre; } </style> <div class="box"> zhanghao 111 222222 333 444 </div>
pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行
text-overflow
text-overflow通常用来设置文字溢出时的行为,text-overflow生效的前提是overflow不为visible。
- clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
- ellipsis：溢出那行的结尾处用省略号表示
常见的是将white-space、text-overflow、overflow一起使用，来做到添加省略号操作。
width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
css函数
var: 使用CSS定义的变量
calc: 计算CSS值, 通常用于计算元素的大小或位置
计算支持加减乘除的运算（不同单位）。+ 和 - 运算符的两边必须要有空白字符。
通常用来设置一些元素的尺寸或者位置。
blur: 毛玻璃(高斯模糊)效果
blur() 函数将高斯模糊应用于输出图片或者元素
blur(radius)。radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊。
通常会和两个属性一起使用：
- filter（元素自身添加）: 将模糊或颜色偏移等图形效果应用于元素。
- backdrop-filter（元素覆盖层添加）: 为元素后面的区域添加模糊或者其他效果。默认只有模糊效果，没有透明效果，如果想要透明效果，我们可以增加一个半透明背景。
background-color: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
gradient：颜色渐变函数
gradient是一种<image>CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。所以他可以设置在任何image属性下。（background-image, border-image,...）
linear-gradient()
除了可以设置top ,right, bottom, left外，还可以通过角度设置渐变方向。正值顺时针，负值逆时针。（在元素中心来看角度偏移）。默认是从上到下
方向关键字 to
radial-gradient()
方向关键字at cr xy，指定渐变开始的原点。默认是元素的正中心。
浏览器前缀
CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀。
防止在以后w3c对该属性做修改或者移除时，浏览器做一些相应的处理。
浏览器私有前缀，只有对应的浏览器才能解析使用
- -o-、-xv-：Opera等
- -ms-、-mso-：IE等
- -moz-：Firefox等
- -webkit-：Safari、Chrome等
FC – Formatting Context
FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的。
- 块级元素的布局属于Block Formatting Context（BFC）， 也就是block level box都是在BFC中布局的。
- 行内级元素的布局属于Inline Formatting Context（IFC）， 而inline level box都是在IFC中布局的。
一些触发BFC的条件
MDN上有整理出在哪些具体的情况下会创建BFC
- 根元素（HTML）
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
- overflow 计算值(Computed)不为 visible 的块元素
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
- 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
- display 值为 flow-root 的元素
BFC的规则
官方文档对于BFC的描述
- 在BFC中，box会在垂直方向上一个挨着一个的排布。
- 垂直方向的间距由margin属性决定。
- 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）。
- 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的。
BFC作用
解决折叠问题
在同一个BFC中，相邻两个box之间的margin会折叠（collapse）
官方文档明确的有说： 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.
那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。
解决浮动高度塌陷
BFC解决高度塌陷需要满足两个条件：
- 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）。
- 浮动元素的父元素的高度是auto的。
BFC的高度是auto的情况下，是如下方法计算高度的
- 如果只有inline-level，是行高的顶部和底部的距离。
- 如果有block-level，是由最底层的块上边缘和最底层 块盒子的下边缘之间的距离。
- 如果有绝对定位元素，将被忽略。（所以BFC不能解决绝对定位元素的高度塌陷）
- 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘。
