浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 background-color: #b3d4db; 6 } 编译之后的效果很明显,界面的布局也很合理,看起来很清晰.那么究竟这个属性是干嘛用的呢? Flex是Flexible Box的缩写,…

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高, 而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing(默认值:content-box) /* 标准模型 */ box-sizing:cont…

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使用以及介绍: 1.要实现水平或者垂直切分,必须先满足以下要求   i. display : box必须用在对应的父窗口,比如div.parent>div.panel*3 这种格局, parent 必须先先定义此属性   ii. .panel的元素定义box-flex,来实现按比例切分.如下图:就是将…

pointer-events: none: 可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着.   而display:none; 是你摸不着,但是你也看不见.   pointer-events: none:摸不着,但是看得见.如果把某个元素再加上opacity:0:则可以很容易实现类似display:none:的效果(摸不着,看不见).…

浅谈WPF依赖项属性 0. 引言 依赖项属性虽然在使用上和CLR属性一样,但是它是WPF特有的,不同于CLR属性.只是封装为我们常用CLR的属性,在语法使用上和CLR属性一样.WPF中一些功能:动画,属性绑定,样式等都是以依赖项属性为基础的.WPF中元素的属性大部分都是依赖项属性. 依赖项属性和CLR属性最主要的区别是:CLR属性是通过一个私有的字段来读取.而依赖项属性则是通过继承在DependencyObject的GetValue()和SetValue()方法动态的读取属性值. 就是说当设置一…

浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存的.只在相关响应式依赖发生改变时它们才会重新求值,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数.计算属性是基于他们的依赖进行缓存的,只有在相关依赖发生改变时,才会重新求值, methods方法,每当触发重新渲染时,调用方法将总会再次执行函数. 使用计算属性还是 methods 取决于…

浅谈Linux下的五种I/O模型 https://www.cnblogs.com/chy2055/p/5220793.html  一.关于I/O模型的引出 我们都知道,为了OS的安全性等的考虑,进程是无法直接操作I/O设备的,其必须通过系统调用请求内核来协助完成I/O动作,而内核会为每个I/O设备维护一个buffer.如下图所示: 整个请求过程为: 用户进程发起请求,内核接受到请求后,从I/O设备中获取数据到buffer中,再将buffer中的数据copy到用户进程的地址空间,该用户进程获取到数…

CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒定位布局. CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是“垂直居中”布局,非常容易实现. Flexbox布局语法有三种: 旧版本:2009年版本,使用display:box或者display:inli…

今天说一下 CSS3的box-reflect属性,也就是倒影特效. 语法: box-reflect:包括3个值. 1. direction 定义方向,取值包括 above . below . left . right. above: 指定倒影在对象的上边 below: 指定倒影在对象的下边 left: 指定倒影在对象的左边 right: 指定倒影在对象的右边   2. offset定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定.默认为0.用长度值来定义倒影与对象之间的…

背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript都不用写. "一行JavaScript都不用写,纯CSS3就可以写.CSS3有这么溜的操作!" ''对呀!CSS3 animation当中有一个steps(),你上网查一下就知道了!" "涨姿势了!赶紧查阅一下!" animation-timing-funct…