1. display: none和visiblity:hidden

  • display:none隐藏的内容，在文档布局中不分配空间，它各边的元素会合拢，相当于不存在

  • visibility:hidden隐藏对应的内容，但是在文档中仍然保留原来的空间

    2. link 和 import 区别

    link是写在html标签，import是css里面支持的
    link引入的css文件会被立即加载，import会在页面加载完之后加载
    如果样式相同，import里面的样式会被link引入的覆盖

    3. css伪类和伪元素

    伪类： 操作元素中已经存在的元素 ：
    伪元素：需要添加元素才能实现的 ：：

    4. 选择器和权重

  • 相邻兄弟 A + B

  • 普通兄弟 A ~ B
  • 子选择器 A > B
  • 后代选择器 A B | 行内 | 1 0 0 0 | | —- | —- | | id | 0 1 0 0 | | class :hover :nth-child 属性选择器[type=’attr’] | 0 0 1 0 | | 标签 ::after ::before | 0 0 0 1 |

5. position和float

  • position和float都会脱离文档流
  • position会覆盖文档流中的其他元素（position里面的内容会被覆盖掉）

  • float仍会占据位置（浮动元素不会覆盖其他元素）

    1.        **     float    **                                                                                  ** position**<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/2614767/1604156963730-55b87e54-de86-4cb1-b689-c1cd5de56ea5.png#height=185&id=w43wd&margin=%5Bobject%20Object%5D&name=image.png&originHeight=185&originWidth=360&originalType=binary&ratio=1&size=3994&status=done&style=none&width=360)![image.png](https://cdn.nlark.com/yuque/0/2020/png/2614767/1604156987600-71c06dd5-1077-4981-a72d-6b38877ae41f.png#height=209&id=bNsDg&margin=%5Bobject%20Object%5D&name=image.png&originHeight=209&originWidth=305&originalType=binary&ratio=1&size=2328&status=done&style=none&width=305)

    6. box-sizing: content-box / border-box

  • content-box: 只包含content的宽高

  • border-box: 符合ie的合资模型，包含content + padding + border

    7. position的absolute/relative相对定位

  • absolute:相对于最近的一级父元素不是static的定位

  • relative相对于自身的定位

    8. nth-child 和nth-of-type

  • nth-child: 指父元素下的第n个元素，且这个元素为ele，就符合，否则选择失败

  • nth-of-type: 父元素下第n个ele元素

    9. flex

    flex：弹性盒子布局，分为container和item。 container分为主轴和侧轴，默认主轴是x方向，侧轴是-y方向。
    那container包含的属性一半就是改变轴的一些属性

    container父元素常用属性

  • flex-direction: 设置主轴方向

  • justify-content:设置主轴上的排列方式

image.png

  • flex-wrap：设置子元素是否换行
  • align-items: 设置侧轴上子元素的排列方式(单行)
  • align-content:设置侧轴上子元素的排列方式（多行）

  • flex-flow: 复合属性，相当于flex-direction和flex-wrap

    item常用属性

  • flex: 复合属性 默认值： 1 1 0%

    • flex-grow: 剩余空间是否放大
    • flex-shrink：空间不足是否缩小
    • flex-basis：设置项目宽度，权重比width高.
      • auto: 如果父flex有设置width/height，就用父的，如果没有就自动应用content
      • content：由内容撑开
  • order: 控制排列顺序

    10. grid布局

    display:grid
    缺点：兼容性不好，chrome需要57以上，IE需要加上-ms-,而且只兼容10以及以上版本

    容器属性

    grid-template-column:repeat(3, 1fr)/ 1fr 2fr 3fr设置多少列
    grid-template-row:同理，设置多少行
    justify-items：水平方向
    align-items: 垂直方向

    item属性

    grid-column-start/grid-column-end:列从第几根网格线开始，第几根网格线结束
    grid-row-start/grid-row-end:同上
    align-self:只针对自己
    justify-self:只针对自己水平方向

11. BFC

