writing-mode:vertical-lr ;改变文字的显示方向

CSS3新属性

• 弹性盒布局

三个边框属性

• border-radius：圆角边框
• box-shadow：添加阴影
• border-image：使用图片绘制边框

box-shadow

设置元素阴影，设置属性如下：

• 水平阴影
• 垂直阴影
• 模糊距离(虚实)
• 阴影尺寸(影子大小)
• 阴影颜色
• 内/外阴影

其中水平阴影和垂直阴影必须设置

过渡

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

/*宽度从原始值到制定值的一个过渡，运动曲线ease，运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s

/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s

也可分开写

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

text-justify 改变字与字之间的间距使得每行对齐

word-wrap:normal | break-word，检索或设置对象中的单词之间间隔

outline：CSS2 的复合属性。设置或检索对象外的线条轮廓。outline画在border (opens new window)外面

处理文字溢出时使用 text-overflow ，文字突破限制12像素使用 transform: scale（0.5）

getComputedStyle？

• 普通： 获取当前元素所有最终CSS属性值，等价document.defaultView.getComputedStyle
• 详细： window.getComputedStyle(elem,null).getPropertyValue("height")可能的值为 100px，就算是css上写的是 inherit， getComputedStyle也会把它最终计算出来。不过注意，如果元素的背景色透明， getComputedStyle获取出来的就是透明的这个背景（因为透明本身也是有效的），而不会是父节点的背景。所以它不一定是最终显示的颜色
• getComputedStyle会引起回流，因为它需要获取祖先节点的一些信息计算（譬如宽高等），慎用，回流引起性能问题。合适的话会将话题引导回流，重绘，浏览器渲染原理等等。也可以列举一些其它会引发回流的操作，如 offsetXXX， scrollXXX， clientXXX， currentStyle等

font

font:italic 20px/1.5 arial;

是 font-style (opens new window), font-variant (opens new window), font-weight (opens new window), font-size (opens new window), line-height (opens new window) 和 font-family (opens new window) 的简写

vertical-align：指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式

text-indent：定义一个块元素首行文本内容之前的缩进量

选择器优先级

比较规则是: 从左往右比较 ，较大者胜，如果相等，则继续往右移动一位比较 。如果4位全部相等，后面覆盖前面

内联>id> 类(属性、伪类) > 标签(伪元素)>通配符

内联——CSS直接写在HTML标签中

嵌入 ——CSS写在style标签中

内联>嵌入>外部

内联样式： 1000；如 style="color: green"；

ID ： 100

类、属性、伪类： 10，如.foo, :first-child, div[class="foo"]

标签、伪元素 (opens new window)：1，如 div::first-line

通配符、子类、兄弟，如* > +：0

继承样式没有权值

加有!important的权值最大，优先级 (opens new window)最高

“[id=p33]”形式的选择器被视为属性选择器(权值为10)，即使id属性在源文档的文档类型中被定义为“id选择器”

• *通配符 和关系选择符(+ > ~ '' ||)和否定伪类(:not()) 对优先级没影响，但 :not 内部声明的选择器会影响优先级

注意事项

• !important优先级最高。避免使用，会破坏样式表中固有的级联规则！！
• 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
• 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
• 永远不要在插件中使用 !important
• 不在全站范围使用 !important
• 样式表来源不同时 优先级顺序为：内联>内部>外部>浏览器用户自定义>浏览器默认

兄弟 li ~ a

相邻兄弟 li + a

后代 li a

儿子 li>a

属性选 a[rel="external"]

伪类 a:hover, li:nth-child

通配 *{}

类型h1{}

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:focus ：选择具有焦点的
:first-child：父元素的首个子元素

• 伪元素

::first-letter ：用于选取指定选择器的首字母
::first-line ：选取指定选择器的首行
::before : 选择器在被选元素的内容前面插入内容
::after : 选择器在被选元素的内容后面插入内容

background:red;这个样式从表面来说，和background-color:red;一样的效果，使用复合写法，不光加载背景颜色样式，还加载了其他样式——非常不合理！！

伪元素和伪类

(:)用于伪类，(::)用于伪元素

伪元素：设置元素指定部分的样式，::after，::first-line，::first-letter ，::before

伪类：定义元素的特殊状态，常见的有 :hover，:active，:checked，:focus，:first-child

操作文档已有的元素

🍅盒模型

默认！标准(content-box)

width只包含内容宽度，不包含border和padding

盒子总宽度=margin+border+padding+width

box-sizing 属性以特定的方式定义某个区域特定元素，设置对象的盒模型组成模式

box-sizing: content-box;//定义引擎如何计算元素的总高度和总宽度

• content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
• border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
• inherit 指定 box-sizing 属性的值，从父元素继承

IE 怪异(border-box)

width=content+padding+border

盒子总宽度=margin+width

box-sizing:border-box;

link、@import

都是外部引用CSS的方式

• link是XHTML标签，除加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
• link无兼容问题；@import在CSS2.1提出，低版本的浏览器不支持
• link支持使用JS控制DOM改变样式；而@import不支持

link 权重高于@import

link是行内吗？

个人觉得啥也不是，就是个 空标签

link的伪类？

<div id="content">
        <h3>
            <a class="a1" href="#">
                a标签伪类link，hover，active，visited，focus区别
            </a>
    </h3>
</div>  
<style>
a.a1:link{        /*链接未被访问时的状态*/
  color: blue;
}
a.a1:visited{     /*链接访问后的状态*/
  color: green;  
}
a.a1:hover{       /*鼠标悬浮的状态*/
  color: red;
}
a.a1:focus{       /*鼠标点击后，刚松开的状态*/
 color: orange;   
}
a.a1:active{      /*点击中的状态，鼠标未松开时*/
  color: yellow;
}
</style>

a:link 未设置超链接则无效

a:visited 针对URL，若两个a标签指向一个链接，点击一个另一个也有visited属性

LOVE AND HATE

定位方案

定位流

元素的属性 position 为 absolute 或 fixed，绝对定位

绝对/fixed 定位中 元素整体脱离普通流，绝对定位元素不会对其兄弟元素造成影响，元素具体的位置由绝对定位的坐标决定

定位相对于它的包含块，设置top、bottom、left、right在二维空间进行定位；可使用z-index放置三维空间

对 position: absolute，元素定位相对于上级元素最近的一个relative、fixed、absolute，如果没有则相对于body

对position:fixed，正常来说相对于浏览器窗口定位，但是当元素祖先的 transform 属性非 none 时，相对于该祖先定位

浮动流

属于是 半脱离文档流，因为它仍然占据位置，其他的文本内容按照顺序排列

元素首先按照普通流的位置出现，然后根据浮动的方向尽可能向左/右偏移**，效果与印刷排版中的文本环绕相似**

正常文档流

普通流就是指BFC中的FC

FC(Formatting Context)——格式化上下文，是页面中的一块渲染区域，有一套渲染规则，决定其子元素如何布局，以及和其他元素之间的关系和作用

普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程，行内元素水平排列，直到当行被占满然后换行。块级元素则被渲染为完整的新行

除非指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定

text-align 属性规定元素中的文本的水平对齐方式

浮动

最初浮动 为了 解决左边图片，右边文字的需求

浮动元素碰到包含它的边框或浮动元素的边框停留

浮动元素不在文档流中，所以文档流的块框表现得像浮动框不存在

块级元素认为浮动元素不存在，浮动元素会影响行内元素的布局，浮动元素通过行内元素间接影响包含块的布局

1、脱离文档流，不影响普通元素布局

2、内联排序，多个浮动的元素类似 行内元素

浮动元素摆放遵循规则：

• 尽量靠上
• 尽量靠左
• 尽量一个挨一个
• 可能超出包含块
• 不能超过所在行的最高点
• 行内元素绕着浮动元素摆放

带来的问题

• 高度塌陷——因为子元素浮动脱离了文档流，无法撑起父元素
• 与浮动元素同级的非浮动元素 紧随其后

清除浮动

容器高度auto，且容器中有浮动的元素，会导致 容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器之外 破坏 我们的布局——浮动溢出

• 父级div定义height
• 给父元素 添加clearfix(浮动类)——常用
• 浮动元素末尾 加空div，设置clear:both——增加多余标签，不够优雅，不易维护，一般不采用(但非 不推荐)
• 父级div定义zoom
• 父级overflow：hidden/auto**（不推荐）**——BFC

大型项目一般多层嵌套，若父元素设置浮动，父亲的父亲可能也要设置浮动，页面布局容易乱

• 浮动元素容器添加浮动（不推荐，会使整体浮动，影响布局）
• after伪元素清除浮动，元素尾部添加一个看不见的块元素清理浮动，设置clear:both（推荐）
• before和after双伪元素清除浮动

总结 3种

1、clear属性

2、BFC

3、::after伪元素

💙 层叠上下文

• 普通元素的层叠等级优先由其所在的层叠上下文决定
• 层叠等级的比较只有在当前层叠上下文才有意义
• css3新属性也可以产生层级上下文
• 两个兄弟元素，一个设置了background，一个设置了z-index:-1，background优先级低
• z-index: auto不生成层叠上下文，z-index:0生成为0的层叠上下文
  • 两个为0的z-index，后一个优先级大

创建

根元素（HTML）——根层叠上下文

这就是为什么，绝对定位元素在left/top等值定位时，若没有其他定位元素限制，相对浏览器窗口定位的原因

1. HTML
2. 定位(relative/absolute)且 z-index 不为 auto
3. position为 fixed/sticky
4. grid/flex 的子元素且z-index不为auto
5. opacity 小于 1
6. will-change 指定上述任意属性之一，即便你没有直接定义这些属性
7. isolation为isolate
8. mix-blend-mode 不是 normal
9. reflection属性
10. overflow不为 visible
11. transform /filter / mask 不为 none

body的子元素，该元素的z-index为10？？？

z-index

取值

数字无单位

• auto(默认)和其父元素一样的层叠等级

• 整数

• inherit继承

层叠上下文和层叠等级

对每一个网页来说，默认创建一个层叠上下文(可类比一张桌子)，这个桌子就是html元素，html元素的所有子元素都位于这个默认层叠上下文中的某个层叠等级(类似于桌子上放了一个盆儿，盆上放了一个果盘，果盘上放了一个水杯……)

将元素的z-index属性设置为非auto时，会创建一个新的层叠上下文，它及其包含的层叠等级独立于其他层叠上下文和层叠等级(类似于搬了一张新桌子过来，和旧桌子完全独立)

层叠顺序

div默认在html之上，及div的层级高于html

一个层叠上下文可能出现7个层叠等级，从低到高排列为

1. 背景和边框
2. z-index为负数
3. block盒模型(位于正常文档流，块级，非定位)
4. float盒模型(浮动，非定位)
5. inline盒模型(位于正常文档流，内联，非定位)
6. z-index=0
7. z-index为正数(数值越大越靠上方)

压盖顺序

自定义压盖顺序：使用属性z-index

• 不只有定位元素(position属性明确设置为absolute、fixed或relative)可使用z-index，后来更新了，flex也可以
• 如果z-index值相同，html结果在后面的压盖住在前面的
• 父子都有z-index，父亲z-index数值小时，儿子数值再大没用

为啥定位元素会层叠在普通元素之上？

因为元素一旦成为定位元素，z-index自动生效，默认auto，即0级别，就会覆盖inline、block和float元素

层叠上下文和定位元素一个层叠顺序，发生层叠时，遵循"后来居上"

🔥 position

MDN参考-position (opens new window)

1、relative：相对定位 给元素设置相对于原本位置的定位，不脱离文档流，原本位置被保留，其他元素位置不受影响。body默认relative，子绝父相

使用top bottom left right 移动位置后不会改变？？？？？？其所占空间位置，可使用z-index属性

2、absolute：***脱离文档流，影响页面布局***，相对于包含块偏移（包含块——最近的position不为static的外层元素），可使用top bottom left right z-index

元素为absolute定位时，如果为内联元素，会变为块级元素；如果为块级元素，宽度由100%变位auto

3、fixed：脱离文档流，相对于viewport定位。特殊版的 absolute，父元素使用transform时以父元素定位

绝对定位将元素固定在相对于其位置最近的祖先，若没有，则为 初始包含它的块

使用场景：侧边栏或者广告图

4**、static：默认**。元素处于正常的文档流中，忽略 left、top、right、bottom 和 z-index 属性

5、sticky：css3新增，粘性定位，relative和fixed的混合。正常情况保持原先布局(和relative相同)，到达边缘条件后，元素的表现情况和fixed一样，粘在某个位置

使用场景 使导航栏随页面滚动直到特定点，然后粘贴到页面顶部

top影响定位元素垂直位置，对非定位元素没有影响

• position: absolute/fixed; top将元素上边缘设置为其最近定位祖先的上边缘上方/下方的单位
• position: relative; top使元素上边缘在其正常位置上方/下方移动
• position: sticky; top当元素在视口内时，属性的行为类似于它的位置，当它在外面时它的位置是固定的
• position：static; top无效

• JS实现sticky

获取 dom相对于窗口的位置 ，获取元素大小及其相对视口的位置

    function sticky(dom,height){
      window.onscroll = function(){
        const rect = dom.getBoundingClientRect();
        if(rect.top <= height){
          dom.style.position = 'fixed'
          dom.style.top = height + 'px';
        }else{
          dom.style.position = 'relative'
          dom.style.top = height + 'px'
        }
      }
    } 

6、inherit：继承

悬浮在右下角，随滚动而滚动

position: fixed;
bottom: 0px;
right: 0px;

✅ BFC

块格式化上下文（Block Formatting Context）

BFC 决定元素如何对其内容定位，及与其他元素的关系和相互作用，是一个独立的容器，元素按照一定规则布局，与其他环境元素的布局互不影响

除了 BFC，还有：

• IFC（行级格式化上下文）- inline 内联
• GFC（网格布局格式化上下文）- display: grid
• FFC（自适应格式化上下文）- display: flex或display: inline-flex

注意：同一个元素不能同时存在于两个 BFC 中

创建

• html根元素
• float 不为 none
• display： inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• position ： absolute、fixed
• overflow 值不为 visible，即为 auto、scroll、hidden

特点

• 垂直方向上，自上而下，与文档流排列方式一致

• 同一 BFC 下的相邻块级元素可能发生margin折叠，创建新的 BFC 可以避免margin折叠

• BFC不与浮动容器重叠

  • 两栏布局

  • float + overflow:hidden

• 计算BFC高度时，浮动元素！参与！！计算

• 每个元素的左margin和容器的左border相接触，即 每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式的话，则相反），即使存在浮动

应用

• 解决margin重叠
  • 块级元素的上外边距和下外边距合并（或折叠）为一个外边距，取其中较大者——外边距折叠，这个发生在属同一 BFC 下的块级元素间
  • 解决：两个元素变成两个BFC
• 左列浮动，右列 overflow: hidden; 触发BFC
• 父子元素margin重叠
  • 如果父元素与其第一/最后一个子元素间不存在边框、内边距、行内内容，没有创建 块格式化上下文/清除浮动将两者外边距 分开，子元素的外边距会“溢出”到父元素的外面
  • 解决
    • 父元素触发BFC
    • 父元素添加border
    • 父元素添加padding

   /**
    本来父元素距离顶部只有 20px，被子元素溢出影响，外边距重叠，取较大的值，则距离顶部 30px
     */
    #parent {
        width: 200px;
        height: 200px;
        background-color: green;
        margin-top: 20px;
        overflow: hidden;
    }
    #child {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 30px;
    }

• 清除浮动，解决父元素高度塌陷
  • 子元素浮动，脱离文档流，父元素高度只有边框部分高度
  • clear:both；overflower:hidden；display: flow-root
• 其他盒子看不见被float的元素，但是其他盒子里的文本看得见

文字环绕效果

第二个元素被浮动元素遮盖部分，但是——文字不会被覆盖，因为文字看得见被float的元素，需要避开元素被覆盖，可触发 第二个元素的BFC，加入overflow:hidden

还可实现 自适应两栏布局

居中

不定宽高

• 水平局中

• 定位+margin:auto

• 定位+transform

• 定位+margin:负值

• flex布局

• grid布局

内联

• 水平居中

• 行内元素可设置：text-align: center

• flex布局设置父元素：display: flex; justify-content: center

• 垂直居中

• 单行文本父元素确认高度：height === line-height

• 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle

• 绝对居中——兼容性好的属性

<!DOCTYPE html>
<html>
<head>
    <style>
        .a{
            display:inline-block;
            text-align:center;
            width:100px;
            height:100px;
            background-color:yellow;
        }
        .a::before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .b{
            /*vertical-align需要参考的对象，因此在前面插入内容比较*/
            vertical-align:middle;
        }
    </style>
</head>
<body>
<span class="a">
	<span class="b">luo</span>
</span>
</body>
</html>

块级

• 水平居中

• absolute+margin auto ，宽高固定，对应方向平分

        .box {
            position: relative;
            background-color: green;
        }
        .small {
            background-color: red;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 100px;
            height: 100px;
        }

• absolute+calc

 .box {
            position: relative;
            background-color: red;
        }
        .small {
            background-color: green;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
        }

• absolute+负margin， left: 50% 和 top: 50% 将子元素左上角移到父元素中心位置，margin-left 和 margin-top 以子元素自身一半宽高负值赋值（PC端有兼容性要求推荐）

 .box {
            position: relative;
            background-color: red;
        }
        .small {
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
            width: 100px;
            height: 100px;
        }

• 垂直居中

• position: absolute设置left、top、margin-left、margin-top(定高)
• display: table-cell
• transform: translate(x, y)
• flex(不定高，不定宽)
• grid(不定高，不定宽)，兼容性相对比较差

💚 绝对居中

• 定位+transform: translate(-50%,-50%)，translate属性值百分比基于自身宽高计算得出

        .box{
            background-color: red;
            position: relative;
            width: 100px;
            height: 100px;
        }
        .small{
            background-color: green;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 50px;
            height: 50px;
        }

• 父元素text-align为center水平局中；子元素设置inline-block和vertical-align:middle垂直居中，line-height继承父元素

        .box{
            background-color: red;
            line-height: 100px;
            text-align: center;
        }
        .small{
            width: 50px;
            height: 50px;
            background-color: green;
            vertical-align: middle;
            display: inline-block;
            line-height: inherit;
        }

• table table-cell，使用table属性，但不想写table元素（PC端有兼容性要求推荐）

        .box {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .small {
            width: 50px;
            height: 50px;
            display: inline-block;
            background-color: green;
        }

• table PC有兼容性要求，宽高不固定，推荐
• flex（PC端无兼容性要求，不考虑IE的话，grid也可）（移动端使用推荐，grid作为备选）

 .box {
            display: flex;
            justify-content: center;
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .small {
            width: 20px;
            height: 20px;
            align-self: center;
            background-color: green;
        }

• flex +margin:auto，兼容性好
• grid + align-items兼容性不行，和flex相似

.box {
    display: grid;
    justify-items: center;
    align-items: center;
}

        .box {
            display: grid;
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .small {
            width: 50px;
            height: 50px;
            background-color: green;
            justify-self: center;
            align-self: center;
        }

.box {
    display: grid;
    justify-items: center;
}
.small {
    align-self: center;
}

冷门方式

伪类元素

grid-container

grid-template-rows

注意

不要float 、position一起用

不要对display:table-cell使用百分比设置宽高

两栏布局

左边宽度固定，右边宽度自适应

• 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1
• 利用浮动。左边元素宽度为200px+左浮动。右边元素的margin-left为200px+宽度为auto（默认为auto，撑满整个父元素），需要设置高度。margin-left/padding-left/calc
• 利用浮动。左元素宽度固定 ，向左浮动。右侧元素 overflow: hidden; 右边触发了 BFC ，BFC 的区域不会与浮动元素重叠，所以两侧不会重叠 float + overflow:hidden

 .left {
        background-color: #3e8dce;
        float: left;
        height: 200px;
        width: 400px;
        margin-right: 20px;
    }

    .right {
        background-color: red;
        overflow: hidden;
        height: 300px;
    }

左列左浮动，将自身高度塌陷，使得其它块级元素可以和它占据同一行位置

右列利用自身流特性占满整行

右列设置overflow，触发BFC特性，使自身和左列浮动元素隔开，不占满整行

• 绝对定位 父级相对定位 左边absolute定位，宽度固定。设置右边margin-left为左边元素的宽度值。
• 绝对定位，父级元素相对定位。左边元素宽度固定，右边元素absolute定位，left为宽度大小，其余方向为0。(有歧义，谨慎使用!)
• 使用 calc 计算

.left {
  display: inline-block;
  width: 240px;
}
.right {
  display: inline-block;
  width: calc(100% - 240px);
}
//使用 calc() 函数计算 <div> 元素的宽度

• grid

grid-template-columns: minmax(<min>, <max>) …)

.par{
    display:grid;
    grid-template-columns:minmax(150px,25%) 1fr;
}

将最小侧边栏大小设置为150px，但在更大的屏幕上，让它伸展出25%。侧边栏将始终占据父级水平空间的25%，直到25%变得小于150px。

🍅三栏布局

其中一列宽度自适应

圣杯布局(左右float+负margin)

缺点：需要多加一层标签，html顺序不对，占用了布局框的margin属性

核心是左、中、右 三栏都通过float浮动，通过负margin调整

• center使用双层标签，外层浮动，以便左中右能在同一行显示
• 左margin-left:-100%，相当于中间的宽度，所以向上偏移到左侧
• 右margin-left:-100px，相当于自身宽度，所以向上偏移到最右侧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .container{
        font-size: 26px;
        color: white;
    }
    .left,
    .main,
    .right{
        height: 300px;
    }
    .main-warpper{
        float: left;
        width: 100%;
    }
    .left,
    .right{
        float: left;
        width: 200px;
        margin-left: -100%;
        background-color: green;
    }

    .right {
        margin-left: -200px;
        /*同自身宽度*/
    }

    .main {
        margin: 0 210px;
        background-color: red;
    }
</style>
<body>
<div class="container">
    <div class="main-warpper">
        <div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores assumenda, at autem consequatur cum eaque, eius est eveniet fugit id itaque necessitatibus perferendis perspiciatis quia, ratione sint temporibus voluptatum?</div>
    </div>
    <div class="left">左边固定宽度</div>
    <div class="right">右边固定宽度</div>
</div>
</body>
</body>
</html>

缺点：

• 增加了一层，结构变复杂
• 使用负margin，相对麻烦

双飞翼布局(左右float+中margin)

双飞翼布局——圣杯布局的改进方案

双飞翼布局前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：

既然main部分的内容会被遮挡，就在main内部再加一个content，设置其margin避开遮挡

原理：

• 两变固定，中间自适应
• 中间元素margin值控制两边间距
• 宽度小于左右部分宽度之和时，右侧被挤下去

缺点

• html结构不正确，主体内容最后加载
• float布局需要清除浮动，因为float会脱离文档流，造成高度塌陷
• 右边在主体内容之前，若是响应式设计，不能简单的换行展示

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
            float: left;
            width: 100%;
        }
        .content {
            height: 200px;
            margin-left: 110px;
            margin-right: 220px;
            background-color: green;
        }
        /*创建一个伪元素，作为已选中元素的最后一个子元素。*/
        .main::after {
            display: block;
            content: '';
            font-size: 0;
            height: 0;
            /*在main后面加一个元素来清除浮动。*/
            clear: both;
            zoom: 1;
        }
        .left {
            float: left;
            height: 200px;
            width: 200px;
            margin-left: -100%;
            background-color: red;
        }
        .right {
            width: 200px;
            height: 200px;
            float: left;
            margin-left: -200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>
    <div class="main">
        <div class="content"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

两边absolute+中margin

基于绝对定位

优点 快捷，方便，不容易出问题，你可以很快想出这种布局方式。要求父级要有非static定位，如果没有，左右框容易偏移出去

缺点 绝**对定位脱离文档流，相对最近的已经定位的祖先元素定位，无需考虑HTML中顺序。**意味着下面的所有子元素也会脱离文档流，导致这种方法的有效性和可使用性比较差

子绝父相，父元素设置为relative，左右两栏设置为absolute+中间一栏margin

• 两边使用绝对定位，固定在两侧
• 中间占满一行，通过margin和左右两边留出间隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .main {
        position: relative;
        font-size: 25px;
        color: white;
    }

    .left,
    .center,
    .right {
        height: 400px;
    }

    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        background-color: red;
    }

    .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        background-color: blue;
    }

    .center {
        margin: 0 300px;
        background-color: green;
        /*overflow: auto;*/
    }
</style>
<section class="main">
    <div class="left">左边固定宽度</div>
    <div class="center">中间自适应</div>
    <div class="right">右边固定宽度</div>
</section>

</body>
</html>

绝对定位

三栏均设置为absolute+left+right

BFC

将main变成BFC，就不会和浮动元素重叠

父元素设置overflow: hidden;

table

优点 很少有人使用，flex布局不兼容的情况下table还可以尝试

缺点 使用相对繁琐，代码量大，存在缺陷，当单元格的一个格子超出高度之后，两侧就会一起触发跟着一起变高

• 最外层设置display:table，设置table-layout:fixed，表示列宽自身宽度决定，而不是自动计算
• 内层的左中右设置 display:table-cell 为表格单元
• 左右设置固定宽度，中间width:100%，填充剩下的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .table {
        display: table;
        width: 100%;
        color: white;
        font-size: 30px;
        height: 400px;
        table-layout: fixed;
    }

    .left,
    .center,
    .right {
        display: table-cell;
    }

    .left ,
    .right{
        width: 200px;
        background-color: green;
    }
    .center {
        background-color: blue;
    }

</style>
<div class="table">
    <div class="left">左边固定宽度</div>
    <div class="center">中间自适应</div>
    <div class="right">右边固定宽度</div>
</div>
</body>
</html>

flex

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1（flex: 1; === flex: 1 1 auto）

• 盒内元素两端对齐，中间设为100%宽度或flex:1，即可填充空白
• 盒内元素高度撑开容器高度

优点：

• 结构简单直观
• 实现更多效果，order调整显示顺序，让主题内容优先加载，但显示在中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .flex {
        display: flex;
        justify-content: space-between;
        color: white;
        font-size: 30px;
    }

    .left,
    .center,
    .right {
        height: 300px;
    }

    .left {
        width: 100px;
        background-color: blue;
    }

    .center {
        /*flex: 1;*/

        width: 100%;
        margin: 0 20px;
        background-color: green;
    }

    .right {
        width: 300px;
        background-color: red;
    }
</style>
<section class="flex">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</section>

</body>
</html>

grid

优点 比较超前一点的布局自然有其独特的魅力

缺点 兼容性

grid-template-columns 该属性是基于 网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。

用单位 fr 来定义网格轨道大小的弹性系数。 每个定义了 <flex> 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时，它将是一个自动最小值(即 minmax(auto, <flex>) ) .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .grid {
        display: grid;
        /*grid-template-columns: 300px 3fr 300px;*/

        grid-template-columns: 300px auto 300px;
        width: 100%;

        font-size: 30px;
        color: white;
    }
    .left,
    .center,
    .right{
        height: 400px;
    }

    .left {
        background-color: red;
    }

    .center {
        background-color:blue;
    }

    .right {
        background-color:green;
    }
</style>
<section class="grid">
    <article class="left">
        <h1>我是grid栅格布局左框</h1>
    </article>
    <article class="center">
        <h1>我是grid栅格布局中间框</h1>
    </article>
    <article class="right">
        <h1>我是grid栅格布局右框</h1>
    </article>
</section>

</body>
</html>

❤️ flex布局

简便、完整、响应式地实现各种页面布局。为盒模型提供最大的灵活性

会使元素变为块级元素

父 子容器构成，通过主轴和交叉轴控制子容器布局，子元素float、clear和vertical-align属性失效

父容器

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

文字也会跟着flex-direction属性值排列，即，从左往右，从右往左……

.container {   
    flex-direction: row | row-reverse | column | column-reverse;  
} 

决定主轴方向，子元素的排列方向

• row（默认值）：主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column-reverse：主轴为垂直方向，起点在下沿

flex-wrap

.container {  
    flex-wrap: nowrap | wrap | wrap-reverse;
}  

弹性元素永远沿主轴排列，如果主轴排不下，flex-wrap决定容器内项目是否可换行

默认nowrap，但不会任由元素溢出，它会缩小以适应容器；若项目无法缩小，nowrap会溢出

flex-flow(简写属性)

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

定义项目在主轴上对齐方式

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默认）：左对齐
• flex-end：右对齐
• center：居中
• **space-between：**平分剩余空间，所以元素 间隔 相等
• space-around：项目两侧间隔相等，平分剩余空间

align-items

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

定义项目在交叉轴上如何对齐

默认 垂直方向

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch（默认）

这就是为啥 flex元素会默认被拉伸到最高元素的高度，实际上，它们被拉伸来填满 flex容器——最高元素定义 容器高度

align-content

.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch（默认值）：轴线占满整个交叉轴

子容器

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

定义item排列顺序，越小越靠前，默认0

可用空间

flex子项目属性改变了flex容器中的可用空间

flex-grow

定义项目延主轴 的放大比例（容器宽度>元素总宽度时如何伸展）

默认0，存在剩余空间也不放大

flex-warp：nowrap；不换行的时候，container宽度不够分时，弹性元素会根据flex-grow来决定

如果所有项目的flex-grow为1，它们将平分可用空间

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效

flex-shrink

定义项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小

flex 元素仅在默认宽度之和大于容器的时候才会收缩

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

flex-basis

定义分配多余空间前，占据主轴空间 ，默认auto

元素在主轴上的初始尺寸，初始尺寸——元素在flex-grow和flex-shrink生效前的尺寸

这就解释了：我们只要给flex元素父元素声明display:flex，所有子元素就会排成一行，且自动分配大小 以 充分展示内容

flex:1

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写，默认为 0 1 auto。后两个属性可选

0 1 auto
grow为0——flex元素不会超过他们basis的尺寸
shrink为1——可以缩小flex元素防止溢出
basis为auto——flex元素可在主轴上设置，也可根据内容自动获得

优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

flex: 1 = 1 1 0

flex: 2 = 2 1 0

flex: auto = 1 1 auto(既可以拉伸 也可以收缩)

flex: none = 0 0 auto(不可伸缩)

aline-self

默认值为auto，继承父元素的align-items属性，如果没有父元素，等同于stretch

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

左边固定右边自适应

//垂直居中
flex-direction:row/column;
align-items:center

//水平局中
flex-direction:row/column;
justify-content:center;

flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

place-items

设置 align-items 和 justify-items 的快速方法

隐藏元素

display:none

• 不会在页面占据位置
• 渲染树不会包含该渲染对象
• 不会绑定响应事件
• 会导致浏览器进行重排和重绘

visibility:hidden（性能更好，因为display引起页面回流，而visibility导致重绘）

• 占据位置，不更改布局
• 不会响应绑定事件
• 不会重排但会重绘

visibility: visible;
visibility: hidden;
visibility: collapse;

opacity:0

• 元素透明度设置为0
• 占据位置
• 能响应绑定事件
• 不能控制子元素展示
• 不会引发重排，一般会引发重绘

如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘

设置height width为0

将影响元素盒模型的属性设置为0，若有元素内有子元素或内容，应该设置其overflow:hidden来隐藏其子元素。

• 元素不可见
• 不占据空间
• 不响应点击事件

position：absolute

• 将元素移除可视区域
• 元素不可见
• 不影响页面布局

transform: scale(0,0)

缩放为0

• 占据位置

• 不响应绑定事件

• 不会触发浏览器重排

	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

visibility:hidden、 display:none

• 普通回答，一个隐藏，但占据位置，一个隐藏，不占据位置
• 进一步， display由于隐藏后不占据位置，所以造成了dom树的改变，会引发回流，代价较大
• 再进一步，当一个页面某个元素经常需要切换 display时如何优化，一般会用复合层优化，或者要求低一点用 absolute让其脱离普通文档流也行。然后可以将话题引到普通文档流， absolute文档流，复合图层的区别，
• 再进一步可以描述下浏览器渲染原理以及复合图层和普通图层的绘制区别（复合图层单独分配资源，独立绘制，性能提升，但是不能过多，还有隐式合成等等）

上面这些大概就是知识系统化后的回答，会更全面，容易由浅入深，而且一有机会就可以往更底层挖

opacity、rgba

opacity 取值在0到1之间，0表示完全透明，1表示完全不透明

.aa{opacity: 0.5;}

rgba中的R表示红色，G表示绿色，B表示蓝色，三种颜色的值都可以是正整数或百分数。A表示Alpha透明度。取值0~1之间，类似opacity

.aa{background: rgba(255,0,0,0.5);}

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。

**总结：**opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性

🙋 不可/可继承

可继承

• 字体属性

font-family

font-size

• 元素可见性
• 列表/列表 布局属性

linst-style

• 生成内容属性
• 光标属性
• 文本系列属性

text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 word-spacing：增加或减少单词间的空白（即字间隔） letter-spacing：增加或减少字符间的空白（字符间距） text-transform：控制文本大小写 direction：规定文本的书写方向 color：文本颜色

不可继承

• 盒子模型属性
• display
• 背景属性
• 定位属性
• 生成内容、轮廓样式、页面样式、声音样式
• 文本属性

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

border不可继承！

🍅line-height继承？

• 父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值。
• 父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是继承该比例。
• 父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 fontSize * 200% 计算出来的值。

💚 display

属性值	作用
none	不显示，会从文档流中移除
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示
inline	默认！！！行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
inline-block	默认宽度为内容宽度，可设置宽高，同行显示
list-item	像块类型一样显示，添加样式列表标记
table	作为块级表格显示，换行显示
inherit	继承

block，inline，inline-block

block：占据一行，可以设置宽高、行高、内外边距

<h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>
<div>
<dl>

inline：占据一行的小部分，多个行内元素水平排版；可设置内外边距，但只对左右起作用；宽只和内容有关；只能容纳文本或其他行内元素；不可设置宽高

<a >
<strong>
<b>
<em>
<i>
<del>
<span >
<img> 
<input> 
<select>

inline-block：跟行内元素类似，可设置宽高，保留 上下 外边距/内边距，可设置margin-left，inline-block可设置padding-left

button ，img ， input, select, label，textarea

input元素的type属性——password、text、file、button

空元素

<br> <hr> <img> <input> <link> <meta>

行内元素

• 水平居中

  div{text-align:center} /*DIV内的行内元素均会水平居中*/ 
  

• 垂直居中

  div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ 
  

块级元素

• 水平居中

div p{margin:0 auto; width:500px} /*块级元素p一定要设置宽度，才能相当于DIV父容器水平居中*/

• 垂直居中

div{width:500px} /*DIV父容器设置宽度*/      
div p{margin:0 aut0; height:30px; line-height:30px} /*块级元素p也可以加个宽度，         以达到相对于DIV父容器的水平居中效果*/

行内元素支持宽高

💙 高度塌陷

父元素的子元素脱离文档流，本身没设置高度，则它的高度=0

解决

1. BFC
2. 新增一个空的div或伪元素，设置清除 ，clear:both;

margin合并

外边框塌陷/外边距重叠，区别 高度塌陷！

2个垂直margin相遇会形成一个外边距，合并后的，margin等于2个合并的margin高度中的较大值

只有普通文档流中块级框的垂直margin才会发生重叠，行内框、浮动框或绝对定位 不会重叠

不想要合并的元素可创建一个 BFC，即 在第一个元素新建一个空元素，配置 overflow: hidden

less、sass

都是CSS预处理器。用专门的编程语言，进行web页面样式设计，再通过编译器转换为正常的css文件

less

是一门CSS预处理语言，扩展了CSS语言，增加了变量等特性

sass

Sass 是一种编译成 CSS 的样式表语言

变量 (opens new window)、嵌套规则 (opens new window)、混合 (opens new window)、函数 (opens new window)等，具有完全与 CSS 兼容的语法。助于保持大型样式表井井有条，共享设计变得容易

相同

1. 混入(Mixins)——class中的class
2. 参数混入——可以传递参数的class，就像函数一样
3. 嵌套规则——Class中嵌套class，从而减少重复的代码
4. 运算——CSS中用上数学
5. 颜色功能——可以编辑颜色
6. 名字空间(namespace)——分组样式，从而可以被调用
7. 作用域——局部修改样式
8. JavaScript 赋值——在CSS中使用JavaScript表达式赋值

区别

主要不同是实现方式

1. Less基于JS，客户端处理
2. Sass基于Ruby，服务端处理
3. 变量：Less用@ Sass用$
4. Less没有输出设置
5. Sass支持条件语句，Less不允许
6. Less环境比Sass简单

为啥使用Sass？

1. Compass使用Sass，成熟的框架
2. 国外讨论热度高
3. 学习教程好
4. Sass是成熟的CSS预处理器之一，维护好
5. Scss对sass语法做了改良

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能

🙋 移动端布局

静态布局

设置的长宽不变，不管屏幕多大，分辨率不会变

会出现滚动条

自适应布局

元素位置会变 但大小不变

兼容不同分辨率设备

屏幕大了 会拥挤，只是长度或图片变小了，不会根据不同设备展示不同样式

响应式布局

Content is like water

从以下几方面思考：

• 弹性盒子和媒体查询
• 百分比布局创建流式布局的弹性UI，使用媒体查询限制元素的尺寸和内容变更范围
• 相对单位使得内容自适应

缺点：

• 仅适用布局、信息、框架并不复杂的部门类型网站
• 兼容各种设备工作量大，效率低下
• 代码累赘，出现隐藏无用的元素，加载时间加长
• 一定程度上改变了网站原有的布局结构

媒体查询/vw/vh

根据用户行为和设备环境进行调整和响应，不同屏幕分辨率 不同展示方式

一套代码兼容web端、平板、手机端

rem适配方案已被淘汰

