Liangyuqi's blog

Less:优雅的写CSS代码

css是不能够定义变量的，也不能嵌套。它没有编程语言的特性,less将让我们更快更方便的编写css代码

Less是什么 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 less使用.less作为文件后缀。通过第三方工具，可以一键或者实时编译成对应的css文件。变量使用@符号定义。例如： @base: #f938ab; .box { color: @base; /*...

Posted by Liangyuqi on October 6, 2017

深入理解BFC

块级格式化上下文

定义在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。 BFC是b...

Posted by Liangyuqi on October 3, 2017

清除外边距塌陷

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。

1.相邻的兄弟姐妹元素毗邻的两个块级兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例如： <p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p> <p style="margin-top: 20px;">...这个段落的上外边距被合并。</p> 可以发现这两个段落...

Posted by Liangyuqi on October 2, 2017

清除float影响

父元素中有子元素float的话，可能就会影响父元素的高度，从而影响布局

1.直接给父元素定高；弊端：必须知道父元素的高； 2. 父元素使用overflow属性值为hidden解决；(父元素触发bfc）弊端：会隐藏溢出的内容，（当需要隐藏时使用，按需使用）为什么用这个属性可以清除浮动带来的影响呢？当父元素存在height时（如30px），子元素（如50px）则会被溢出隐藏（只显示30px）。但是当父元素不存在高度时，此时设置overflow：...

Posted by Liangyuqi on October 1, 2017

WEB前端性能优化

很关键

网页内容 1、尽量减少HTTP请求个数——须权衡合并图片（如css sprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。 2、减少DNS查找次数我们需要权衡减少 DNS查找次数和保持较高程度并行下载两者之间的关系。 3、避免跳转为了确保“后退”按钮可以正确地使用，使用标准的 3XXHTTP状态代码；同域中注意避免反斜杠 “/” 的...

Posted by Liangyuqi on September 29, 2017

getAttribute()与getParameter的区别

服务器端与客户端交互数据

当两个Web组件之间为转发关系时，转发源会将要共享 request范围内的数据先用setAttribute将数据放入到HttpServletRequest对象中，然后转发目标通过 getAttribute方法来取得要共享的数据。而MVC中用的就是Web组件之间的转发。下面整理一下getParameter和getAttribute的区别和各自的使用范围。 1）HttpServle...

Posted by Liangyuqi on September 14, 2017

实例分析Vue.js中 computed和methods不同机制

自己写个demo验证一下computed依赖缓存

在vue.js中，有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同就是调用的时候，methods要加上（） 2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行为了方便理...

Posted by Liangyuqi on September 11, 2017

Vue.js MVVM及数据绑定原理

原理比如何使用更重要

数据驱动数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。比如说我们点击一个button，需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中，对于页面的修改我们一般是这样的一个流程，我们对button绑定事件，然后获取文案对应的元素dom对象，然后根据切换修改该dom对象的...

Posted by Liangyuqi on September 9, 2017

css文本溢出隐藏显示省略号（单行+多行）

文本超出若干行就换行，这个功能几乎每个文本浏览网站都会用到，实现它的办法也有很多，今天简单的介绍一下实现它的方法。

单行文本不换行，并将超出文本隐藏 .box-content{ overflow: hidden;//文本溢出隐藏 text-overflow: ellipsis;//文本溢出显示省略号 white-space: nowarp;//不换行 } ### 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号在webkit内核中，可以利用-webkit-line...

Posted by Liangyuqi on September 6, 2017

图片高度与宽度成比例自适应

将高度设置成百分比时，其高度是基于父元素来定的，设置成50%，就是将该元素高度设置成父元素的高度值 x 50%。但是将高度设置成百分比时，往往是不生效的！高度依然为0，这是为啥? 道理很简单，那就是父元素的高度也为0。所以这就需要讲到浏览器对宽度及高度是如何计算的。浏览器在计算有效宽度时会考虑浏览器窗口的宽度，如果没有设置绝对宽度，就会自动将页面内...

Posted by Liangyuqi on September 5, 2017

Lust for life