DarylWxc

1. 响应式是什么？网络页面设计布局，页面的设计与开发应当根据用户行为及设备环境进行相应的响应和调整。常见特点：1.同时适配PC + 平板 + 手机等2.标签导航在接近手持终端设备时改变为经典的抽屉式导航3.网站的布局会根据视口来调整模块的大小和位置2. 实现方式基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport。1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>1.width=device-width: 是自适应手机屏幕的尺寸宽度2.maximum-scale:是缩放比例的最大值3.inital-scale:是缩放的初始化4.user-scalable:是用户的可以缩放的操作实现响应式布局的方式有:1.媒体查询2.百分比3.vw/vh4.rem3. 媒体查询1234567@media screen and ( ...

1. 网页站点配置自己开启nginx作为客户端，需要将webpack，nginx serve，constants的IP地址更改为自己的IP地址。入口文件为index.js，listen方法监听的端口为(实际入口)访问地址端口，对应nginx配置代理访问的端口。constants文件里的端口为页面路径上访问的地址，由nginx代理访问到实际地址。通过node指令node index启动项目入口。url->constants->nginx->proxy->real address(实际入口) 2. 服务端配置访问constants配置的服务端地址nginx配置地址需要添加/rest/ 路径访问服务端url->constants->nginx->server proxy(实际入口) 3. 静态资源配置其中静态资源需要npm run build输出dist用于访问字体图标与图片，npm run dev用于启动静态资源webpack-dev-serve访问constants里的静态资源路径，通过webpack里的代理，访问到真实的资源 ...

1. 什么是回流与重绘？1.1 回流根据样式计算盒子在页面上的大小与位置## 1.2 重绘计算完属性后根据每个盒子特性进行绘制## 1.3 渲染机制解析HTML->DOM->解析CSS->CSSOM->结合成Render Tree->回流->重绘->display2. 触发条件回流触发：1.添加或删除可见的DOM元素2.元素的位置发生变化3.元素的尺寸发生变化4.内容发生变化，文本代替图片5.页面一开始渲染的时候6.浏览器的窗口尺寸变化获取一些特定的值也会触发回流，取值。重绘触发：1.颜色的改变2.文本方向的改变3.阴影的修改3. 如何减少1.尽量使用class设定样式2.避免设置多项内联样式3.应用元素的动画使用position属性的fixed或absolute4.避免使用table布局5.css3硬件加速6.避免使用CSS的JS表达式7.避免太多导致需要回流的操作

1. CSS动画实现方式：1.transition实现渐变动画2.transform转变动画3.animation实现自定义动画2. transitiontransition的属性：1.property填写需要变化的CSS属性2.duration完成过渡效果需要的时间单位3.timing-function完成效果的速度曲线linear(匀速)，ease(从慢到快再到慢)，ease-in(慢慢变快)，ease-out(慢慢变慢)，ease-in-out(先变快在到慢)，cubic-bezier(定义自己的值)4.delay动画效果的延迟触发时间3. transformtranform有的属性1.translate 位移2.scale 缩放3.rotate 旋转4.skew 倾斜一般配合transition使用，不支持inline元素4. animationanimation自带属性：1.animation-duration指动画周期时间2.animation-timing-function指动画计时函数3.animation-delay延迟时间，默认为04.animation-itera ...

1. 选择器2. 边框新增3个边框属性：1.border-radius:创建圆角边框2.box-shadow:为元素添加阴影3.border-image:使用图片来绘制边框 3. 背景1.background-clip:确定背景画区2.background-origin:设置对齐方式3.background-break:设置盒子绘制 4. 文字1.word-wrap:normal(换行) break-all(单词内换行)2.text-overflow:clip(修剪文本) ellipsis(显示省略符代替遮盖文本)3.text-shadow:设置文本阴影4.text-decoration:设置深层渲染 5. 颜色rgba：rgb为颜色值，a为透明度hala：h为色相，s为饱和度，1为亮度，a为透明度 6. transition 过渡12345transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)transition-property: width; transition-duration: 1s;transition-timing-function: ...

1. 双栏布局 使用float左浮左边栏 右边模块使用margin-left撑出内容块做内容展示 为父级元素添加BFC，防止下方元素飞到上方内容123456789101112131415161718192021222324252627282930313233343536<style> .box{ overflow: hidden; 添加BFC } .left { float: left; width: 200px; background-color: gray; height: 400px; } .right { margin-left: 210px; background-color: lightgray; height: 200px; }</style><div class="box"> <div class= ...

1. 定位+margin:auto12345678910111213141516171819202122<style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .son{ width:100px; height:40px; background: #f0a238; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; }</style><div class="father"> <div class="son"></div></di ...

1. BFCBFC(Block Formatting Context)，即块级格式化上下文，有自己的渲染区域和渲染规则： - 内部的盒子会在垂直方向上一个接一个的放置 - 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关 - 每个元素的左外边距与包含块的左边界相接触（从左到右），即使元素浮动也是如此 - BFC的区域不会与float的元素区域重叠 - 计算BFC的高度时，浮动子元素也参与计算 - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 - BFC就是一个相对于外界独立的空间，内部的子元素不影响外部的元素2. 触发条件 根元素，HTML元素 浮动元素(float) overflow值不为visible display值为inline-block(cell,caption,table,flex,grid),flex,grid,table position值为absolute或fixed 3. 应用场景 放置margin重叠(塌陷) 清除内部浮动 自适应多栏布局

1. CSS隐藏方法 display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip-path 2. display:none最为常用的方法 .hide{ display:none }元素会彻底消失，本身空间会被其他元素占有，导致重排和重绘。消失后，绑定的事件不会触发，也不会有过渡效果。特点：元素不可见，不占据空间，无法响应点击事件。 3. visibility:hidden也是常见的隐藏元素的方法仅仅隐藏，DOM依然存在，处于不可见的状态。不会触发重排，但是会触发重绘。特点：元素不可见，占据页面空间，无法响应点击事件。 4. opacity:0opacity表示元素的透明度，设置为0后，元素为隐藏状态。不会引发重排，一般情况下也会引发重绘。自身事件会触发，但被其遮挡的元素无法触发事件。子元素无法设置opacity来达到显示的效果。特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。 5. height,width属性为0.hiddenBox{margin:0;b ...

1. CSS像素CSS分相对单位和绝对单位。相对单位一般指设备像素(device pixel),一般情况页面缩比为1,1个css像素等于一个设备独立像素，页面缩放时也会影响px的变化。CSS像素有两个方面的相对性：1.在同一个设备上，每一个CSS像素所代表的设备像素是可以变化的(分辨率)2.在不同的设备之间，每一个CSS像素所代表的设备像素是可以变化的(不同手机)受到以下因素的影响而变化：1.每英寸像素(PRI)2.设备像素比(DPR)2. 设备像素设备像素(device pixels)，物理像素，指设备能控制的最小物理单位。一般设备像素点是固定不变的，单位为pt。 3. 设备独立像素与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括CSS像素。可通过window.screen.width/window.screen.height查看 4. DPRdpr(device pixel ratio)，设备像素比，设备独立像素到设备像素的转换关系，可以通过window.devicePixelRatio获取。计算公式：DPR=设备像素/设 ...