前端zoongjie

前端

HTML

BFC

• 定义：

  • Block formatting context ，直译为"块级格式化上下文"。
  • 是一个独立的渲染区域，只有Block-level box参与
  • 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

• 特性

  • BFC内的容器在垂直方向依次排列

    • 类似正常情况下块元素在垂直方向上依次排列，较易理解。
      

  • 属于同一个BFC的两个相邻容器的上下margin会重叠（相邻两容器上下外边距会发生重叠）

    • 渲染前

    • 渲染后

  • 计算BFC高度时浮动元素也参于计算（overflow: hidden;能解决父元素高度塌陷）

    • 渲染前

    • 渲染后

  • BFC的区域不会与浮动容器发生重叠（在布局上实现自适应两栏（三栏））

    • 渲染前

    • 渲染后

  • 元素的margin-left与其包含块的border-left相接触

    • 

  • BFC是独立容器，容器内部元素不会影响容器外部元素

• 解决问题

  • 解决两个相邻元素的上下margin重叠问题
  • 解决高度塌陷问题
  • 实现多栏布局（两栏、三栏、圣杯、双飞翼等）

• 触发条件

  • 根元素（）
  • float值非none
  • overflow值非visible
  • display值为inline-block、table-cell、table-caption、flex、inline-flex
  • position值为absolute、fixed

• Box：CSS布局的基本单位

  • 一个页面是由很多个 Box 组成
  • 元素的类型和 display 属性，决定了这个 Box 的类型
  • 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器）

• Formatting Context

  • 它是页面中的一块渲染区域
  • 它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
  • 最常见的 有 BFC 和IFC

IFC

• 定义：

  • inline Formatting Contexts直接翻译为“内联格式化上下文”
  • IFC的高度由其包含行内元素中最高的实际高度计算而来的（不受竖直方向上的padding/margin影响）
  • 内部的元素从包含块的顶部开始，从左到右（默认）排列成一行形成一个矩形盒子叫做line box

• 布局规则

  • line box的宽度由浮动情况和他包含的块决定的
  • line box 的高度由line-height的计算结果决定
  • 在一行上的所有元素会在该区域形成一个框
  • 行宽的高度为包含框的高度，高度为行框中最高元素的高度
  • 浮动的元素不会在行框内，并且浮动的元素会压缩行框的宽度
  • 行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框
  • 行框的元素遵循text-align和vertical-align

块级元素与行内元素

• 块级元素

  • 每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

  • 常见元素

    • <h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等

  • 特点

    • 独占一行
    • 高度，行高，外边距和内边距都可以单独设置
    • 宽度默认是容器的100%
    • 可以容纳内联元素和其他的块级元素

• 行内元素

  • 不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

  • 常见元素

    • <a>,<strong>,<b>,<em>,<del>,<span>等

  • 特点

    • 和相邻的行内元素在一行上
    • 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
    • 默认的宽度就是它本身的宽度
    • 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

• 相互转换

  • 块转行内：display-inline；
  • 行内转块：display：block；
  • 块，行内元素转换为行内块：display：inline-block

html5新增内容

• 新增标签

  • Audio
  • Video
  • Canvas
  • <summary>
  • <source>

• 提供两种在客户端存储数据的新方法

  • localStorage -没有时间限制的数据存储
  • sessionStorage -针对一个session的数据存储

• 新的Input类型

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

• 新的表单元素

  • datalist
  • keygen
  • output

• 新的form属性

  • autocomplete
  • novalidate

• 新的input属性

  • autocomplete
  • autofocus(input类型元素)
  • form
  • form overrides (formaction, formenctype, formmethod,formnovalidate, formtarget)
  • height和width
  • list
  • min, max和step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

CSS

media

• all-- 用于所有设备类型
• aural-- 用于语音和音乐合成器
• braille-- 用于触觉反馈设备
• embossed-- 用于凸点字符（盲文）印刷设备
• handheld-- 用于小型或手提设备
• print-- 用于打印机
• projection-- 用于投影图像，如幻灯片
• screen-- 用于计算机显示器
• tty-- 用于使用固定间距字符格的设备。如电传打字机和终端
• tv-- 用于电视类设备

animation

• 动画属性

  • animation-name

    • 规定需要绑定到选择器的 keyframe 名称。

  • animation-duration

    • 规定完成动画所花费的时间，以秒或毫秒计。

  • animation-timing-function

    • 规定动画的速度曲线。

  • animation-delay

    • 规定在动画开始之前的延迟。

  • animation-iteration-count

    • 规定动画应该播放的次数。

  • animation-direction

    • 规定是否应该轮流反向播放动画。

• 实例

  • 

  • 

