前端面经总结（三）

接前端面经总结（二）

CSS

盒模型

用来装页面上的元素的矩形区域。包括IE盒子模型和标准W3C盒子模型

盒模型包含4层，content/padding/border/margin

区别

• IE盒子模型

- width = ```content_width``` + ```padding-left``` + ```padding-right``` +  ```border-left``` + ```border-right```;

- height = ```content_height``` + ```padding-top``` + ```padding-bottom``` + ```border-top``` + ```border-bottom```;

• 标准W3C盒子模型

  • width = content-width;

  • height = content-height;

box-sizing

CSS3中引入box-sizing属性，有两种取值：border-box/content-box

• border-box: 即IE盒子模型

• content-box: 即标准W3C盒子模型

link/import标签的区别

link和import标签都在加载CSS时使用

1. link标签属于HTML，@import标签为CSS提供

2. link标签在页面加载时同时被加载，@import引用的CSS在页面加载结束后才被加载

3. link没有兼容性，import在IE5以上才被识别

4. link标签权重大于import

transition/animation区别

transition和animation均随时间改变元素的属性值。

1. transtition需要触发一个事件改变属性，animation不需要

2. transition为2帧，from/to，animation可以一帧一帧改变

flex布局

flex为弹性布局，用来为盒子模型提供最大的灵活性

任何容器都可以指定为flex布局，但指定为flex布局以后，子元素的float/clear/vertical-align属性失效

采用flex布局的元素为flex容器，其所有自动成为容器成员，即flex项目。容器默认存在两根轴main axis和cross axis。项目默认沿主轴排列。

容器属性

1. flex-direction：决定主轴方向，即项目排列方向

   • row(默认)：主轴水平，起点在左边，项目从左至右排列

   • row-reverse：主轴水平，起点在右边，项目从右至左排列

   • column：主轴垂直，起点在上沿，项目从上而下排列

   • column-reverse：主轴垂直，起点在下沿，项目从下而上排列

2. flex-wrap：默认时项目排在一条线上，使用flex-wrap属性定义一条轴线排不下时如何换行

   • nowrap(默认)：不换行

   • wrap：换行，第一行在上，第二行在下…

   • wrap-reverse：换行，第一行在下，第二行在第一行上面，…

3. flex-flow：为flex-direction和flex-wrap的简写方式，如flex-flow: row wrap;

4. justify-content：定义项目在主轴（水平）上的对齐方式

   • flex-start(默认)：左对齐

   • flex-end：右对齐

   • center：居中

   • space-between：两端对齐，项目之间的间隔都相等

   • space-around：每个项目两侧的间隔相等

5. align-items：定义项目在交叉轴（垂直）上的对齐方式

   • stretch(默认)：若项目未设置高度或设为auto，则占满整个容器高度

   • flex-start：项目在交叉轴起点对齐

   • flex-end：项目在交叉轴终点对齐

   • center：项目在交叉轴中点对齐

   • baseline：项目在项目的第一行文字基线对齐

6. align-content：定义多根轴线的对齐方式，若项目只有一根轴线，该属性无用

   • stretch(默认)：轴线占满整个交叉轴

   • flex-start：轴线与交叉轴起点对齐

   • flex-end：轴线与交叉轴终点对齐

   • center：轴线与交叉轴中点对齐

   • space-between：轴线与交叉轴两端对齐，轴线之间间隔相等

   • space-around：轴线两侧间隔相等

项目属性

1. order：定义项目的排列顺序，数值越小，排列越靠前，默认为0

2. flex-grow：定义项目的放大比例，默认为0，即若存在剩余空间也不放大。若所有项目的flex-grow: 1;，则所有项目等分剩余空间。

3. flex-shrink：定义项目的缩小比例，默认为1，即若空间不足，则该项目将缩小。若所有项目的flex-shrink: 1;，则空间不足时，所有项目等比例缩小。若一个项目的flex-shrink: 0;，其他的为1，则为0的项目不缩小。负值无效。

4. flex-basis：定义在分配多余空间前，项目占据的主轴空间。浏览器通过此属性计算主轴是否有多余空间。默认为auto，即项目本来大小。flex-basis可以设为跟width和height一样的值，则项目占据固定空间。

