demosoftwa的博客

你了解的浏览器的重绘和回流导致的性能问题 重绘（Repaint）和回流（Reflow） 重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。 重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘 回流是布局或者几何属性需要改变就称为回流。 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。 所以以下几个动作可能会导致性能问题： 改变 window 大小 改变字体 添加或删除样式 文字改变 定位或者浮动 盒模型

vue 中父组件如何触发子组件的函数，子组件如何触发父组件的函数 父组件中获取子组件函数：children、children、children、refs 子组件中获取父组件函数：$on vue-router 有哪几种导航钩子 1.全局钩子 作用：跳转前进行判断拦截。 2.组件级的 3.单个路由独享的 全局导航钩子 router.beforeEach(to, from, next), router.beforeResolve(to, from, next), router.afterEach(to, f

大家好，这里是demo软件园，今天为大家分享的是flex布局。 **flex布局：**CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行行/列。 对于学习flex布局我们得首先知道以下技术点： –什么是容器，什么是项目，什么是主轴，什么是侧轴？ –项目永远排列在主轴的正方向上 –弹性盒子模型分老版与新版： 老版本的我们通常称之为box：-webkit-box 新版本的我们通常称之为

大家好，这里是demo软件园，今天为大家分享的是Bootstrap的学习分享。 众所周知Bootstrap是一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 流体布局容器 容器的width为auto，只是两边加了15px的padding。 固定布局 容器的width会随设备分辨率的不同而生产变化 分辨率阈值 w >=1200 容器的width为1170 左右padding为15 （注意是borderBox） 1200>w >=992 容器的width为970 左右

大家好，这里是demo软件园，今天为大家分享的是css3中的动画（animation）。 css3动画： 使元素从一种样式逐渐变化为另一种样式的效果。 动画原理：通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前，播放下一幅画。就会给人造成一种流畅的视觉变化效果。 animation属性是一个简写属性形式: （可以用来描述可动画的属性） 可动画属性的列表： https://developer.mozilla.org/en-US/docs/Web/CSS/CS

大家好，这里是demo软件园，今天为大家分享的是css3中的3d变换。 我们首先要知道在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外。CSS的3d变换中，有以下属性： A.3D旋转： CSS3中的3D旋转主要包括四个功能函数 rotateX(angle)、 rotateY(angle)、 rotateZ(angle)、等价于rotate(angle) rotate3d(x,y,z,angle)，x, y, z分别接受一个数值(number),用来计算矢量方向(direction vector)

大家好，这里是demo软件园，今天为大家分享的是css3中过渡和2D变换。众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。 CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自行定义。 过渡中有如下属性： transitio

大家好，这里是demo软件园，今天为大家分享的是css3中的渐变效果。

关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的，在这里向大家介绍一下几种方式。 1.水平居中 margin: 0 auto; 效果图： 而文字的垂直水平居中也比较简单，加上line-height: 200px;与text-align: center;即可。 #test{ width: 200px; height: 200px; line-height: 200px; background: red; margin: 0 auto; text-align: center