transform

• 定义

  • transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

• 功能

  • none

    • 定义不进行转换

  • matrix(n,n,n,n,n,n)

    • 定义 2D 转换，使用六个值的矩阵。

  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

    • 定义 3D 转换，使用 16 个值的 4x4 矩阵。

  • translate(x,y)

    • 定义 2D 转换

  • translate3d(x,y,z)

    • 定义 3D 转换

  • translateX(x)

    • 定义转换，只是用 X 轴的值。

  • translateY(y)

    • 定义转换，只是用 Y 轴的值。

  • translateZ(z)

    • 定义 3D 转换，只是用 Z 轴的值。

  • scale(x[,y]?)

    • 定义 2D 缩放转换。

  • scale3d(x,y,z)

    • 定义 3D 缩放转换。

  • scaleX(x)

    • 通过设置 X 轴的值来定义缩放转换。

  • scaleY(y)

    • 通过设置 Y 轴的值来定义缩放转换。

  • rotate(angle)

    • 定义 2D 旋转，在参数中规定角度。

  • rotate3d(x,y,z,angle)

    • 定义 3D 旋转。

  • rotateX(angle)

    • 定义沿着 X 轴的 3D 旋转。

  • rotateY(angle)

    • 定义沿着 Y 轴的 3D 旋转。

  • rotateZ(angle)

    • 定义沿着 Z 轴的 3D 旋转

  • skew(x-angle,y-angle)

    • 定义沿着 X 和 Y 轴的 2D 倾斜转换。

  • skewX(angle)

    • 定义沿着 X 轴的 2D 倾斜转换。

  • skewY(angle)

    • 定义沿着 Y 轴的 2D 倾斜转换。

  • perspective(n)

    • 为 3D 转换元素定义透视视图。

盒子模型

• 不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

• 标准盒模型和IE盒模型

  • 标准盒子模型：width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

  • IE盒子模型：width 和 height 指的是内容区域+border+padding的宽度和高度。

实现垂直居中

• 组合使用display：table-cell和vertical-align、text-align

  • 注意事项：table-cell容易被float,position:absolute这些css属性破坏可以考虑为之增加一个父div定义float等属性。） ；设置了table-cell的元素对宽度和高度敏感（在父元素上设置table-row等属性，也会使其不感知height。），对margin值无反应，响应padding属性