5. flex：为flex-grow/flex-shrink/flex-basis的简写，默认为flex: 0 1 auto。其中flex-shrink/flex-basis可选

   • auto：即flex: 1 1 auto;

   • none：即flex: 0 0 auto;

6. align-self: 允许单个项目与其他项目有不同的对齐方式，覆盖该项目的align-items属性，默认为auto，即继承父元素的align-item属性，若没有父元素，则等同于stretch。

可选值为：align-self: auto | flex-start | flex-end | center | baseline | stretch;

grid布局

grid布局将网页划分成一个个网格，可以任意组合不同网格作出不同的布局。

采用网格布局的区域为容器，容器内部采用网格定位的子元素为项目，项目只代表容器的顶层子元素，不包括项目的子元素。容器里水平区域为行row，垂直区域为列column

grid布局与flex区别

flex布局为轴线布局，指定项目针对轴线的位置，即一维布局。

grid布局将容器分为行和列，产生单元格，指定项目所在的单元格，即二维布局。

容器属性

1. display：指定网页的布局

   • grid：采用网格布局，默认容器元素都是块级元素

   • inline-grid：指定元素为行内元素，元素内部采用网格布局

设置为网格布局后，float/display: inline-block;/display: table-cell;/vertical-align/column-*等设置失效

2. grid-template-columns/grid-template-rows：定义每一列列宽/每一行行高。几行几列就设置几个数值，如grid-template-columns: 100px 100px 100px;。

   • repeat()：如grid-template-rows: repeat(3, 33.33%);第一个参数为重复次数，即行数，第二个参数为重复的值，即行高。也可写为重复某模式grid-template-columns: repeat(2, 100px 20px 80px);

   • auto-fill：使用auto-fill自动填充尽可能多的单元格，如grid-template-columns: repeat(auto-fill, 100px);

   • fr：即片段，若宽度为1fr和2fr，则2fr是1fr的两倍。grid-template-columns: 1fr 1fr;

   • auto：由浏览器自己决定长度。grid-template-columns: 100px auto 100px;，即第二列宽度等于该列单元格的最大宽度

   • …

3. row-gap/column-gap/gap：行间距/列间距/行列间距的简写，如grid-gap: 20px 20px;

4. grid-template-areas：定义区域，如

grid-template-areas: "header header header"
                    "main main sidebar"
                    "footer footer footer";

若某些区域不需要使用，则使用.表示，如

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

5. grid-auto-flow：设置子元素的放置顺序

   • row(默认)：先行后列

   • column：先列后行

   • row dense：当某些项目指定位置后，其他项目先行后列，尽可能不出现空格

   • column dense：当某些项目指定位置后，其他项目先列后行，尽可能不出现空格

6. justify-item/align-items/place-items：设置单元格内容的水平位置/垂直位置/水平垂直位置简写，如place-items: start end;

   • start：对齐单元格的起始边缘

   • end：对齐单元格的结束边缘

   • center：单元格内部居中

   • stretch：拉伸，占满单元格的整个宽度

7. justify-content/align-content/place-content：设置单元格内容在容器里的水平位置/垂直位置/水平垂直位置的简写

   • start：对齐容器的起始边缘

   • end：对齐容器的结束边缘

   • center：容器内部居中

   • stretch：项目大小没有指定时，拉伸占据整个网格容器

   • space-around：每个项目两侧间隔相等

   • space-between：项目间间隔相等，项目与容器边框间没有间隔

   • space-evenly：项目间间隔、项目与容器边框之间间隔都相等

8. grid-template/grid

   • grid-template = grid-template-columns + grid-template-rows + grid-template-areas

   • grid = grid-template-rows + grid-template-columns + grid-template-areas + grid-auto-rows + grid-auto-columns + grid-auto-flow

9. …

项目属性

1. justify-self/align-self/place-self：设置单个单元格内容的水平位置/垂直位置/水平垂直位置简写。其用法与justify-items/align-items/place-items一致。

2. …

position

用来指定一个元素在网页上的位置

• static(默认)：浏览器按照源码的顺序决定每个元素的位置（正常页面流）。每个块级元素占据自己的区块，元素之间不产生重叠。此时top/bottom/left/right属性无效

• relative：相对于默认位置进行偏移，即定位基点为元素的默认位置，必须搭配top/bottom/left/right属性指定偏移的方向与距离

• absolute：相对于上级元素进行偏移，即定位基点为父元素，且定位基点不能是static定位，否则基点会变成网页的根元素html。必须搭配top/bottom/left/right使用。absolute定位的元素会被正常页面流忽略，即在正常页面流中，元素所占空间为0，周边元素不受影响。

• fixed：相对于视口（浏览器窗口）进行偏移，即定位基点为浏览器窗口，此时元素的位置不随页面滚动而变化，搭配top/bottom/left/right使用时，表示元素初始位置基于视口计算，否则初始位置为元素的默认位置。

• sticky：此属性产生动态效果，类似于relative和fixed的结合。必须搭配top/bottom/left/right使用。当页面滚动，父元素开始脱离视口（部分不可见）时，只要与sticky元素达到生效门槛（即设置的top/…等值），则relative定位自动切换为fixed定位。等父元素完全脱离视口（完全不可见）时，fixed定位自动切换回relative定位

BFC

FC（Formatting Context）是W3C CSS2.1规范中的概念，是页面中一块渲染区域，并有一套渲染规则，它决定了其子元素如何定位以及和其他元素的关系和相互作用。BFC即块级格式化上下文，属于FC的普通流，即元素按照其在HTML中的先后位置自上而下布局。行内元素水平排列，占满后换行，块级元素被渲染为完整的新行。

具有BFC特性的元素可看作隔离的独立容器，容器内元素的任何布局都不会影响外面的元素。

触发BFC

元素只要满足以下任意一个条件即可触发BFC

1. body根元素

2. 浮动元素：float设置除none以外的值

3. 绝对定位元素：position设置absolute/fixed

4. 属性display设置inline-block/table-cell/flex

5. 属性overflow设置除visible以外的值，如hidden/auto/scroll

BFC特性

1. 同一个BFC下外边距margin会折叠，即设置margin为100px，但两个盒子之间的间距为100px，而非200px。故若需要避免外边距margin折叠，可以将元素放入不同的BFC容器中。

   • 外边距折叠：多个相邻普通流的快元素垂直方向margin会折叠。

     • 两外边距为正数：折叠结果取较大的值

     • 两外边距为负数：折叠结果取绝对值较大的值

     • 两外边距一正一负：折叠结果取两者之和

2. BFC可以清除浮动。

浮动的元素会脱离普通文档流，为元素设置触发BFC的条件，使容器包裹浮动元素。

//设置前
<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

//设置后
<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

为元素添加overflow: hidden触发其BFC特性，清除浮动。

• 清除浮动其他的方法

  • 在浮动元素添加一个块级元素并设置属性clear: both;即可清除浮动。

  • 给浮动元素父级元素添加伪类after或双伪类before/after清除浮动

3. BFC阻止元素被浮动元素覆盖

//设置前
<div style="height: 100px;width: 100px;float: left;background: lightblue">左浮动元素</div>
<div style="height: 200px;background: #eee">没有浮动, 没有触发 BFC 元素</div>

//设置后
<div style="height: 100px;width: 100px;float: left;background: lightblue">左浮动元素</div>
<div style="height: 200px;background: #eee;overflow: hidden">没有浮动, 触发了 BFC 元素</div>

设置后第二个元素出发了BFC特性，其内容不会被浮动元素覆盖，使用此方法可以实现两列自适应布局。左边宽度固定，右边内容自适应宽度。

居中

垂直居中

1. 利用flex

.box {
  display: flex;
  align-items: center;
}

2. 使用display: table-cell和vertical-align对容器内文字垂直居中

.box {
  display: table-cell;
  vertical-align: middle;
}

3. 使用position: absolute和margin: auto实现垂直居中

.box {
  position: absolute;//此时父元素position为relative
  margin: auto;
  top: 0;
  bottom: 0;
}

此方法将元素相对父元素处于绝对定位，设置top和bottom为相等的值，再设置margin: auto即可实现垂直居中

4. 使用position: absolute和负外边距margin实现垂直居中

.box {
  height: 100px;
  width: 100px;
  position: absolute;//此时父元素position为relative
  top: 50%;
  margin-top: -50px;
}

此方法必须要知道被居中块级元素的尺寸

水平居中

1. 已知宽度，且为block元素，添加margin: 0 auto;

2. 已知宽度，position: absolute，设置top/bottom/left/right为0，且margin：auto

3. 使用flex容器，设置justify-content: center;

4. 行内元素：text-align: center;

水平垂直居中

1. 已知高宽

//父元素
position: relative;
//子元素
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

2. 未知高宽

   • 定位属性

     //父元素
     position: relative;
     //子元素
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);

   • flex

     display: flex;
     justify-content: center;
     align-items: center;

块级元素和行内元素

1. 块级元素独占一行，行内元素不会独占一行

2. 块级元素自动填满父元素，且可以设置margin/padding/width/height，行内元素的width和height失效，且垂直方向的margin和padding失效。

设置元素消失

1. display: none; 隐藏对应元素，在文档布局中不再分配空间，各边元素合拢

2. visibility: hidden; 隐藏对应元素，在文档布局中仍保留原空间，只是不可见

3. z-index = -1;

4. opacity: 0; 元素被隐藏，不会改变页面布局，若元素绑定了事件，则事件仍然可以触发

CSS3新特性

1. transition：当元素变换样式时添加效果

   • transition-duration：规定完成过渡效果需要的时间

   • transition-delay：规定过渡何时开始

   • transition-property：规定应用过渡的CSS属性的名称

2. transform：用来向元素应用各种2D和3D转换，如缩放、旋转、移动等

3. animation：制作动画

4. 增加边框属性：

   • border-radius：创建圆角边框

   • box-shadow：为元素添加阴影

   • border-image：使用图片绘制边框

5. word-wrap：强制文本换行

6. text-shadow：向文本应用阴影

7. box-sizing：设置盒模型，有content-box/border-box/inherit

CSS选择器及优先级

优先级：

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 默认属性

选择器解析顺序：从右向左

calc函数

CSS3的calc()函数允许我们在属性值中执行数学操作。

.foo {
  width: calc(100px + 50px);
}

display

display 属性规定元素应该生成的框的类型。

• none:此元素不会被显示。
• block:此元素将显示为块级元素，此元素前后会带有换行符。
• inline:默认。此元素会被显示为内联元素，元素前后没有换行符。
• inline-block:行内块元素。（CSS2.1 新增的值）
• …

  层叠上下文

层叠上下文是HTML中一个三维概念，即每个元素的位置都是三维的，若元素含有层叠上下文，即它在z轴上有层叠关系

1. 层叠等级

   • 在同一层叠上下文中，层叠等级描述在此上下文中的元素在Z轴上的上下顺序

   • 在普通元素中，层叠等级描述普通元素在Z轴上的上下顺序

   • 普通元素的层叠等级优先由所在层叠上下文决定

   • 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级没有意义。

2. 层叠顺序

层叠上下文的背景和边框background/border => z-index < 0 => block块级水平盒子 => float浮动盒子 => inline/inlink-block水平盒子 => z-index：auto/0 => z-index > 0

3. 层叠上下文的产生

层叠上下文满足以下任意一个条件即可形成：

• 文档根元素html
• 属性position值为absolute/relative且z-index不为auto
• 属性position值为fixed/sticky
• 属于fiex容器的子元素，且z-index不为auto
• 属于grid容器的子元素，且z-index不为auto
• 属性opacity值不是1的元素
• 属性transform不为none的元素
• 属性mix-blend-mode值不是normal
• 属性isolation值不是isolate
• 属性filter值不是none
• 属性will-change指定的属性值为上面任意一个
• 元素-webkit-overflow-scrolling属性值设置为touch

设置元素的背景颜色会填充哪些区域

css盒子模型中的background-color能控制的盒子模型内的content、padding和border中的颜色。

