HTML&CSS:

  • 浏览器内核
  • 盒模型、flex 布局、两/三栏布局、水平/垂直居中;
  • BFC、清除浮动;
  • css3 的选择器;css 的继承
  • css3 动画、H5 新特性。

浏览器内核

主流浏览器有五大款,分别是 IE、Firefox、Google Chrome、Safari、Opera。
最常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。

  • IE/Eadge 浏览器:Trident 内核
  • chrome 浏览器:Webkit/Blink 内核
  • FirefoxL 浏览器:Gecko 内核
  • Safari 浏览器:Webkit 内核
  • Opera 浏览器: Presto 内核

盒模型

CSS盒模型本质上一个盒子,封装周围的 HTML 元素,它包括:边距,边框,填充,和实际内容,可以简单表述为 盒模型由 content,padding,margin,border 几部分组成。
盒模型=标准盒模型+IE 盒模型
标准盒模型:标准盒模型下盒子的大小  =** width(content)** + border + padding + margin;
IE 盒模型:  IE 盒模型下盒子的大小=width(content + border + padding) + margin;
CSS 如何设置标准模型和 IE 模型:

如果 doctype 协议缺失,会由浏览器自己界定,在 IE 浏览器中 IE9 以下(IE6.IE7.IE8)的版本触发怪异模式,其他浏览器中会默认为 W3c 标准模式。

box-sizing: content-box;  标准盒模型
box-sizing: border-box;  IE 盒模型

BFC:

块级格式化上下文

BFC 布局规则是?

  1. 内部的 Box 会在垂直方向,一个接一个地放置。
  2. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  3. BFC 的区域不会与 float box 重叠。
  4. BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  5. 计算 BFC 的高度时,浮动元素也参与计算

只要元素满足下面任一条件即可触发 BFC 特性:

  • body 根元素
  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 常见作用

阻止外边距 margin 折叠塌陷

1、阻止外边距折叠 margin 塌陷问题:在标准文档流中,块级标签之间竖直方向的 margin 会以大的为准,这就是 margin 的塌陷现象。可以用 overflow:hidden 产生 bfc 来解决。

阻止元素被浮动元素覆盖和高度坍塌

  1. 阻止浮动元素造成的父级元素高度坍塌问题和遮挡其他元素问题 高度塌陷问题,这时就可以用 BFC 来清除浮动了。

** ****点击查看 BFC 块级上下文演示案例**

清除浮动

利用 clear:both; 清除浮动

.content {
  clear: both;
}

利用伪类:after 清除浮动

/*万能清除浮动代码*/
.clearfix:after {
  content: ""; /*添加一个看不见的元素*/
  visibility: hidden;
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}
.clearfix {
  zoom: 1; /*兼容 ie*/
}

利用 overflow:hidden;

.content {
  overflow: hidden;
}

flex 布局

Flexible Box 模型,通常被称为 flexbox,是一种弹性布局。

css 两栏布局、三栏布局

两栏布局,已知左侧宽度,右边自适应

1> 双 inline-block  左右盒子均设置为 display:inline-block; 左盒子设置固定宽高,右盒子使用 calc(100% - width 左);

2>使用浮动双 float  左盒子浮动,右盒子浮动,右盒子宽度设置用 calc(100% - width 左)可以无缝衔接不会有被覆盖的内容。

3>使用定位双定位 在左右盒子外侧设置一个大盒子,不必设置大盒子的宽高,直接设置 position:relative;左盒子设置 position:absolute;固定宽高,右盒子设置 position:absolute;left:width 左;width:calc(100% - width 左)可实现无缝衔接。

4>使用定位单定位   左盒子设置绝对定位,设置右盒子 margin-left:width(左),右盒子不必设置宽度。

5>使用 flex 布局   外侧盒子 display:flex;align-items:flex-start/center;左盒子设置宽高即可,右盒子 flex:1 1 auto;右盒子设置为放大缩小均为 1,占据空间是剩下的空间。

6>.使用 grid 网格   外层盒子设置 display:grid;grid-template-rows:100px;grid-template-columns:100px auto;设置了一行两列的网格,且右边网格的大小自适应。

7>BFC 外侧盒子设置为 overflow:auto,内部左盒子设置 float:left;对左侧进行浮动,继续设置左侧盒子的大小,右盒子设置 overflow:auto;对左盒子触发 BFC,右盒子触发 BFC,左盒子设置右外边距,右盒子设置左外边距(不设置也可),右盒子不需要设置 width;

三栏布局,已知左右侧宽度,中间自适应

1.使用定位 三个盒子外侧设置大盒子,大盒子使用相对定位,下面一层三个盒子均采用绝对定位,左盒子固定宽高,右盒子固定宽高并设置right: 0px;使右盒子靠右,中间盒子设置width: calc(100% - width左-width右相加);即可。

2.使用浮动  左盒子设置左浮动,右盒子设置右浮动,中间盒子设置margin:auto;display: inline-block;width: calc(100% - width左 - width 右);无缝衔接margin:auto;在这里不管左右盒子是否一样大都可。

3>使用 grid 网格  设置外层盒子为display:grid;grid-template-rows:100px;grid-template-columns:100px auto 100px;即可。grid 网格好厉害!!!

4>使用 flex  设置外层盒子为display:flex;align-items:center中间盒子设置flex:1 1 auto左右盒子在盒子内部设置内容有大小即可。

圣杯布局

需求:

  • 1.两边固定,中间自适应;
  • 2.先加载 middle 内容;
  • 3.三列等高布局;
<div id="content">
  <div id="middle">
    <p>middle</p>
    <p>middle</p>
    <p>middle</p>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>

<style>
  #content {
    overflow: hidden;
    width: 500px; //设置总宽度
    padding: 0 150px 0 100px; //为左右2侧留出空间
  }
  #left,
  #right {
    height: 200px;
    background-color: pink;
  }
  #middle {
    background-color: green;
    width: 100%;
  }
  #middle,
  #left,
  #right {
    float: left;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
  }

  #left {
    margin-left: -100%;
    position: relative;
    width: 100px; /* 偏移的距离和宽度 */
  }
  #right {
    margin-right: -100%;
    position: relative;
    right: 150px; /*偏移的距离和宽度*/
    width: 150px;
  }
</style>

还有一件事就是他们在单独部分内容扩充的时候,童鞋们可能发现了 底部会参差不齐。

给 left、middle、right 设置上 padding-bottom: 9999px; margin-bottom: -9999px;

点击查看圣杯布局演示案例

双飞翼布局

需求:

  • 1.两边固定,中间自适应;
  • 2.先加载 middle 内容;
  • 3.三列等高布局;
<div class="container">
  <div class="middle">
    <div class="inner">
      <h4>middle</h4>
    </div>
  </div>
  <div class="left">
    <h4>left</h4>
  </div>
  <div class="right">
    <h4>right</h4>
  </div>
</div>

<style>
  /*float流*/
  .container {
    overflow: hidden;
    width: 500px;
  }

  .left,
  .middle,
  .right {
    float: left;
    min-height: 130px;
    padding-bottom: 9999px; /*解决底部参差不齐的问题**/
    margin-bottom: -9999px;
  }
  .middle {
    width: 100%;
    height: 100%;
    background-color: blue;
  }

  .left {
    background-color: red;
    margin-left: -100%; /*右侧设置宽度和距离*/
    width: 100px;
  }
  .right {
    background-color: green;
    margin-left: -220px; /*右侧设置宽度和距离*/
    width: 220px;
  }
  .inner {
    margin: 0 220px 0 200px; /*用middle 内部的元素通过 margin 留出空间**/
    min-height: 130px;
    background: blue;
  }
</style>
<div class="container">
  <div class="main">middle</div>
  <div class="sub">
    <h4>left</h4>
  </div>
  <div class="extra">
    <h4>right</h4>
  </div>
</div>

<style>
  /*双飞翼 flex布局*/
  .container {
    height: 200px;
  }
  .sub {
    background: red;
  }
  .main {
    background: blue;
  }
  .extra {
    background: yellow;
  }
  .container {
    display: flex;
  }
  .main {
    flex-grow: 1; /*自动占满剩余空间*/
  }
  .sub {
    flex: 0 0 150px; /*指定宽度,方压缩*/
    order: -1; /*越小越靠前*/
  }
  .extra {
    flex: 0 0 200px; /*指定宽度,方压缩*/
    order: 1; /*越大越靠后*/
  }

  /*
	flex=>flex-grow:是否占满剩余空间,flex-shrink:是否压缩,flex-basis: 基准宽度
	*/
</style>

双飞翼布局 float 流演示案例
双飞翼布局 flex 流演示案例

总结:

  • 相同点:

圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部 float 浮动,但左右两栏加上负 margin 让其跟中间栏 div 并排,以形成三栏布局。

  • 不同点:
  1. 双飞翼布局给主面板添加了一个父标签用来通过 margin 给子面板腾出空间。
  2. 圣杯采用的是 padding,而双飞翼采用的 margin,解决了圣杯布局的问题。
  3. 双飞翼布局不用设置相对布局,以及对应的 left 和 right 值。

水平/垂直居中

1.绝对定位+margin:auto

.box {
  position: relative;
}