代替方案——viewport(视图 视窗

viewport分为 layout viewport、visual viewport、 ideal viewport

大部分浏览器把 viewport 的宽度设为 980px，浏览器默认视图叫 layout viewport，document.documentElement.clientWidth获取

layout viewport 的宽度远大于浏览器宽度，因此 我们需要新的 viewport 代表浏览器可视区域宽度，被称为 visual viewport ，使用 window.innerWidth 获取

因为越来越多的网站都会为移动设备 单独设计，所以需要有一个能完美适配 移动设备的 ideal viewport

ideal viewport没有固定的尺寸，不同设备有不同的ideal viewport，iphone5 的 ideal viewport 是 320px

弹性布局

rem/em/flex

• 关键元素高度和位置都不变，只有容器做伸缩变换
• 开发原则：文字流式控件弹性，图片等比缩放

rem/em

rem 布局原理——等比缩放

根据根元素font-size 将font-size设置成屏幕宽度clientWidth和设计稿宽度 750 的比值，按照设计稿的尺寸重构页面，使用 rem 即 自动乘以 font-size计算出 适配不同屏幕的尺寸

// 以750设计稿，计算rem font-size
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
let ft = (clientWidth / 7.5).toFixed(2);
// 设置页面根字号
document.documentElement.style.fontSize = ft + "px";

不同屏幕分辨率下元素的宽高等比例缩放

完美适应屏幕宽高比

flex

flex 简单、完整、响应式 实现各种布局

可用于 三栏 布局、垂直水平居中布局

流式布局

百分比布局

元素宽度按照屏幕分辨率适配调整，像瀑布一样往下流

灵活、充分利用空间

对大屏幕来说 体验不好

类似 抖音 视频、微博消息、朋友圈等布局

媒体查询

不同条件下使用不同样式，页面在不同终端设备下达到不同效果

允许添加表达式用以 媒体查询，选择不同样式表，自适应不同屏幕分辨率

✅ 单位

px % em 这几个单位，可以适用于大部分项目开发，且拥有较好兼容性

CSS单位
相对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位	cm、mm、in、px、pt、pc

• px 固定像素单位，一个像素表示终端屏幕能显示的最小的区域，无响应式

• % ：元素的宽高可随浏览器的变化而变化，实现响应式，一般子元素的百分比相对于直接父元素

• em 根据父元素 字体大小 设置，作为其他属性单位时，相对自身字体大小按比例计算

• rem CSS3新增，基于 html 的大小设置字体大小，作用于根元素字体大小时，相对于其初始字体大小（16px）

html {  font-size: 20px;}
/* 作用于非根元素，相对于根元素字体大小，40px */
p {  font-size: 2rem;}

vw、vh

单位 vw、vh将 viewport(视图窗口)分为 一百份

• 1vw 等于 视图单位的 1% 宽度
• 1vh 等于 视图单位的 1% 高度

设计稿视图Wie375px ，所以，1vw=3.75px

在项目的index.html 的head标签中，添加以下代码

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

• vm
• rpx

responsive pixel（动态像素）

rpx是微信小程序独有的，解决屏幕自适应

小程序内部实现的响应式——rpx

根据屏幕宽度进行自适应，无论屏幕大小，规定屏幕宽度为750rpx

rpx和px的换算

iPhone6的屏幕宽度为375px，有750个物理像素，则750rpx=375px=750个物理像素

1rpx=0.5px=1物理像素

1px=2rpx

换算

browser默认字体16px

1em=16px

12px=0.75em

10px=0.625em

🌈 动画

CSS3动画优点

1. 性能好，浏览器会对CSS3的动画优化(如专门新建图层跑动画)
2. 代码相对简单

JS直接实现

JS实现动画导致页面频繁性重排重绘，消耗性能

SVG（可伸缩矢量图形）

1. 控制动画延时
2. 控制属性的连续改变
3. 控制颜色变化
4. 控制如缩放，旋转等几何变化
5. 控制SVG内元素的移动路径

SVG是对图形的渲染，HTML是对DOM的渲染

CSS3 transition

过渡动画

不能实现独立 动画，只能在某个标签 样式/状态改变时进行平滑 动画效果过渡， 不是马上改变

注意

移动端开发 直接使用transition 会让页面变慢甚至卡顿

以我们通常 transform:translate3D(0,0,0)/transform:translateZ(0) 开启 GPU加速，让动画过程更加流畅

transition:transform 1s ease;

style="transform: translate(304px, 256px);"

动态改变transform的值，实现拖拽移动的效果

使用场景：

1. 实现激活状态的过渡效果(宽度和透明度变化)
2. 和transform结合实现动画过渡

transform(不是动画)

transform: rotate(45deg) translateX(150px);
/*先顺时针旋转45度，再向右下角平移150px*/

transform(变换、变形)是CSS3的属性

给元素做 2D和3D 变换，,rotate(旋转),scale(缩放),skew(扭曲),translate(移动)和matrix(矩阵变换)

this.img.style.transform = `translate(${this.center.x}px,${this.center.y}px) scale(${this.scale}`; //先执行scale再执行前面，从后往前执行

矩阵

transform通过矩阵完成对元素的控制

2x2的矩阵能够描述二维空间的变换

getComputedStyle 获取transform 属性， DOMMatrix 生成矩阵对象，方便获取矩阵参数

使用场景：

1. transition和position: absolute;实现绝对居中
2. 放大，旋转，倾斜，矩阵变换 效果
3. js 改变transform属性值实现动画过渡效果

transform本身 没有过渡效果，它只是对元素做大小,旋转,倾斜等各种变换, 和transition/animation 结合,可以让 变换过程具有动画 效果, 通常只有一个到达态,中间态的过渡 通过和transition/animation 结合 ,也可 通过js设置定时器 实现

translate是transform的属性值：2D变换

transition——动画展示过程，CSS3属性

CSS3 animation3

算是真正意义的CSS3动画，定义动画过渡效果

@(-webkit-)keyframes定义动画名称及 行为——>animation 相关属性定义动画的执行效果

控制 关键帧和循环次数，元素根据设定好的样式改变进行平滑过渡

比较

CSS3最大的优势是摆脱了js的控制，利用硬件加速实现复杂动画效果

CSS (opens new window) animation 属性是 animation-name (opens new window)，animation-duration (opens new window), animation-timing-function (opens new window)，animation-delay (opens new window)，animation-iteration-count (opens new window)，animation-direction (opens new window)，animation-fill-mode (opens new window) 和 animation-play-state (opens new window) 属性的简写形式

animation-name 属性指定应用的一系列动画，每个名称代表一个由@keyframes (opens new window)定义的动画序列

animation-duration属性指定一个动画周期的时长

CSS (opens new window) animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。

transition和animation区别

transition一般 定义单个或多个css属性 变化时的过渡动画，width,opacity。css属性变化时执行过渡动画，animation动画一旦定义，就在页面加载完成后自动执行

transition定义的动画触发一次执行一次,想要再次执行 再次触发

animation定义的动画可以指定播放次数或者无限循环播放

transition: 需要用户操作，执行次数固定

transition定义的动画只有两个状态，开始态和结束态

animation可以定义多个动画中间态，且可以控制多个复杂动画的有序执行

Canvas

H5新增

运行绘制图案，可用于 动画 游戏 数据可视化 图片编辑器 和实时视频处理等

操作步骤

1. 创建canvas元素
2. JS获取canvas标签
3. 在canvas获取绘制工具
4. 绘制图形

通过啥？？？？属性设置或返回如何将一个源图像绘制到目 标图像上——globalCompositeOperation

https://blog.csdn.net/Yannnnnm/article/details/109256793

只有width和height两个属性

clearRect可用于清空整个canvas画布

Canvas 绘图只有一个元素canvas，不能直接绑定事件

canvas有几种context

2d context有什么信息

开始于元素左上角，原点坐标是(0,0)

画一个五角星

canvas、svg

Canvas	SVG
JS动态生成元素	XML描述元素（类似HTML元素那样，可用多个元素来描述一个图形）
位图（受屏幕分辨率影响）	矢量图（不受屏幕分辨率影响）
不支持事件	支持事件
数据发生变化需要重绘	不需要重绘

canvas依赖分辨率，放大会失真；SVG不会失真

canvas不支持事件处理器；SVG支持

canvas适合图像密集型的游戏、频繁绘制图像；SVG绘制复杂度高时渲染速度慢

canvas文本渲染能力弱；SVG有强文本渲染能力

canvas绘制的图形可保存为多种格式；SVG只能以.svg格式保存

requestAnimationFrame

Web API——请求动画帧，告诉浏览器 希望执行一个动画，且要求浏览器**重绘前**调用指定回调更新动画

性能更好

我们将执行动画的每一步传到requestAnimationFrame，每次执行完后异步回调来连续触发动画效果

刷新频率即图像更新速度，屏幕上图像每秒出现次数(单位是HZ)，一般是60HZ，受屏幕分辨率、屏幕尺寸和显卡影响

动画本质是 让人眼看到图像刷新引起的视觉效果，这个变化要 连贯、平滑地过渡

在一帧(一般是16ms)间隔内根据选择浏览器情况执行相关动作

**raf按照系统刷新的节奏调用！！**若刷新率为60HZ，回调就16.7ms执行一次，若刷新率是75HZ，时间间隔变为1000/75=13.3ms，所以它能保证回调在屏幕的每次刷新间隔被执行一次，不会引起丢帧和卡顿

页面最小化或切换为后台标签时，不可见，触发visibilitychange并设置document.hidden为true

执行过程

1. 判断document.hidden是否为false
2. 清空上一轮动画函数
3. 方法返回的handlerId和callback进入动画帧请求回调队列
4. 遍历回调列表，根据handlerId大小依次执行

RAF既不是微任务，也不是宏任务

RAF、setTimeout

setTimeout设置间隔时间不断改变图像位置达到动画效果，可能出现卡顿、抖动现象

原因

• setTimeout时间不确定，setTimeout任务放进一步队列，只有主线程的任务执行完 才会检查该队列任务是否需执行，所以setTimeout的实际执行时间一般比其设定的时间晚
• setTimeout只能设置固定时间间隔，不一定和屏幕刷新时间相同

导致setTimeout执行步调和屏幕刷新步调不一致，引起 丢帧

**setTimeout执行只是在内存中对图像属性作修改，这个变化必须等屏幕下次刷新才会更新！**若二者步调不一致，导致某一帧的操作被跨越，直接更新下一帧

RAF最大优势——由系统决定回调执行时机，它保证回调在屏幕每一次的刷新间隔中执行一次，不引起丢帧，不会出现卡顿

var progress = 0;
//回调函数
function render() {  
  progress += 1; //修改图像的位置  
  if (progress < 100) {  //在动画没有结束前，递归渲染    
    window.requestAnimationFrame(render); 
  }
}
//第一帧渲染
window.requestAnimationFrame(render);

优势

• CPU节能

页面被隐藏时，setTimeout仍然在后台执行动画任务，但是页面处于不可见/不可用状态，刷新没有意义，浪费资源

RAF在页面未激活时 页面的屏幕刷新任务被被暂停，页面被激活时，动画从上次停留的地方继续执行

• 函数节流

高频率事件(scroll，resize)中，为防止一个刷新间隔内函数多次执行，使用RAF可保证 一个刷新间隔内，函数执行一次，保证流畅性，节省开销；多次绘制没有意义，因为显示器16.7ms才刷新一次

RAF把每一帧的所有DOM操作集中，一次回流搞定，回流的时间间隔紧跟浏览器的刷新频率

setInterval

和setTimeout问题一样，甚至更甚，执行会延迟，时间与一帧时间不一致，若添加当前setInterval事件，上一个还在任务队列未被执行，当前回调可能被丢弃

CSS、JS动画

JS动画

1. JS在主线程运行，主线程还有其他JS脚本需运行(样式计算、布局、绘制任务等)，对其干扰可能出现阻塞，造成丢帧

2. 代码复杂度高于CSS

3. JS动画控制能力强(开始、暂停、回放、终止、取消等)

4. 动画效果丰富

5. 大多没有兼容问题

CSS动画

1. 浏览器可对动画优化

硬件加速，GPU提高性能

1. 运行控制过程较弱
2. 代码冗长

🌰 文本溢出

单行溢出

• text-overflow：当文本溢出时，显示省略符号代表被修剪的文本
• white-space：处理元素中的空白
• overflow：文字长度超出限定宽度，隐藏超出的内容

overflow:hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或配合以下两个属性实现文本溢出省略

overflow 值可以是 auto、hidden 或 scroll

white-space:nowrap，设置文本不换行，是overflow:hidden和text-overflow:ellipsis生效的基础

text-overflow属性值如下：

• clip：对象内文本溢出部分裁掉
• ellipsis：对象内文本溢出时显示...

white-space

	换行符	空格和制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-spaces	保留	保留	换行	换行

多行溢出

基于高度截断

伪元素+定位

通过伪元素绝对定位到行尾并遮住文字，再通过overflow:hidden，隐藏多余文字

优点

• 兼容性好
• 响应式截断，根据不同宽度做出调整

基于行数截断

💚 超出自动换行

文字超出自动换行，white-space:normal(默认)

英文

word-break:break-all，以字母作为换行依据

word-wrap: break-word，以单词作为换行依据

渲染层合并

浏览器在渲染HTML元素时，创建多个层绘制，在每个层绘制结束后，合并成一个完整图层，最终渲染到屏幕上

🙋 重排、重绘和合成

参考文档 (opens new window)

涉及页面生成过程

回流一定触发重绘，重绘不一定触发回流。重绘开销小，回流代价高

reflow

回流/重排

元素的尺寸、结构或属性变化，re-render部分/全部文档，重新计算页面元素位置/几何结构的过程

触发回流的操作:

• 初次渲染

• 窗口大小改变(resize事件)

• 元素属性、尺寸、位置、内容改变

• 元素字体大小变化

• 添加或者删除可见 dom 元素

• 激活 CSS 伪类(如 :hover)

• 一个“即时性”和“准确性”。

常见引起重排属性和方法	--	--	--
width	height	margin	padding
display	border-width	border	position
overflow	font-size	vertical-align	min-height
clientWidth	clientHeight	clientTop	clientLeft
offsetWidth	offsetHeight	offsetTop	offsetLeft
scrollWidth	scrollHeight	scrollTop	scrollLeft
scrollIntoView()	scrollTo()	getComputedStyle()
getBoundingClientRect()	scrollIntoViewIfNeeded()

修改样式时，**避免使用上面列出的属性，他们都会刷新渲染队列。**如果要使用，最好将值缓存起来。

repaint

重绘

元素的样式如 外观/风格 改变，但不影响其在文档流中的位置/布局，浏览器会对元素重新绘制

不再执行布局阶段，直接进入绘制阶段

属性：	--	--	--
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

合成

利用transform、opacity和filter可实现合成效果，即GPU加速

避开布局 分块和绘制阶段

能直接在合成线程中完成的任务都不会改变图层的内容，如文字信息改变、布局改变、颜色改变，都不会设计，涉及到的话就牵扯到重排或重绘了

能直接在合成线程中实现的是整个图层的几何变换，透明度变换，阴影等，这些变换不会影响到图层的内容

比如滚动内容，页面内容没有变化，只是对图层做上下移动——这个操作直接在合成线程完成

优化

• 最小化重绘和重排：样式集中改变，使用添加新样式类名
• absolute或 fixed使元素脱离文档流
• GPU加速。transform opacity will-change等，改变元素位置，translate比使用绝对定位改变其left或top更高效，因为它不触发重排/重绘，**transform使浏览器为元素创建一个GPU图层，使得动画元素在一个独立的层中进行渲染，**当元素内容没有改变就没必要渲染
• visibility替换 display: none ，前者引起重绘，后者引发回流（改变了布局）
• DOM 离线修改，如：先把 DOM 设为display:none(有一次 Reflow)，然后修改再显示，只会触发一次回流
• 不把 DOM 结点属性值放循环当成变量
• 不使用 table 布局，很小的改动会造成整个 table 重新布局
• 动画速度越快，回流次数越多，可使用 requestAnimationFrame
• CSS 选择符从右往左匹配查找，避免节点层级过多
• 浏览器可快速找到ID，ID最有效，同时可能牺牲语义和可维护性
• 后代选择最糟糕
• 伪类标签选择器非常消耗性能
• 频繁运行的动画变为图层，能阻止该节点回流影响别的元素。对 video 标签，浏览器自动变为图层
• documentFragment创建DOM文档片段，批量操作DOM，完成后再添加到文档，只触发一次回流

documentFragment不是ADOM的一部分，变化不会触发DOM树的re-render，不会导致性能问题

效果不甚明显，因为现代浏览器会使用队列存储储存多次修改进行优化

📒 client、offset、scroll

client 主要与可视区有关

客户区大小指的是元素内容及其内边距所占据空间大小

offset 主要与自身有关

偏移量，可动态得到元素的位置（偏移），大小。**元素在屏幕上占用的所有可见空间。**元素高度宽度包括内边距，滚动条和边框

offsetParent是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table， td， th或body元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null

属性	描述
element.clientWidth	获取元素可视区的宽度，不包括垂直滚动条
element.offsetWidth	获取元素的宽度= boder + padding + content
element.clientHeight	获取元素可视区的高度，不包括水平滚动条
element.offsetHeight	获取元素的高度= boder + padding + content

• clientWidth 和 clientHeight 获取的值不包含边框
• offsetWidth 和 offsetHeight 获取的值包含左右边框

属性	描述
element.clientTop	**获取元素的上边框宽度，**不包括顶部外边距和内边距，以 像素 表示！！不是 em！
element.clientLeft	获取元素的左边框宽度
element.offsetTop	获取元素到有定位的父盒子的顶部距离
element.offsetLeft	获取元素到有定位的父盒子的左侧距离

属性	描述
e.clientX	鼠标距离可视区的左侧距离
e.clientY	鼠标距离可视区的顶部距离

scroll 滚动系列

动态获得元素大小，滚动距离等。具有兼容问题

• scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小
• scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置
• 垂直滚动 scrollTop > 0
• 水平滚动 scrollLeft > 0
• 将元素的 scrollLeft 和 scrollTop 设置为 0，可以重置元素的滚动位置

共同点

返回数字时，均不带单位

只读

window相关宽高属性

window.innerHeight 窗口高度

window.screen.availHeight声明显示浏览器的屏幕的可用高度，以像素计。除去我们底部任务栏外的屏幕高度

window.screen.availWidth声明显示浏览器的屏幕的可用宽度，以像素计

padding百分比

padding-top：数字/百分比(相对于relative的最近父元素计算高度)

如**果父元素有宽度，相对于父元素宽度**，否则，找其父辈元素宽度，均没宽度时，相对于屏幕的宽度

同理 margin的left 、right、bottom和top参考的都是width！！

记错了，笔试还考过！

为啥不是height

正常流的大多数元素都足够高包含其子元素，若一个元素上下外边距是父亲的height的%，会导致死循环，父亲的height增加，以适应子元素上下外边距增加，相应的，上下外边距因为父亲height增加又增加……循环……

使用场景

移动端，手持设备屏幕宽度不同，不能给满屏图片设置固定宽高，此时padding起作用了

给图片设置固定宽高比，也可以给图片外层加一个固定宽高比的盒子，实现图片 自适应

background-size

设置背景图片大小。图片可以保有其原有的尺寸、拉伸到新的尺寸，或者在保持原有比例的同时缩放到元素的可用空间的尺寸

 div{
            width: 300px;
            height: 200px;
            background: url("https://interview.yuadh.com/assets/2.jpg") no-repeat;
            border: 1px solid red;
            /*background-size: 100%;*/
            background-size: cover;
        }
/*若图片宽度250px，宽度为250px，让该图片完全铺满整个div区域，设置background-size*/

属性

100%：整个图片铺满div

cover：整个图片铺满div，缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 相反，cover 尽可能大地缩放背景图像并保持图像的宽高比例（图像不会被压扁）。背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪

contain：不能铺满整个div，缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能地缩放背景并保持图像的宽高比例（图像不会被压缩）。背景图会填充所在容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）显示由 background-color 设置的背景颜色

auto：不能铺满整个div，以背景图片比例缩放背景图片