蓑笠翁

包含font-face使用详解，以及vue中自定义字体详解

我们在开发的时候，有大量的场景需要将文字至于图片之上，如图:以上是将“空山新雨后，天气晚来秋”加在图片之上。对于大多数情况，我们都可以将图片作为背景图引入，但有些时候不能将图片作为背景图引入，这个时候就要用到其他的方法，以下我们提供三种方法来实现以上场景。方法一：引入背景图片(background-image: url(path))在引入背景图片的时候，我们需要注意背景图片的大小，如果和div大小不同，则我们需要调整background-size属性使图片适配div大小。代码如下：<div

前端对于链接的处理，通常选择以下四个css选择器：a: link:链接未被访问时状态（样式）a:visited：链接被访问过后状态（样式）a:hover：鼠标放在链接上时链接状态（样式）a:active：从点击到松开这段时间内链接状态（样式）下图是展示hover的效果：鼠标悬浮其上方时改变链接样式；下图是展示active的效果，点击链接未放开（呈黄色）：点击过后变成visited情况（灰色）.代码如下：//html代码<a href="">点击我</a>

图片与文字水平对齐是经常遇到的场景，若使用普通inline或者inline-block布局方式，往往需要通过调整边距来实现图片文字水平对齐，下面我们通过flex布局实现下图功能：

flex为自适应盒子模型，可实现多个盒子自适应水平宽度布局；此时设置的盒子的width属性失效。/*css代码*/.flex-display { display: flex; }.flex-box { margin: 10px 20px; flex: 1; height: 35px; width: 35px;//此属性失效 background

项目中有用到于两端对齐的情况，此时使用flex布局中的justify-content:space-between属性即可使盒子两端分散布局。两个盒子分散到两端：代码如下：/*html代码*/<div class="flex-space-between"> <div class="flex-box2">1</div> <div class="flex-box2">2</div></div>/*css代码*/.

一、 Flex布局简介flex布局基于盒状模型，原意为弹性布局，用来为盒状模型提供最大的灵活性。为CSS中display的一个属性；常用于我们常见的分布布局，比如说多个块并列，自适应屏幕宽度等；在移动端应用广泛。目前所有的浏览器都支持flex布局。二、应用...

flex简单应用所谓道生一、一生二、二生三、三生万物。由flex的基本属性jiflex除了可以实现多个盒子自适应屏幕宽度以外，还可以处理某一行或一列的布局，如在一行上让元素两端对齐flex两端对齐，千里之行始于足下，想要了解flex基本的属性，请阅flex自适应布局。1、一对多布局一行对齐多列或者一列对多行，以下给出一列对多行例子，如图：1为一个盒子，2、3在一个盒子里；大容器为横向布局、2、3所在的小容器为纵向布局。2、一对多对一在以上的基础上再多加个div，效果如下：在二维空间，只有两

  大家都知道css中使文本等元素水平居中的最常用的方法就是设置父盒子text-align: center;子盒子margin: 0 auto; 即可；而目前垂直居中没有看到说明最常用的做法，现在我们给出实现元素垂直居中的几个方法；方法一：line-height;  这应该是我目前知道实现垂直居中最简单实用的方法；对于只有单行文字的，可使用该方法实现文本垂直居中；只需要在父容器中设置linline-height与height相等即可：.parent-box { height: 200p

目录1 前言2 选择器优先级2.1 单个选择器2.2 组合选择器三、总结1 前言  css选择器样式优先级，对于初学者来说平时接触不太到，但对于大型项目的维护，了解选择器优先级是必不可少的一个环节。通常大型项目的全局样式引入以及各个模块元素的相互影响，会导致元素获取样式的来源变得异常复杂；  了解样式选择器优先级对于常见样式问题排查与问题解决有非常大的帮助。2 选择器优先级  所谓一生二，二生三，三生万物，选择器优先级都是由基本的选择器优先级组成，然后排列组合进行演变变成复杂的层叠或者组合样式；先