BFC：块级格式化上下文，符合条件的都属于BFC，然后BFC有一些自己的规则
条件：

  • float不为none
  • position不为relative、static
  • display为inline-block、flex等
  • overflow不为visible

规则：

  • 内部的box会在垂直方向排列
  • 垂直方向的距离由margin决定，两个盒子的margin会重叠
  • BFC的区域不会和float的区域重叠
  • BFC会计算浮动元素的高度

用途

  • 清除浮动，解决父元素高度坍塌问题

只要把父元素设置成BFC，就能清楚浮动
原理： BFC会计算浮动元素的高度

  • 解决外边距重叠问题

创建一个BFC就能解决外边距重叠问题
原理： 同一个BFC内的box外边距会重叠，那我们就设置两个不同的BFC，就不会重叠了

12. 那些性能开启了性能加速

硬件加速是指把浏览器渲染交给GPU渲染，减少对CPU的负担。
GPU加速原理：

13. 居中

垂直居中

line-height：设置跟父元素相等（产生行距），缺点不适合多行文字
flex: IE9以上兼容
grid: display:grid
align-items:center
justify-content:center
position: 定位和transform结合使用
vertical-align结合伪元素

  1. div.child {
  2.     display:inline-block;
  3.     vertical-align: middle;
  4. }
  5. div.parent::after{
  6.     content:"",
  7.     height: 100%;
  8.     width:0;
  9.     display: inline-block;
  10.     vertical-align: middel;
  11. }

水平居中

text-align: 行内元素
margin: 0 auto;(必须要有宽度)
浮动元素设置居中样式：position:relative进行偏移

14. 三列布局

圣杯布局

  1.         <div class="header">Header</div>
  2.         <div class="main-content">
  3.             <div class="main">Main</div>
  4.             <div class="left">Left</div>
  5.             <div class="right">right</div>
  6.         </div>
  7.         <div class="footer">Footer</div>
  1.             html,body{
  2.                 margin: 0;
  3.                 height: 100%;
  4.             }
  6.             .header{
  7.                 height: 100px;
  8.                 background-color: red;
  9.             }
  10.             .footer{
  11.                 height: 100px;
  12.                 background-color: red;
  13.             }
  15.             .main-content{
  16.                 height: 500px;
  17.                 padding: 0 150px 0 50px;
  18.                 overflow: hidden;
  19.             }
  21.             .main,.left,.right{
  22.                 float: left;
  23.                 margin-bottom: -99999px;
  24.                 padding-bottom: 99999px;
  25.             }
  27.             .main{
  28.                 width: 100%;
  29.                 background-color: gold;
  30.             }
  32.             .left{
  33.                 width:50px;
  34.                 margin-left:  -100%;
  35.                 position: relative;
  36.                 left: -50px;
  37.                 background-color: gray;
  38.             }
  40.             .right{
  41.                 width: 150px;
  42.                 margin-right: -150px;
  43.                 background-color: hotpink;
  44.             }

双飞翼布局

  1.     <div class="header">Header</div>
  2.     <div class="main-content">
  3.        <div class="main-container">
  4.            <div class="main">Main</div>
  5.         </div>
  6.         <div class="left">Left</div>
  7.         <div class="right">right</div>
  8.     </div>
  9.     <div class="footer">Footer</div>
  1.         .header {
  2.             height: 100px;
  3.             background-color: red;
  4.         }
  6.         .footer {
  7.             height: 100px;
  8.             background-color: red;
  9.         }
  11.         .main-content {
  12.             height: 500px;
  13.             overflow: hidden;
  14.             .main-container{
  15.                 width: 100%;
  16.                 float: left;
  17.                 .main {
  18.                     width: 100%;
  19.                     background-color: gold;
  20.                     margin: 0 150px 0 50px;
  21.                 }
  22.             }
  24.             .left {
  25.                 float: left;
  26.                 width: 50px;
  27.                 margin-left: -100%;
  28.                 background-color: gray;
  29.             }
  31.             .right {
  32.                 float: left;
  33.                 width: 150px;
  34.                 margin-left: -150px;
  35.                 background-color: hotpink;
  36.             }
  37.         }

