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

常用属性

了解更多，请访问mdn

一些视频文件的后缀

做兼容性，可能一些浏览器不支持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

• email

具体请查看mdn

全局属性

在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不能解决绝对定位元素的高度塌陷）

• 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘。