H5C3

1、水平垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        height: 100vh;
      }
      .content {
        width: 400px;
        height: 400px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content"></div>
    </div>
  </body>
</html>

方法一：利用定位（常用方法,推荐）

.container {
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
}

方法二：利用 margin:auto;

.container {
  position: relative;
}
.content {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

方法三：利用 display:table-cell（图片居中的方式）

.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.content {
  display: inline-block;
}

方法四：利用 display：flex;

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法五：利用 transform

.container {
  position: relative;
}
.content {
  position: absolut;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2、flex 布局

flex-direction：属性设置容器主轴的方向
flex-wrap：属性用于设置当项目在容器中一行无法显示的时候如何处理。
flew-flow：flex-flow 属性是 flex-deriction 和 flex-wrap 属性的简写，默认值为[row nowrap];,
justify-content：属性用于设置项目在容器中的对齐方式。
align-items：定义了项目在交叉轴上是如何对齐显示的
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex 属性

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写, 默认值是0 1 auto。
flex-grow是如果有剩余空间，是否扩大，0为不扩大
flex-shrink是如果剩余空间不够，是否缩小，1为缩小
flex-basis为项目本身的大小，默认值是`auto
flex-grow 计算方法
每个元素扩大的比例为：应给扩大的总 value * 扩大比例占比（与 flex-basis 无关）

value = (container.width - box1.width - box2.width) / (box1.flex - grow + box2.flex - grow)

box1.width = box1.width + value * box1.flex - grow

box2.width = box2.width + value * box2.flex - grow

flex-shrink 计算方法

每个元素缩小的比例为：宽度溢出去的宽度 （每个 box 的 width flex-shrink 所占的比例）（与 flex-basis 有关）

value = box1.width * box1.flex - shrink + box2.width * box2.flex - shrink

box1.width = box1.width - box1.width * box1.flex - (shrink / value) * 宽度溢出去的宽度

box2.width = box2.width - box2.width * box2.flex - (shrink / value) * 宽度溢出去的宽度

flex: 1, 对应的是1 1 0%, 相当于可扩大，可缩小，flex-basis为0%
flex: auto, 对应的是1 1 auto, 相当于可扩大，可缩小，flex-basis为auto
flex: 0, 对应的是0 1 0%, 相当于不可扩大，可缩小，flex-basis为0%
flex: none, 对应的是0 0 auto, 相当于不可扩大，不可缩小，flex-basis为auto

flex-basis 和 width 哪个优先级更高

在 flex 布局中，flex-basis 和 width 是用来设置项目宽度的属性，两者的优先级取决于 flex-grow 和 flex-shrink 的值。当 flex-grow 和 flex-shrink 的值都为 0 时， flex-basis 和 width 具有相同的优先级，会根据声明顺序后者覆盖前者。但当 flex-grow 和 flex-shrink 的值不同时， flex-basis 会优先于 width 生效。因为 flex-basis 是指定项目在 flex 容器中的初始尺寸，而 width 只是普通的宽度属性。

3、省略号

单行

.single-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行

.multi-row {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

4. BFC

概念：

Box:Box 是 CSS 布局的对象和基本单位，一个页面是由很多个 Box 组成的，这个 Box 就是我们常说的盒模型
Block Formatting Cotext:块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位以及和其他元素的关系和相互作用

块级格式化上下文(Block Formatting Cotext，BFC)是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并不会影响其他环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响

创建 BFC 的条件

根元素：Body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position（absolute、fixed）；
display 值为：inline-block、table-cell、table-caption、flex 等
overflow 值为：hidden、auto、scroll

BFC 的特点：

垂直方向，自上而下排列，和文档流的排列方式一直
在 BFC 中上下相邻的两个容器的 margin 会重叠
计算 BFC 的高度时，需要计算浮动元素的高度
BFC 区域不会与浮动的容器发生重叠
BFC 是独立的容器，容器内部元素不会影响外部元素
每个元素的左 margin 值和容器的左 border 相接触

BFC 的作用

解决margin的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
解决高度塌陷的问题：在对子元素设置浮动之后，父元素会发生高度塌陷，也就是父元素的高度为 0，解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置overflow：hidden。
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

.left {
  width: 100px;
  height: 200px;
  background: red;
  float: left;
}
.right{
    height:300px;
    background:blue;
    overflow:hidden;
}

<div class="left"></div>
<div class="right"></div>
/* 左侧设置float：left，右侧设置overflow：hidden。这样右边就触发BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现自适应两栏布局 */

解决外边距塌陷问题 ：两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也有上外边距的时候。两个上外边距会合成一个上外边距，以值相对较大的上外边距值为准。
解决方法
1. 给父元素设置外边框（border）或者内边距（padding）(不建议) ----影响结构
2. 触发 BFC（推荐）
- 子元素或者父元素的float不为none
- 子元素或者父元素的position不为relative或static
- 父元素的overflow为auto或scroll或hidden
- 父元素的display的值为table-cell或inline-block

5. 盒模型

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分

盒子模型分为两种:

W3C 标准的盒子模型（标准盒模型） box-sizing:content-box

width 指的是内容区域 content 的宽度，height 指的是内容区域 content 的高度，
标准盒模型下盒子的大小 = content + border + padding + margin

IE 标准的盒子模型（怪异盒模型） box-sizing:border-box

width 指的是内容、边框、内边距总的宽度（content + border +padding）,height 指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width（content + border + padding） + margin

6、元素隐藏

	display: none	visibility: hidden	opacity: 0;
DOM 结构	不占据空间	占据空间	占据空间
事件监听	不行	不行	可以
性能	重排重排,性能较差	引起重绘,性能较高	不会触发重绘,性能较高
继承	不	会，子可以取消隐藏	会，子元素并不能通过 opacity:1 来取消隐藏
transition（动画）	无	会立即显示,隐藏时会延时	可以

7、双飞翼(圣杯)布局

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

1、利用定位实现两侧固定中间自适应

1.1)父盒子设置左右 padding 值

1.2)给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

1.3)中间盒子自适应具体

.father {
  position: relative;
  padding: 0 200px;
}
.left,
.right {
  width: 200px;
  position: absolute;
  top: 0;
}
.left {
  left: 0;
}
.right {
  right: 0;
}

2、利用 flex 布局实现两侧固定中间自适应

2.1)父盒子设置 display:flex;

2.2)左右盒子设置固定宽高

2.3)中间盒子设置 flex:1 ;

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

.center {
  flex: 1;
}

3、利用 bfc 块级格式化上下文, 实现两侧固定中间自适应

3.1)左右固定宽高，进行浮动

3.2)中间 overflow: hidden;

<style > .left {
  float: left;
  width: 200px;
}
.right {
  float: right;
  width: 200px;
}
.center {
  overflow: hidden;
}
</style><!--注意: left 和 right 必须放在 center 前面 --> <div class= "father" > <div class= "left" ></div> <div class=
  "right" ></div> <div class= "center" ></div> </div>;

8、重排和重绘

当 Web 页面进行渲染时，浏览器需要根据 HTML、CSS、JavaScript 等资源计算出最终的渲染结果，并呈现在用户的屏幕上。其中，渲染过程可以分为三个阶段：布局（Layout）、绘制（Paint）、合成（Composite）。其中，布局阶段也被称为重排（Reflow），绘制阶段也被称为重绘（Repaint）。

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
回流：当渲染树中的元素的*布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值
回流必将引起重绘，而重绘不一定会引起回流

常见的优化手段包括：

使用 CSS3 动画和过渡效果代替 JavaScript 动画，因为前者可以利用硬件加速，而后者会涉及到多次的重排和重绘。
合理使用 CSS 布局和盒模型，避免使用过于复杂的布局方式，例如使用表格布局、浮动布局等。
减少 DOM 操作和样式操作的次数，可以使用 DocumentFragment、CSS Sprites 等技术进行优化。
尽可能使用 CSS3 的 transform 和 opacity 属性，因为它们可以触发 GPU 加速，提高页面的性能。
使用 requestAnimationFrame 代替 setTimeout 或 setInterval，可以有效减少页面的重绘次数，提高动画的性能和流畅度。

需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
尽量避免用table布局（table元素一旦触发回流就会导致 table 里所有的其它元素回流）
避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

需要注意的是，页面的性能优化需要根据具体的场景和需求来进行选择和应用，不能一刀切，否则可能会带来反效果。

9、position 属性

static：元素使用正常的文档流布局。此时 top, bottom, left, right 和 z-index 属性无效。
relative：元素相对于其正常位置进行定位。通过 top, bottom, left, right 属性可以设置元素的偏移量。偏移量的计算基于元素原本在文档流中的位置。例如，top: 10px 表示元素的顶部边框相对于元素在文档流中的顶部位置向下偏移 10 像素。
absolute：元素相对于其最近的已定位祖先元素进行定位。如果不存在已定位祖先元素，则元素相对于文档的 body 元素进行定位。偏移量的计算基于最近的已定位祖先元素的位置。例如，left: 10px 表示元素的左边框相对于最近的已定位祖先元素的左边界向右偏移 10 像素。
fixed：元素相对于视口进行定位。与 absolute 类似，但偏移量的计算不基于任何祖先元素的位置，而是基于视口的位置。即使滚动视口，元素也始终位于相同的位置。
sticky：它就会表现出一种混合的定位方式，它的行为就像是 relative 和 fixed 的合体，当元素在屏幕内时，它的行为就像 relative 定位一样，而当元素滚动到屏幕外时，它的行为就像 fixed 定位一样。

除此之外，position 属性还有一个初始值 static，表示元素使用正常的文档流布局。

10、CSS display 有哪些值

常见的 display 值包括：

block：将元素显示为块级元素，即单独一行，可以设置宽度和高度。
inline：将元素显示为内联元素，即和其他内容在同一行，不可以设置宽度和高度。
inline-block：将元素显示为内联块级元素，即和其他内容在同一行，可以设置宽度和高度。
none：元素不会在页面上显示。

其他常见的 display 值包括：

table：将元素显示为表格，可以通过 table-row、table-cell 等属性进一步定义表格结构。
flex：将元素显示为弹性盒子，可以通过 flex-direction、justify-content 等属性进行灵活的布局。
grid：将元素显示为网格布局，可以通过 grid-template-rows、grid-template-columns 等属性定义网格结构。

除了常见的 display 值之外，还可以使用 none、inline、inline-block 等属性的结合来实现更加灵活的布局。例如，可以使用 inline-block 将多个元素显示在同一行，并设置 vertical-align 属性调整元素在行内的对齐方式。

需要注意的是，display 属性对于不同的元素有不同的默认值，例如 div 元素的默认值为 block，span 元素的默认值为 inline。同时，display 属性也可以被 CSS 中的其他属性覆盖，例如使用 float 属性可以将元素从普通文档流中脱离，即使其 display 属性为 block，也会显示为浮动元素。

11 inline 和 inline-block

inline将元素呈现为内联元素，不会独占一行，同时会忽略width和height属性。这意味着，内联元素只会占据它所需要的空间，但不会强制换行。例如，<span>元素通常就是内联元素，可以用来包裹文本。
inline-block将元素呈现为内联块级元素，不会独占一行，同时可以设置width和height属性。这意味着，内联块级元素会占据它所需要的空间，并且不会强制换行。例如，<img>元素通常就是内联块级元素，因为它可以设置width和height属性，同时又不会独占一行。

总之，inline和inline-block都可以用来在行内显示元素，但是inline-block可以设置width和height属性，因此在某些情况下比inline更加灵活。

dom 事件流

捕获阶段（capturing）、目标阶段（targetin）、冒泡阶段（bubbling）

冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发
捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发

e.target //点击的元素
e.currentTarget // 绑定事件的元素
e.stopPropagation() // 阻止冒泡
e.preventDefault() //阻止事件默认行为。

1、水平垂直居中​

2、flex 布局​

3、省略号​

4. BFC​

概念：​

创建 BFC 的条件​

BFC 的特点：​

BFC 的作用​

5. 盒模型​

6、元素隐藏​

7、双飞翼(圣杯)布局​

8、重排和重绘​

9、position 属性​

10、CSS display 有哪些值​

11 inline 和 inline-block​

dom 事件流​