Daniel's Studio.

Daniel's Studio.

it's better to burn out than to fade away

display为inline-blobk的元素之间的间距
现象当两个display值为inline-block的元素并列时,元素之间会出现神秘的间距。 inline元素也有相同现象。 原因造成「inline-block」元素空隙的本质是HTML中存在的空白符(white space)。由于对于西文来说,是使用空格作为单词之间的分界的,所以在HTML被解析时,inline或者inline-block元素的标签之间的空格或者换行被看成相当于文字间隙,产生了一些看不见的字符,CSS的white-space属性会作用于这些字符,产生了内容,占据了空间,产生了水平方向上的“间隙”效果; 因此,当inline或者inline-block元素的HTML标签之...
前端路由的实现原理
SPA在传统的Web项目中,每个网页都对应了一个HTML文件,当我们向浏览器输入不同的URL时,服务器会返回不同的HTML文件,再由浏览器负责处理并呈现出不同的页面。但在现代的多数SPA(single page web application),即单页Web应用中,一个项目只有一个HTML页面,一旦加载完成就不会进行重新加载或跳转,取而代之的是通过使用JS动态的改变这单个HTML页面的内容,模拟多页面的跳转。 好处 由于在与用户的交互中不需要重新刷新页面,并且数据的获取也是异步执行的,页面更加流畅,用户的体验更好; 服务器压力小; 前后端分离开发。SPA和RESTful架构一起使用,后端...
CSS布局学习|两列等高布局

需求

页面中经常会使用到多栏布局,但如果栏目带有背景颜色且各自的内容高度不一时,就会出现每一栏的底部不能够对其的情况,而我们所希望的是每一栏的底部可以平齐。

CSS布局学习 | 圣杯、双飞翼布局

圣杯和双飞翼布局是最为经典和基础的两个布局方式了,两者的目的都是为了实现一个三栏的布局,其共同点如下:

  • 两侧的宽度固定,中间的宽度能够自适应调整;
  • 中间部分在DOM结构上优先,以便先行渲染
  • 允许任意列的高度最高
avatar
Daniel Xu
Think twice, code once.