重绘重排，如何减少，如何让文档脱离文档流

1. 回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流

2. 当页面布局和几何属性改变时就需要回流
   比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

减少重绘重排：

1. 使用cssText合并所有的改变一次型处理或切换类名

// javascript
var el = document.querySelector('.el');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
//cssText
var el = document.querySelector('.el');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';
//切换类名
// css 
.active {
    padding: 5px;
    border-left: 1px;
    border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';

2. 批量修改DOM：使元素脱离文档流，对其进行多重改变，再将元素带回文档流

   • 隐藏元素，修改后再显示

     let ul = document.querySelector('#mylist');
     ul.style.display = 'none';
     appendNode(ul, data);
     ul.style.display = 'block';

   • 使用文档片段Fragment创建子树，再copy到文档中

     let fragment = document.createDocumentFragment();
     appendNode(fragment, data);
     ul.appendChild(fragment);

   • 将原始元素copy到独立节点中，操作后在覆盖原始元素

     let old = document.querySelector('#mylist');
     let clone = old.cloneNode(true);
     appendNode(clone, data);
     old.parentNode.replaceChild(clone, old);

   • 使用float脱离文档流，设置float: left/right/...;

   • 使用绝对定位absolute脱离文档流，此时父类position必须为非static

   • 使用position: fixed完全脱离文档流，相对于浏览器窗口定位

overflow原理

CSS布局

1. 两栏布局，左侧固定，右侧自适应

<div class="left"></div>
<div class="right"></div>

• 左侧元素浮动，右侧设置margin

.left{
    width: 300px;
    height: 300px;
    float: left;
}
.right{
    height:300px;
    width: 100%;//宽度为100%
    margin-left: 310px;//盒子被覆盖区域变成margin
}

• flex

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
</div>

给两栏布局添加父元素，并设置flex布局，左侧盒子宽度固定，右侧盒子占据所有空间

.father{
    display: flex;
}
.left{
    width: 300px;
}
.right{
    flex: 1;
}

• 定位+margin

给左侧盒子绝对定位，即不占页面空间，再设置右侧盒子margin-left为左侧盒子宽度

.left{
    width: 300px;
    position: absolute;
}
.right{
    margin-left: 300px;
}

2. 三栏布局，两边固定，中间自适应（圣杯布局/双飞翼布局）

• 圣杯布局

  • header/footer各自占领屏幕所有宽度，高度固定

  • 中间container是三栏布局

  • 三栏布局两侧宽度固定，中间自适应布局且高度为三栏中最高区域的高度

    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>

    使用flex实现：

  • container设置弹性布局flex

  • left/right定宽，main设置flex: 1;填满剩余区域

    .container{
        display: flex;
    }
    .left
    .right{
        width: 100px;
    }
    .main{
        flex: 1;
    }

• 双飞翼布局

  • left/main/right都设置左浮动

  • main宽度100%

  • 设置left负边距为100%，right负边距为自身宽度，margin负边距使文档流发生偏移，改变元素大小。当为浮动元素之间设置负边距magin-left，则被设置的内容会在原有border-left基础上左移。

  • 设置container的margin为左右两栏流出空间，大小为left/right宽度

    <div class="container">
        <div class="main">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
    .container{
        overflow: hidden;//消除浮动
    }
    .left
    .right
    .main{
        float: left;
    }
    .main{
        width: 100%;
    }
    .left{
        width: 300px;
        margin-left: -100%;
    }
    .right{
        width: 200px;
        margin-left: -200px;
    }
    .center{
        margin: 0 200px 0 300px;
    }

CSS预处理器

img中alt和title区别

• alt：当图片不能正常显示时出现的文本提示

• title：鼠标移动到元素上的文本提示

px,em,rem,vh,vw,vmin,vmax的区别

• px：像素，绝对单位
• em：相对单位，基准点为父节点字体大小
• rem：相对单位，相对于根节点html字体大小来计算
• vh：viewpoint height，视窗高度，1vh等于视窗高度的1%
• vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%
• vmin：vw和vh中较小的值
• vmax：vw和vh中较大的值