div {
  width: 200px;
  height: 200px;
  background: green;

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

2.绝对定位+负 margin

.box {
  position: relative;
}

div {
  width: 200px;
  height: 200px;
  background: green;

  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

3.绝对定位+transform

.box {
  position: relative;
}
div {
  width: 200px;
  height: 200px;
  background: green;

  position: absolute;
  left: 50%; /* 定位父级的50% */
  top: 50%;
  transform: translate(-50%, -50%); /*自己的50% */
}

4.flex 布局

.box {
  height: 600px;

  display: flex;
  justify-content: center; //子元素水平居中
  align-items: center; //子元素垂直居中
  /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box > div {
  background: green;
  width: 200px;
  height: 200px;
}

5.table-cell 实现居中

<div
  class="outter"
  > <div
  class="inner"
  > <div
  class="foo"
  > 999
  </div
  > <div
  > </div
  > .outter {
  /**定义最外层盒子的 table(非必须),使用百分比时使用*/
  display: table;
}

.inner {
  display: table-cell; /*控制子元素垂直居中*/
  text-align: center;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background: red;
}

.foo {
  display: inline-block; /*必须为行内元素*/
  width: 50px;
  height: 50px;
  background: green;
}

css 的选择器

  • 标签选择器,类选择器,id 选择器,后代选择器,

  • 属性选择器:属性选择器的标志性符号是  [],匹配含义:^:开头 $:结尾 *:包含。E[title="abc"]选中页面的 E 元素,并且 E 需要带有 title 属性,且属性值完全等于 abc。

  • 结构伪类选择器:
    | 选择符号 | 含义 | 相同点 |
    | --- | --- | --- |
    | E:first-child  | 匹配父元素的第一个子元素 E | 带有 child,以 E 元素的父元素为参考 |
    | E:last-child | 匹配父元素的最后一个子元素 E | |
    | E:nth-child(n) | 匹配父元素的第 n 个子元素 E | |
    | E:nth-child(odd)  | 匹配奇数 | |
    | E:nth-child(even) | 匹配偶数 | |
    | E:nth-last-child(n) | 匹配父元素的倒数第 n 个子元素 E | |
    | | | |
    | E:first-of-type | 匹配同类型中的第一个同级兄弟元素 E。 | 带有 type,我们可以这样理解:先在同级里找到所有的 E 类型,然后根据 n 进行匹配。 |
    | E:last-of-type | 匹配同类型中的最后一个同级兄弟元素 E。 | |
    | E:nth-of-type(n) | 匹配同类型中的第 n 个同级兄弟元素 E。 | |
    | E:nth-last-of-type(n) | 匹配同类型中的倒数第 n 个同级兄弟元素 E。 | |

  • 伪元素选择器:

    • E::before 设置在 元素 E 前面(依据对象树的逻辑结构)的内容,配合 content 属性一起使用。
    • E::after 设置在 元素 E 后面(依据对象树的逻辑结构)的内容,配合 content 属性一起使用。

点击查看详细:https://www.cnblogs.com/qianguyihao/p/8426799.html

position 的值

描述
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
relative生成相对定位的元素,相对于其正常位置进行定位。
sticky粘性吸顶布局

css 的继承性的属性:

类型继承属性
字体系列属性font:组合字体;

font-family:字体系列
font-family:字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格 |
| 文本系列属性 | text-indent:文本缩进
text-align:文本水平对齐
text-shadow:设置文本阴影
line-height:行高
word-spacing:字间隔
letter-spacing:字符间距
direction:规定文本的书写方向
color:文本颜色 |
| 元素可见性 | visibility |
| 列表属性 | list-style-type |
| 光标属性 | cursor |

css 动画

可以参考https://juejin.im/post/6844903845470945294

image.png

animation: move 2s linear 3 alternate both;

| animation-name( keyframe 动画名称*)* | animation-duration(动画持续时间) | _animation-timing-function _
指定动画计时函数,即动画的速度曲线 | animation-delay (运动延迟)单位 s | animation-iteration-count (动画播放的次数,默认 1) | animation-direction(动画播放的方向。) | animation-fill-mode 指定动画填充模式。 | **animation-play-state(**指定动画播放状态,正在运行或暂停。) |
| --- | --- | --- | --- | --- | --- | --- | --- |
|   | | ease(默认值) | 0(默认延迟 0s) | 1(动画播放默认的次数为 1) | normal  (默认值) | none(默认值,回到动画没开始时的状态。) | running 通过 running 将暂停的动画重新播放(默认值) |
| | | linear 匀速动画 | | number (设置播放的次数)
`

| reverse | forwards:动画完成后,元素状态保持为最后一帧的状态。 | paused 通过paused将正在播放的动画停下了 | | | | ease-in | |infinite (无限播放)| alternate | backwards:表示,有动画延迟时,动画开始前,元素状态保持为第一帧的状态。 | | | | | ease-out | | | alternate | both: 表示上述二者效果都有 | | | | | ease-in-out | | | alternate-reverse | | | | | |cubic-bezier(n,n,n,n)`  的特例。它们被称为贝塞尔曲线   (https://cubic-bezier.com/) | | | | | |

css 动画和 js 动画的区别:

CSS3 动画的优点和缺点

优点:

  1. CSS3 动画在性能上会稍微好一些,浏览器会对 CSS3 的动画做一些优化(比如专门新建一个图层用来跑动画)
  2. 代码相对简单

缺点:

  1. 在动画控制上不够灵活
  2. 兼容性不好
  3. 部分动画功能无法实现(如滚动动画,视差滚动等)

JS 动画的优缺点

优点:
JavaScript 动画正好弥补了这两个缺点。

  1. 控制能力强,可以单帧的控制和变换
  2. 写的好,写的好的话,完全可以兼容 IE6

缺点:
1.JS 运算预渲染性能不如 CSS3 动画,因为 CSS 动画的 transform 矩阵,是 C++级的,必然要比 JavaScript 级的计算要快

  1. 还有就是对库比较依赖
  2. 编码较为繁琐

综上所述

  • 对于一些需要复杂控制的动画,使用 JavaScript 比较靠谱
  • 如果是一些小的,简单的动画,就使用 CSS3 动画

H5 新特性

新特性

1.语意特性,添加<header><header/><nav><nav>等标签 2.多媒体, 用于媒介回放的 video 和 audio 元素 3.图像效果,用于绘画的 canvas 元素,svg 元素等 4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies 等 5.设备兼容特性 ,HTML5 提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连, 6.连接特性,更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5 拥有更有效的服务器推送技术,Server-Sent Event 和 WebSockets 就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能 7.性能与集成特性,HTML5 会通过 XMLHttpRequest2 等技术,帮助您的 Web 应用和网站在多样化的环境中更快速的工作

新增标签

1.多媒体:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track> 2.新表单元素:<datalist> ,<output> , <keygen> 3.新文档节段和纲要:<header>页面头部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部

Input 有哪些新增类型?

  • color,选择颜色
  • date 选择日期
  • email 用于检测输入的是否为 email 格式的地址
  • month 选择月份
  • number 用于应该包含数值的输入域,可以设定对输入值的限定
  • range 用于定义一个滑动条,表示范围
  • search 用于搜索,比如站点搜索或 Google 搜索
  • tel 输入电话号码
    -time 选择时间
  • url 输入网址
  • week 选择周和年

session(sessionId),token(令牌),cookie,sessionStorage,localStorage

  • 共同点:sessionStorage、localStorage 和 cookie 都由浏览器存储在本地的数据,session 存储在服务端。
  • sessionStorage:页面关闭,缓存消失,最大 5M.
  • localStorage:除非手动删除,否则永远存在本地,最大 5M.
  • cookie:存储在客户端,最大 4kb。
    • Cookie 主要是由服务器生成,且前端也可以设置,保存在客户端本地的一个文件,通过 response 响应头的 set-Cookie 字段进行设置,且 Cookie 的内容自动在请求的时候被传递给服务器。如下:

image.png

  • session:
    • session 存储于服务器,可以理解为一个状态列表,拥有一个唯一识别符号 sessionId,通常存放于 cookie 中。每次认证用户发起请求时,服务器需要去创建一个记录来存储信息。当越来越多的用户发请求时,内存的开销也会不断增加。服务器收到 cookie 后解析出 sessionId,再去 session 列表中查找,才能找到相应 session。依赖 cookie
    • cookie 只是实现 session 的其中一种方案。虽然是最常用的,但并不是唯一的方法。禁用 cookie 后还有其他方法存储,比如放在 url 中
    • 现在大多都是 Session + Cookie,但是只用 session 不用 cookie,或是只用 cookie,不用 session 在理论上都可以保持会话状态。可是实际中因为多种原因,一般不会单独使用
    • 如果只用 cookie 不用 session,那么账户信息全部保存在客户端,一旦被劫持,全部信息都会泄露。并且客户端数据量变大,网络传输的数据量也会变大
  • token
    • token 也称作令牌,由 uid+time+sign[+固定参数]
    • token 的认证方式类似于临时的证书签名, 并且是一种服务端无状态的认证方式, 非常适合于 REST API   的场景. 所谓无状态就是服务端并不会保存身份认证相关的数据。
    • token 在客户端一般存放于 localStorage,cookie,或 sessionStorage 中。在服务器一般存于数据库中
    • 一般 token 放入 header 中

分布式情况下的 session 和 token

session 是有状态的,一般存于服务器内存或硬盘中,当服务器采用分布式或集群时,session 就会面对负载均衡问题。

  • 负载均衡多服务器的情况,不好确认当前用户是否登录,因为多服务器不共享 session。这个问题也可以将 session 存在一个服务器中来解决,但是就不能完全达到负载均衡的效果。当今的几种解决 session 负载均衡的方法。

而 token 是无状态的,token 字符串里就保存了所有的用户信息

  • 客户端登陆传递信息给服务端,服务端收到后把用户信息加密(token)传给客户端,客户端将 token 存放于 localStroage 等容器中。客户端每次访问都传递 token,服务端解密 token,就知道这个用户是谁了。通过 cpu 加解密,服务端就不需要存储 session 占用存储空间,就很好的解决负载均衡多服务器的问题了。这个方法叫做JWT(Json Web Token)

总结:

  • session 存储于服务器,可以理解为一个状态列表,拥有一个唯一识别符号 sessionId,通常存放于 cookie 中。服务器收到 cookie 后解析出 sessionId,再去 session 列表中查找,才能找到相应 session。依赖 cookie
  • cookie 类似一个令牌,装有 sessionId,存储在客户端,浏览器通常会自动添加。
  • token 也类似一个令牌,无状态,用户信息都被加密到 token 中,一般 token 放到请求头 header 中,服务器收到 token 后解密就可知道是哪个用户。需要开发者手动添加。
  • jwt 只是一个跨域认证的方案

参考文章:

https://www.jianshu.com/p/c435f52fb95f
https://juejin.im/post/6844903817104850952
https://juejin.im/post/6844904000756809736
https://www.jianshu.com/p/34044e3c9317

Q.E.D.