flex布局

  1.     <div class="header">Header</div>
  2.     <div class="main-content">
  3.         <div class="main">Main</div>
  4.         <div class="left">Left</div>
  5.         <div class="right">right</div>
  6.     </div>
  7.     <div class="footer">Footer</div>
  1.         .header {
  2.             height: 100px;
  3.             background-color: red;
  4.         }
  6.         .footer {
  7.             height: 100px;
  8.             background-color: red;
  9.         }
  11.         .main-content {
  12.             height: 500px;
  13.             overflow: hidden;
  14.             display: flex;
  15.             flex-direction: column;
  16.             .left {
  17.                 order: -1;
  18.                 flex: 50px
  19.             }
  20.             .right {
  21.                 flex: 150px
  22.             }
  23.         }

position布局

  1.     <div class="header">Header</div>
  2.     <div class="main-content">
  3.         <div class="main">Main</div>
  4.         <div class="left">Left</div>
  5.         <div class="right">right</div>
  6.     </div>
  7.     <div class="footer">Footer</div>
  1.         .header {
  2.             height: 100px;
  3.             background-color: red;
  4.         }
  6.         .footer {
  7.             height: 100px;
  8.             background-color: red;
  9.         }
  11.         .main-content {
  12.             height: 500px;
  13.             overflow: hidden;
  14.             position: relative;
  15.             .main {
  16.                 position: absolute;
  17.                 left: 50px;
  18.                 right: 150px;
  19.             }
  21.             .left {
  22.                 position: absolute;
  23.                 left: 0px;
  24.                 width: 50px;
  25.                 background-color: hotpink;
  26.             }
  28.             .right {
  29.                 position: absolute;
  30.                 right: 0;
  31.                 width: 150px;
  32.                 background-color: indigo;
  33.             }
  34.         }

float布局

  1.     <div class="header">Header</div>
  2.     <div class="main-content">
  3.         <div class="main">Main</div>
  4.         <div class="left">Left</div>
  5.         <div class="right">right</div>
  6.     </div>
  7.     <div class="footer">Footer</div>
  1.   .header {
  2.             height: 100px;
  3.             background-color: red;
  4.         }
  6.         .footer {
  7.             height: 100px;
  8.             background-color: red;
  9.         }
  11.         .main-content {
  12.             height: 500px;
  13.             overflow: hidden;
  14.             .main {
  15.                             margin: 0 150px 0 50px;
  16.             }
  18.             .left {
  19.                 float: left;
  20.                 width: 50px;
  21.                 background-color: hotpink;
  22.             }
  24.             .right {
  25.                 float: right;
  26.                 width: 150px;
  27.                 background-color: indigo;
  28.             }
  29.         }

Grid布局

  1.     <div class="header">Header</div>
  2.     <div class="main-content">
  3.         <div class="left">Main</div>
  4.         <div class="main">Left</div>
  5.         <div class="right">right</div>
  6.     </div>
  7.     <div class="footer">Footer</div>
  1.         .header {
  2.             height: 100px;
  3.             background-color: red;
  4.         }
  6.         .footer {
  7.             height: 100px;
  8.             background-color: red;
  9.         }
  11.         .main-content {
  12.             height: 500px;
  13.             display: grid;
  14.             justify-content: center;
  15.             align-items: center;
  16.             grid-template-columns: 50px auto 150px;
  17.             .main {
  18.                 background-color: red;
  19.             }
  21.             .left {
  22.                 background-color: hotpink;
  23.             }
  25.             .right {
  26.                 background-color: indigo;
  27.             }
  29.         }

15. scss

@extend %placeholder: 不会编写相同的css代码块，抽离出来
@mixin @include: 会编译出相同的css代码块，使得css更加臃肿
@function

mixin支持传参可以选择，mixin支持{}动态传classname