<style>
   .father{width:400px; height:200px; border:1px solid #000;display:table-cell; text-align:center;vertical-align:middle;}
    .son{width:200px; height:100px; background:red;display:inline-block;}
</style>

<div class="father">
    <div class="son">
       display:table-cell;</br>text-align:center;</br> vertical-align:middle
    </div>
</div>

• 

• display：flex-box

  • 注意：这个方法只能在现代浏览器上有效，IE10+、chrome、Safari、Firefox。1.设置container的display的类型为flex，激活为flexbox模式。
    2.justify-content定义水平方向的元素位置。3.lign-items定义垂直方向的元素位置

 <style>
       .father{width:400px; height:200px; border:1px solid #000;display:flex; align-items:center;justify-content:center;}
        .son{width:200px; height:100px; background:red;}
    </style>
    <div class="father">
        <div class="son">
            display:flex;</br>align-items:center;</br> justify-content:center;
        </div>
    </div>

• display:inline-block +伪元素生成content内容

  • 利用inline-block的vertical-align: middle去对齐before伪元素，before伪元素的高度与父对象一样，就实现了高度方向的对齐。居中块的尺寸可以做包裹性、自适应内容，兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白（代码换行符遗留问题。）。（宽度是已知的，高度可以是未知的）

```c

```html
<style>
   .father{width:400px; height:200px; border:1px solid #000;text-align:center;}
   .father:before{content:".";display:inline-block; vertical-align:middle; height:100%;}
    .son{width:200px; height:100px; background:red;display:inline-block; vertical-align:middle;}
</style>
</head>
<body>

<div class="father">
    <div class="son">
        display:inline-block;</br>伪元素生成content内容</br>
    </div>
</div>

-![在这里插入图片描述](https://img-blog.csdnimg.cn/20210701091640544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F2d3Zx,size_16,color_FFFFFF,t_70#pic_center)

• 绝对定位+transform反向偏移。position:absolute; transform:translate(-50%,-50%);

  • 由于top、left偏移了父对象的50%宽度高度，所以需要利用transform反向偏移居中块的50%宽高

 <style>
   .father{width:400px; height:200px; border:1px solid #000;position:relative;}

    .son{width:200px; height:100px; background:red;position:absolute; left:50%; top:50%;transform:translate(-50%,-50%);}
</style>

<div class="father">
    <div class="son">
        position:absolute;</br>left:50%;top:50%;</br>transform
    </div>
</div>

• 绝对定位+margin：auto（position:absolute; left:0; top:0; right:0; bottom:0; margin:auto）都要写

<style>
    .father{width:400px; height:200px; position:relative; border:1px solid #000;}
    .son{width:200px; height:100px; background:red; position:absolute; left:0; top:0; bottom:0; right:0; margin:auto;}
</style>

- <div class="father">
    <div class="son">
        position:absolute;</br> left:0; top:0;</br> right:0; bottom:0; </br>margin:auto
    </div>
    </div>

绝对定位+margin反向偏移

position：absolute; top:50%; left:50%; margin-left:-(width+padding)/2+‘px’; margin-top:-(height+padding)/2+‘px’;

- 注意：margin值的设置不能使用百分比哦，因为margin是基于父元素的宽度来计算百分比的；由于top、left偏移了父对象的50%宽度高度，所以需要利用margin反向偏移居中块的50%宽高

<style>
    .father{width:400px; height:200px; position:relative; border:1px solid #000;}
    .son{width:200px; height:100px; background:red; position:absolute; left:50%; top:50%;  margin-left:-100px; margin-top:-50px;}
</style>

- <div class="father">
    <div class="son">
        position:absolute;</br>  left:50%; top:50%;</br>margin-left/top
    </div>
</div>

flex

• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

• 行内元素也可以使用 Flex 布局。display: inline-flex;

• 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

• 容器的属性

  • flex-direction

    • 决定主轴的方向（即项目的排列方向）。

    • flex-direction: row | row-reverse | column | column-reverse;

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

  • flex-wrap

    • 如果一条轴线排不下，如何换行。

    • flex-wrap: nowrap | wrap | wrap-reverse;

      • nowrap（默认）：不换行。
      • wrap：换行，第一行在上方。
      • wrap-reverse：换行，第一行在下方。

  • flex-flow

    • 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
    • flex-flow: <flex-direction> || <flex-wrap>;

  • justify-content

    • 定义了项目在主轴上的对齐方式。

    • justify-content: flex-start | flex-end | center | space-between | space-around;

      • flex-start（默认值）：左对齐
      • flex-end：右对齐
      • center： 居中
      • space-between：两端对齐，项目之间的间隔都相等。
      • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  • align-items

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

    • align-items: flex-start | flex-end | center | baseline | stretch;

      • flex-start：交叉轴的起点对齐。
      • flex-end：交叉轴的终点对齐。
      • center：交叉轴的中点对齐。
      • baseline: 项目的第一行文字的基线对齐。
      • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  • align-content

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

    • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

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

• 项目的属性

  • order

    • 定义项目的排列顺序。数值越小，排列越靠前，默认为0
    • order: ;

  • flex-grow

    • 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

    • flex-grow: <number>; /* default 0 */

      • 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

  • flex-shrink

    • 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

    • flex-shrink: <number>; /* default 1 */

      • 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效

  • flex-basis

    • 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    • flex-basis: <length> | auto; /* default auto */
    • 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

  • flex

    • 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    • flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
    • 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

  • align-self

    • 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    • align-self: auto | flex-start | flex-end | center | baseline | stretch;

position

• absolute

  • 描述：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

• relative

  • 描述：生成相对定位的元素，相对于其在文档流正常位置进行定位

• fixed

  • 描述：生成绝对定位的元素，相对于浏览器窗口进行定位。

• static

  • 描述：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

• inherit

  • 描述：规定应该从父元素继承 position 属性的值。

响应式布局

• 直接在CSS文件中使用

@media 类型 and (条件1) and (条件二){
    css样式
    }
    @media screen and (max-width:1024px) {
    body{
        background-color: red;
    }
    }

• 使用@import导入

  • @import url("css/moxie.css") all and (max-width:980px);

• 直接使用link连接

  • <link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”></div>

计算机网络

tcp，udp

http1/1.1/2/3

get，post

https

强缓存与协商缓存

三次握手，四次挥手

常见状态码

浏览器相关

输入url到页面渲染完成过程

• dns解析
• tcp三次握手
• 浏览器解析渲染页面流程

cookie

localstorage

sessionstorage

框架

Vue

• 响应式原理
• 虚拟dom，diff算法
• 插槽
• css scoped
• vue-router
• vuex

React

JS&ES6

let,const,var

promise

iterator

模块化

作用域

原型链

event loop

dom操作

arguments

原生ajax

变量提升，函数声明

数据类型

冒泡，捕获

常见手写

• bind、apply、bind
• promise
• new
• instanceof
• jsonp
• 节流，防抖
• ajax