随笔分类 - Html / Css
摘要：在开发过程中，我们难免会遇到 token 存储、 代码缓存、 图片存储等，以及其它一些可能存在的前端存储问题。 今天我们从本地存储入手，从前端的角度来了解缓存应用的场景，以及在日常开发中，我们需要缓存的地方和使用缓存带来哪些优势 or bug 一、什么是本地存储 客户端数据的存储 本地存储可以使用在
阅读全文
摘要：在实际的项目中，和后台的数据交互是少不了的，我通常使用的是 axios 库，所以以下示例也是以 axios 为基础来进行封装的。如果对 axios 不了解的，请看这里 axios 文档 1、安装 首先是 npm 安装 axios 很简单：npm install axios 2、没有封装存在的问题 如
阅读全文
摘要：定义： reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。 reduce() 与forEach()、map()、filter()这些方法一样，也会对数组中的每一项进行遍历，但是reduce() 可以将遍历的前一个数组项产生的结果与当前
阅读全文
摘要：官方解释： <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 当组件在 <keep-alive> 内被切换，它的 activ
阅读全文
摘要：element-ui 官方文档 element-ui 中 el-table 的使用合集请点这里 基于 vue2.0 的 element-ui 框架，使用起来还是很方便的，非常适合快速开发，但是在做自己的项目中还是会碰到这样那样的问题，有些问题官方文档并不是很详尽，以下是我在使用 element-ui
阅读全文
摘要：一、什么是指令 学习 vue 的时候肯定会接触指令，那么什么是指令呢？ 在 vue 中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以 v-xxx 表示，比如 html 页面中的属性 <div v-xxx ></div> 比如在 angular 中 以 ng-xxx 开头的就叫做指令
阅读全文
摘要：px 相对长度单位，像素px 是相对于显示器屏幕分辨率而言的。是我们网页设计常用的单位，也是基本单位。 通过 px 可以设置固定的布局或者元素大小，缺点是没有弹性。用 px 设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览 Web 页面时，如果改变了浏览器的缩放，这时会使得 W
阅读全文
摘要：固定布局 为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。 这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。 流式布局（Liquid Layout） 为网页
阅读全文
摘要：在项目开发的过程中，我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，字体图标任意放大缩小不会失真，也大大减少了请求数量，解决了图片占用资源的问题，非常好用。 IcoMoon 的使用： 1. 直接
阅读全文
摘要：元素水平居中： 1. 行内元素（如文本、图片等 display 为 inline 或 inline-block） 给其父元素设置 text-align: center 2. 块元素（width 为定值） 通过设置 margin: auto; （此方法对浮动元素或绝对定位元素无效） 3. 块元素做绝对
阅读全文
摘要：在 web 页面布局中，有三种控制元素版式布局的模型： 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局。 浮动流（Float） 在浮动布局中，元素首先按照普通流的位置呈现，然后根据浮动的方向向左边或右边偏移。 定位流（Position） 在绝对定位布局中，元素会整体
阅读全文
摘要：我们都知道，行内元素不能够定义宽度和高度，但 img，input，button等标签作为行内元素却可以定义宽高，为什么呢？这就牵扯到了置换元素和非置换元素。 置换元素： w3c官方解释：“An element that is outside the scope of the CSS formatte
阅读全文
摘要：在 HTML 中，提供给我们的默认字体有很多，但因为在电脑上安装的字体有限，所以很多时候不能呈现出和设计稿上一样的效果，这时候我们就需要使用 css3 提供的 @font-face 来实现个性化字体了。 css 样式定义： font-family 为自定义的字体名称，必须； src 字体文件的引入路
阅读全文
摘要：CSS Sprite 也叫CSS精灵，该方法是将多个小图标等图片集成到一张大图上，然后利用 background-image 和background-position 两个属性进行背景定位来控制需要显示的部分。 比如在有很多小图片、小图标的网页上，每个小图标都单独用一张图片， 页面加载的时候，每张图
阅读全文
摘要：在网页布局中引入图片，最常用的两个就是 img 标签和 background 属性了。但何时使用 img 标签，何时使用 backround 背景图像呢？ <img> 标签定义 HTML 页面中的图像。从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是
阅读全文
摘要：话不多说，直接上代码： 注意： 1、WebKit, Blink, Edge 浏览器等需要带上 -webkit- 前缀，且是双冒号，写的时候还要带上input 2、针对火狐浏览器则有两种写法，一种是针对低版本的，一种是针对高版本的，二者都需要带上-moz-前缀。要点1：火狐低版本的使用冒号（:），而高
阅读全文
摘要：单行文本溢出显示省略号的实现方法： 多行显示省略号的实现方法： css 限制显示文本的行数，超出不显示 因为使用了 webkit 的 css 扩展属性，只有-webkit内核才有作用，移动端浏览器绝大部分是 WebKit 内核的，所以该方法也适用于移动端。 利用绝对定位和 padding 首先在包含
阅读全文
摘要：首先这两种属性都会使显示出来的文本框不能输入。 disabled 属性：规定禁用 input 元素。被禁用的 input 元素既不可用，也不可点击和编辑，使用 tab 键时将会被跳过，用户的所有操作对该输入项都无效。会使文本框变灰。 此属性对所有的表单元素都有效，但是表单元素在使用了 disable
阅读全文
摘要：盒子模型是css中一个重要的概念，是开发网页必须要用的布局方法。盒子模型有两种，分别是标准 w3c 盒子模型和 ie 盒子模型。 标准 w3c 盒子模型：包括 magin（外边距）、border（边框）、padding（内边距）、content（内容），并且 content 部分不包含其他部分。也就
阅读全文
摘要：在前端开发中，大家或多或少的有接触过CSS伪类和伪元素，使用伪元素的时候，总感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢? 在 W3C 中定义： 伪类：用于向某些选择器添加特殊的效果。应用于一组 HTML 元素。 伪类的作用获取页面中不存在的信息，即通过选择器
阅读全文
浙公网安备 33010602011771号