css单位主要包含以下几种：px，em，rem，vh，vw，vmax，vmin，下面我们主要介绍这几种单位。 1. px px表示像素，属于绝对长度单位，1px=1物理像素。 2. em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。 为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为16px * 62.5% = 10px。（就不为16px）. 这样 12px = 1.2em, 10px = 1em, 也就是说...

BFC，全称为Block Formatting Context（块级格式化上下文），是Web页面中的一个独立渲染区域，让处于BFC内部的元素与外部的元素相互隔离，确保内部元素的布局不会被外部元素影响。 1.触发BFC的条件 要创建一个BFC，你可以使用以下任一CSS属性： 1.overflow 不为 visible 2.float 属性不为 none 3.display 为 inline-block、flex、inline-flex、table-cell、grid、flow-root 或 table-caption 4.position 为 absolute 或 fixed 2.BFC的布局规...

在前端中我们主要使用以下方法来实现水平垂直居中 1.单行文本 line-height + text-align .box { width: 400px; height: 200px; line-height: 200px; /* 控制行高（行间距） */ text-align: center; /* 控制文本水平对齐方式 */ } 2.多行文本或盒子 2.1 flex 弹性布局 .container { display: flex; /* 启用 Flex 布局 */ justify-content: center; /* 主轴（默认横向）居中 *...

flex:1 flex 是 flex-grow, flex-shrink, flex-basis. 三个属性的简写，默认值为 0 1 auto。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。建议优先写 flex 属性，而不是写三个分离的属性，因为浏览器会自动计算其相关值。 flex-grow 默认为0， 只能是正整数。即父元素有剩余空间也不放大元素。如果为 1，则把剩余空间的一份加给自己的宽度。 flex-shrink 默认为1，只能是正整数。即父元素空间不足则按比例收缩。如果为 0，则不收缩。 flex-basis 默认为 auto, 即元素本身的大小。...

1.Flex容器 任何一个容器都可以被指定为Flex布局，这样容器内部的元素就可以使用Flex进行布局。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目” 2.Flex属性 1.flex-direction: 设置主轴的方向(默认为水平方向，起点在左端) 2.justify-content: 设置主轴上的子元素排列方式 3.flex-wrap: 设置子元素是否换行 4.align-content: 设置侧轴上子元素的排列方式（多行） 5.align-item...

JS的变量提升指的是代码在执行前会将变量提升到作用域的顶部，仅存在var声明变量中。 console.log(num + '件') // undefined var num = 10 只提升生命，不提升赋值。 上段代码类似于 var num; console.log(num + '件') num = 10; 在函数作用域中也同样遵循该规则。 注意 1、let/const声明的变量在未声明即被访问时会报语法错误。 2、变量在var声明之前即被访问，变量的值为undefined。 3、let/const声明的变量不存在变量提升。 4、变量提升出现在相同作用域中。 函数提升 // 1、会把...

ES6新特性 1. 变量声明 let/const let 特性：1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量。 const 特性：1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。 2. 箭头函数 箭头函数特性：1. 消除了函数的二义性。2. 简洁的语法。3. 箭头函数不会创建自己的 this 上下文，而是继承外层...