- CSS3：在CSS2上新增了许多新功能，解决了一些实际面临的问题。
- 什么是私有前缀：-webkit-border-radius 中，-webkit-就是私有前缀。
- 私有前缀的作用：W3C标准提出的某个CSS特性，在浏览器正式支持前，浏览器厂商会根据浏览器的内核，适用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后就不需要私有前缀了。
- 查询CSS3兼容性的网站：Can I use... Support tables for HTML5, CSS3, etc
- 常见浏览器私有前缀：
- Chrome浏览器： -webkit-
- Safari浏览器： -webkit-
- Firefox浏览器： -moz-
- Edge浏览器： -webkit-
- 旧Opera浏览器： -o-
- 旧IE浏览器： -ms-
- 注意：平常编程时，对于CSS3的常用新特性主流浏览器都是支持的，对于老浏览器，我们也可以借助现代的构建工具（webpack）来帮助我们添加私有前缀。
- 新增长度单位：
- vw：视口宽度的百分比例
- vh：视口高度的百分比例
- vmax：视口宽或高（二者中的较大值）的百分比例
- vmin：视口宽或高（二者中的较小值）的百分比例
- 新增颜色设置方式：
- rgba\hsl\hsla
- 新增选择器：
- 动态伪类、目标伪类、语言伪类、UI伪类、结构伪类、否定伪类、伪元素（详见前文）
- 新增盒子模型相关属性：
- content-box：width和height设置盒子内容区大小
- border_box：width和height设置盒子总大小
- resize：允许用户调节元素大小
- horizontal：水平方向可拉动伸缩
- vertical：垂直方向可拉动伸缩
- both：水平、垂直拉动伸缩
- box-shadow：
- 写两个值：水平、垂直位置信息
- 写三个值：
- 1、水平、垂直位置、阴影颜色
- 2、水平、垂直位置、阴影模糊程度
- 写四个值：水平、垂直、阴影模糊程度、阴影颜色
- 写五个值：水平、垂直、阴影模糊程度、阴影外延值、阴影颜色
- 写六个值：水平、垂直、阴影模糊程度、阴影外延值、阴影颜色、内阴影（inset）
- opacity：设置整个元素体的透明度，值为0-1之间，1为完全不透明
- 新增背景相关属性：
- background-origin：背景图片的起始点位置
- padding-box：从padding区域开始显示背景图
- border-box：从border区域开始显示背景图
- content-box：从content区域开始显示背景图
- background-clip：背景修剪
- padding-box：超过padding区域的不显示
- border-box：超过border区域的不显示
- content-box：超过content区域的不显示
- text：背景图只呈现在文字上（-webkit-background-clip中使用）
- background-size：调整背景图大小
- contain：将背景图完整的呈现出来，但容器可能会有部分空白区域
- cover：将背景图完整的覆盖容器，但可能会丢失部分图片内容
- 像素值，像素值：指定背景图具体大小
- 百分比，百分比：用百分比指定背景图具体大小
- auto：背景图片的真实大小——默认值
- backgound复合属性：
- 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式
- 多背景图：通过background实现
- background：url() no-repeat 第一个背景图位置，url() no-repeat 第二个背景图位置，url() no-repeat 第三个背景图位置，url() no-repeat 第四个背景图位置
- background-origin：背景图片的起始点位置
- 新增边框相关属性：
- border-radius：边框圆角
- 像素值大小（一个值为所有边框角，两个值为椭圆角，八个值为四个椭圆角的单独设置）
- 元素宽高的百分比
- 注意：单独设置边框各个角的圆角需要分别设置border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius。
- outline：边框外轮廓
- outline：大小，边框形状，颜色
- outline-width：大小
- outline-color：颜色
- outline-style：边框形状
- outline-offset：外轮廓偏移量
- border-radius：边框圆角
- 新增文本属性：
- text-shadow：文本阴影
- text-shadow：水平、垂直位置、阴影模糊程度，阴影颜色
- white-space：文本换行
- pre：按原文显示，即便超出容器也不会改变显示位置
- pre-wrap：超出容器的文字会自动换行
- pre-line：超出容器的文字会自动换行，但只认文字中间的空格，文字始末的空格不记
- nowrap：所有文字强制不换行
- text-overflow：文本溢出
- clip：超出文字直接截掉
- ellipsis：溢出的文字用...表示省略
- 注意：前提需要与overflow为非visible值结合使用
- text-decoration：文本修饰
- text-decoration：线位置，形状，颜色
- text-decoration-line：线的位置
- text-decoration-style：线的形状
- text-decoration-color：线颜色
- -webkit-text-stroke：文本描边
- -webkit-text-stroke：颜色，粗细
- -webkit-text-stroke-color：描边颜色
- -webkit-text-stroke-width：描边粗细
- text-shadow：文本阴影
- 渐变：
- 线性渐变：
- 设置渐变颜色：background-image：linear-gradient(颜色1，颜色2，颜色3...)
- 设置渐变方向：
- 通过关键词设置：background-image：linear-gradient(to 位置关键词，颜色1，颜色2，颜色3...)
- 通过角度设置：background-image：linear-gradient(角度，颜色1，颜色2，颜色3...)
- 设置渐变区域：background-image：linear-gradient(角度，颜色1 像素位置1，颜色2 像素位置2，颜色3 像素位置3...)
- 径向渐变：
- 综合写法：background-image：radial-gradient(半径1 半径2 at 圆心位置1 圆心位置2，颜色1 像素位置1，颜色2 像素位置2，颜色3 像素位置3...)
- 设置渐变颜色：background-image：radial-gradient(颜色1，颜色2，颜色3...)
- 调整径向渐变圆心位置：
- 通过关键词：background-image：radial-gradient(at 位置关键词，颜色1，颜色2，颜色3...)
- 通过像素值：background-image：radial-gradient(at 像素位置1 像素位置2，颜色1，颜色2，颜色3...)
- 调整径向渐变形状：
- 通过关键词：background-image：radial-gradient(circle，颜色1，颜色2，颜色3...)
- 通过调整渐变半径：background-image：radial-gradient(半径1 半径2，颜色1，颜色2，颜色3...)
- 调整径向渐变区域：background-image：radial-gradient(颜色1 像素位置1，颜色2 像素位置2，颜色3 像素位置3...)
- 重复渐变：在没有发生渐变的区域重复发生渐变
- background-image：repeating-linear-gradient(颜色1，颜色2，颜色3...)
- background-image：repeating-radial-gradient(颜色1，颜色2，颜色3...)
- 线性渐变：
- web字体：通过@font-face指定字体的具体位置，浏览器会自动下载该字体，并在网页中显示应用该字体的文字。
- 注意：中文的字体文件很大，使用完整字体文件不显示，通常针对某几个文字进行单独定制，可使用阿里web字体定制工具：iconfont-webfont平台
- 字体图标：
- 特点：
- 相比图片更加清晰
- 灵活性高，更方便改变大小、颜色、风格等
- 兼容性好，IE也能支持
- 注意：推荐使用阿里图标库
- 特点：
- 变换：
- 2D变换：transform
- 位移：translate(x轴位移，y轴位移)
- 注意：位移与相对定位很类似，不脱离文档流；相对定位百分比值参考的是父元素，位移的百分比值参考的是自身；浏览器处理位移的效率更高；位移对行内元素无效；位移配合定位，可实现元素水平垂直居中。
- 缩放：scale(x方向缩放，y方向缩放)
- 注意：scale一个值可同时设置水平和垂直缩放。
- 2D旋转：rotate（角度值）或rotateZ(角度值)
- 扭曲：skew（x角度值,y角度值），让元素在二维平面内被“拉扯”，进而“走形”。
- 多重变换：多个变换，可以同时使用一个transform来编写。
- transform：translate（） scale（） rotate（）
- 变换原点：tansform-origin（x轴位移，y轴位移）
- 位移：translate(x轴位移，y轴位移)
- 3D变换：
- 第一步（开启三维控件）：transform-style：preserve-3d
- 第二步，设置景深（有了透视效果，近大远小）：perspective：像素值
- 第三步：透视点位置：pespective-origin：x轴位置 Y轴位置
- 3D位移：tanslateZ（），translate3d（x,y,z）
- 3D旋转：rotate(1,1,1,像素值)
- 3D缩放： scaleZ（），scale3d（x，y，z缩放倍数）
- 3D_多重变换：translateZ（） scaleZ（）rotateY（）
- 背部可见性：backface-visibility：hidden
- 2D变换：transform
- 过渡：可以在不使用Flash动画，不使用JS的情况下，让元素从一种样式平滑过渡为另一种样式
- 第一步：设置哪个属性需要过渡效果：transition-property：height/width/...其他属性/all
- 第二步：设置过渡时间：transition-duration：持续时长
- 过渡延迟：transition-delay：延迟时间
- 过渡样式：transition-timing-function：ease（慢，快，慢）/liner（匀速）/ease-in（慢，快）/ease-out（快，慢）/ease-in-out（慢，快，慢）/step-start（不考虑过渡时间，直达终点）/step-end（等完过渡时间直达终点）/steps（20）（分步进行过渡）/cubic-bezier（数字，数字，数字，数字）（贝塞尔曲线）
- 注意：在线制作贝塞尔曲线网址：https://cubic-bezier.com
- 过渡复合属性：
- transition：过渡时间、需要过渡的属性、延迟时间、过渡样式。
- 动画：
- 第一步：声明动画：adimation-name：自定义动画名
- 第二步：
- 定义动画方式一：@keyframes 动画名 { from {第一帧} to {最后一帧}}
- 定义动画方式二：@keyframes 动画名 { 0% {第一帧} ?%{中间任一帧} 100%{最后一帧}}
- 第三步：应用动画：
- 动画时间：animation-duration
- 延迟时间：animation-delay
- 其他属性：
- 动画方式：animation-timing-function，同transition-timing-function
- 动画播放次数：animation-iteration-count：指定次数/infinite（无限次）
- 动画方向：animation-direction：normal/reverse（反方向）/alternate（往复运动）/alternate-reverse（反向往复运动）
- 动画以外的状态（不发生动画的时候在哪里）：animation-fill-mode：forwards（停在最后一帧）/backwards（返回初始帧）
- 动画的播放状态：animation-play-state：paused（暂停）
- 动画复合属性：animation：动画名，动画时间，延迟时间，动画方式，播放次数，动画方向，动画结束状态
- 动画和过渡的区别：动画不需要触发条件，过渡需要；动画可以通过设置多个关键帧对图像进行精细设置。
- 多列布局：
- column-count：列数。直接指定列数
- column-width：列宽。指定列宽，自动计算列数
- columns：列数，列宽。复合属性
- column-gap：列间距。调整列间距
- column-rule：边框宽度，边框风格，边框颜色。
- column-span：all/none。是否横跨所有列
- 伸缩盒模型：
- display：flex/inline-flex。将该元素变为伸缩容器/行内伸缩容器，开启flex布局
- 注意：伸缩容器的所有子元素（仅子元素）自动成为了伸缩项目，伸缩项目直接成为块元素。
- 主轴方向：
- flex-direction：row（从左到右）/row-reverse（从右到左）/column（从上到下）/column-reverse（从下）。
- 主轴换行：
- flex-wrap：wrap（换行）/wrap-reverse(反转的换行)/nowrap（不换行）。
- 复合属性：
- flex-flow：主轴方向 换行方式
- 主轴对齐方式：
- justify-content：flex-start/flex-end/center/space-around（均匀分布一行，项目间距离是项目距边缘的二倍）/space-between（均匀分布一行，项目间距离相等，项目与边缘没有距离）/space-evenly（均匀分布，项目间距离和项目距边缘相等）
- 侧轴对齐：
- 一行：align-items：flex-start/flex-end/center/baseline（基线对齐）/stretch（拉伸到整个父容器，伸缩项目不能给高度）
- 多行：align-content：flex-start/flex-end/center/space-around/space-between/space-evenly/stretch
- 元素水平垂直居中：
- 方案一：flex+align
- display：flex
- justify-content：center
- align-items：center
- 方案二：flex+margin
- display：flex
- margin：auto
- 方案三：文本对齐或块对齐方式
- 子元素为行内块元素或行内元素：
- text-align：center
- vertical-align：middle或者指定line-height：父元素height值
- 子元素为块元素：
- margin：0 auto
- margin-top：父元素高一半-自身高度的一半
- 子元素为行内块元素或行内元素：
- 方案四：绝对定位+margin:auto
- position：absolute
- margin：auto
- 方案五：绝对定位+margin
- position：absolute
- top：50%；margin-top：-元素自身高度一半
- left：50%；margin-left：-元素自身宽度的一半
- 方案六：绝对定位+translate
- position：absolute
- top：50%；left：50%
- transform：translate（-50%，-50%）
- 方案七：table-cell
- display：table-cell
- text-align：center
- vertical-align：middle
- 方案一：flex+align
- 项目基准长度：设置伸缩项目在主轴上的基准长度
- flex-basis：像素值
- 伸缩：
- 伸缩项目——伸：
- flex-grow：数值，数字表示每个项目拉伸的比例
- 伸缩项目——缩：
- flex-shrink：数值，影响项目缩小时缩小值的比例
- 伸缩项目——伸：
- 伸缩复合属性：
- 一般写法：flex：flex-grow数值 flex-shrink数值 基准长度
- flex：auto同flex：1 1 auto
- flex：1 同flex：1 1 0 表示可拉伸压缩，基准长度为0（最常用）
- flex：none同flex：0 0 auto 表示不能拉伸压缩
- flex：0 auto同flex：0 1 auto表示不能拉伸可以压缩
- 响应式布局：
- @media print/screen/all{}：只有在特定媒体类型才会执行
- @media (width/max-width/min-width/device:800px)：检测到特定媒体特性时执行
- 运算符：, AND not Only
- 项目的排序与单独对齐：
- order：默认值为0，越小排序越前
- align-self：flex-start/flex-end/center
- BFC（块格式化上下文）：
- 作用：
- 1、开启BFC后不会有margin塌陷问题
- 2、元素开启BFC后不会被其他浮动元素覆盖
- 3、开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷
- 如何开启：
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格：table\thead\tbody\tfoot\th\td\tr\caption
- overflow值不为visible的元素
- 伸缩项目
- 多列容器
- column-span为all的元素
- display值为flow-root的元素
- 作用：
CSS基础篇完结！撒花！