MGsniper的博客

iconfont/webfont的原理问题场景@font-face@font-face简介注意点SVGSVG简介问题场景平时做一些练手项目，因为没有精力自己做UI，就会使用一些第三方开源的UI库的小图标。像iconfont这样的网站提供给我们的图标并不是图片，而是字体，这背后的原理与历史究竟是什么呢？因为网上已经有一些现成的，总结得极好的文章了，所以这里以引用为主。@font-face...

 在box-sizing的解析与应用场景一文的问题场景中，我们用border-box属性使得元素的盒子宽高 为 父元素（内容）宽高 * 100%。 除了使用border-box，我们还可以使用CSS3加入的calc（）函数进行规范。 我们可以使用calc()对元素的宽高进行手动计算，calc(100% - padding * 2 - border * 2)，效果等价于border-box&l...

文章目录box-sizing 定义1.content-box2.border-box应用场景需求使用border-box注意附box-sizing 定义 box-sizing 属性规定了一个元素用于计算元素宽度和高度的CSS 盒子模型。 目前box-sizing的关键字值只有两个，一个是content-box，另一个是border-box。 我们在absolute定位下宽高的百分比设定一文...

在Vue中，实现显示切换，有以下几种手段：1. 使用v-if指令2. 使用v-show指令3. 动态绑定display4. 动态绑定visibility5. 动态绑定opacity

文章目录堆叠上下文与堆叠层级基本定义堆叠层级 z-index堆叠上下文生成上下文与层级的性质堆叠优先级规则堆叠上下文与堆叠层级基本定义堆叠上下文是HTML元素的三维概念，HTML元素在沿垂直于窗口的z轴延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。每个盒都属于一个堆叠上下文。在所属堆叠上下文中，每个定位元素都拥有堆叠层级。堆叠层级决定了元素在z轴上的位置，一般地，堆...

文章目录前言案例解析前言在前端布局中，常有使某一部分占用容器剩余高度的布局需求。我们可以使用calc+百分比布局+border-box解决问题，但此方法不仅繁琐，且无法应对已知部分宽度不定的情况。当仅考虑IE10以上浏览器时，我们可以选择flex布局即弹性盒子。案例 <div class="container"> <div class="heade...