EvaXUAN-CSDN博客

转载 line-height的一些深入理解及应用

“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。下图的红色线即为基线。一. line-height与line boxes高度ss中起高度作用的应该就是height以及line-height了，如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用。有一个空的div，<div></div>，如果没有设置至少大于1像素高度

2017-08-31 16:51:34 613

转载列表的两端对齐布局

产品：“哎你这个文字跟设计的不一样啊，居中了吗，怎么有的地方那么大空啊？”本尊：“前端页面就这样，没有两端对齐，改不了…（一副不耐烦的样子）”（想想当初这么说的我也是蛮屌的，之前的公司为什么没开除我呢….）这里我还得解释一下，因为我是半路出家嘛，学习初期也遇到过这种问题，也有过这种疑问，于是就跑去问带我的人，他就揍是这么回我的!好了，原委说完了，接下来学习~一、什么是列表元素的两端对齐布局首先说说何

2017-08-31 14:49:40 4206

转载 CSS3 transform对普通元素的N多渲染影响

今天有个事儿超满足，那就是：当当当当，买了海贼王代言的眼药水-罗，收藏用~———————————–正题分割线———————————–一个普普通通的元素，如果应用了CSS3 transform变换，即便这个transform属性值不会改变其任何表面的变化（如scale(1), translate(0,0)），但是，实际上，对这些元素还是造成了写深远的影响。所谓表面无恙，内心奔溃的真实写照。一、tran

2017-06-28 18:33:11 399

转载小tip: CSS3如何实现圆角的outline效果？

首先，outline是个很牛批的东西，但是我们通常为了浏览器之间的兼容问题，会把这个outline处理掉，保证页面在各浏览器之间显示的相同。有没有什么方法利用CSS以及使用一层标签，【不能使用::before, ::after伪元素实现】【box-shadow效果不好，我试过了，小尺寸IE会糊边】，兼容IE9+浏览器实现下面这个加号效果。高手在民间，结果@大地Dudy巧妙使用outline实现了C

2017-06-27 19:50:02 4334 2

转载小tip：CSS3下的圆形遮罩效果实现与应用

因为是使用纯洁的CSS3实现，因此，IE6~8浏览器又将被侵猪笼。看一下效果：HTML代码：<a href="#" class="test_outer"> <span class="test_cover trans"></span> <img src="wuluqiaola.jpg" width="521"> // 嗯图片寄几替换</a>CSS代码：* { padding

2017-06-27 19:28:04 3515

翻译翻译 – 高性能网站需避免的7个错误

这段时间忙的薅头发，笔记都没怎么写了，要挨骂。。。。阅读一篇放松一下心情。性能影响用户是毫无疑问的。网站速度直接影响反弹率、转化率、收入、用户满意度、搜索引擎优化（已知的如反映网站流行度的Page Rank）以及几乎所有值得追踪的业务。用户离开速度慢的网站，而且往往不会再回来。还在不久前，用户离开一个网站的时间点是8秒。然而，很快就是6秒，然后4秒，然后现在是2秒。门槛一直在提高。小小性能改变，大大

2017-06-22 18:51:37 277

原创学习Javascript闭包（Closure）

一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。　var n=999;　　function f1(){　　　　alert(n);　　}　　f1(); // 999另一方面，在函数外部自然无法读取函数内的局部变量。function f1()

2017-06-19 19:22:06 169

转载 CSS选择器中的正则表达式

放张头图来放松放松哈哈哈哈哈哈哈哈哈哈哈哈~一是的，CSS也有正则（阿门）CSS装逼两利器：矩阵和正则。其实呢，我们也不必惊讶，CSS毕竟也是一门语言，而且正则本来就是有利于某个具体语言之外的东西。二正则表达式的一些通用规则无论什么语言，正则表达式的规则都是通用的，差别可能在于书写的形式上。正则是个很深的话题，真要说开，可以写一本厚厚的书！记住都很难，像我要用的时候，就百度…..其中，有一些关键

2017-06-18 23:11:37 12407

转载在CSS中实现父选择器效果

为何CSS不支持父选择器？这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素？”是一样的。浏览器解析HTML文档，是从前往后，由外及里的。所以，我们时常会看到页面先出现头部然后主体内容再出现的加载情况。但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响

2017-06-18 22:54:47 46217 1

转载 i, b, em, strong元素在HTML5中的新语义

故事的开头HTML5中的语义那是相当劳力伤神的一件事。顾名思意，一知半解情况下使用HTML5的语义化标签，多半会进入“不合理使用标签”的深色名单。我们都是对自己有要求的人，虽然很烦，很折腾，我们还是有必要花大量的功夫去理解每个HTML5标签的真正语义。不过嘛，这HTML5虽然势如破竹，但是，要真正一统天下还需时日。所以，HTML4还不是很了解的青年们，不必急于追随潮流，什么HTML5啊之类的，就当是

2017-06-15 15:13:51 693

原创内容loading加载后高度变化

在家是今天的笔记之前，昨天…啊不，前天，帅微博的时候刷到一段话，蛮对口的，分享一下：与影立黄昏，问釜温清粥捻灯共熄芯，书生还书生夜静伴春眠，共饮清风醉朝起何相思，大梦何前尘抬手摘星月，冷茶知我味妄我言中泪，独路他人愁回首无萧瑟，逍遥自在灯火阑珊处 …完毕，进入笔记阶段，对就这么生硬…..现在web技术不断发展，视图与数据渲染更多由前端呈现，后台更多与数据打交道。于是，我们会经常看到这样的交互场景。页

2017-06-15 01:57:19 1292

转载 CSS深入理解vertical-align和line-height基友关系的复杂现象

为了让任意个数的列表最后一行也是对齐排列，在列表最后会辅助列表等宽的空标签元素来占位，类似下面红色高亮HTML代码：.justify-fix { display: inline-block; width: 128px; }<div style="text-align: justify;"> <img src="img/mm1.jpg" width="128"> <img src="i

2017-06-13 21:39:55 407

原创 CSS深入理解vertical-align和line-height的基友关系

本来以为今天又要到家十来点，蹲在我的小窗户前吭哧吭哧写笔记，没想到这会儿我负责的两个页面，接口都挂了，咩哈哈，不用回家顿小窗台了，咩哈哈哈~俗话说，死宅腐女还有啥来着注定单身狗，反正这三样我确实是全占了的，非常愿意研究基腐问题，科科。那么看看CSS届的vertical-align和line-height，就是典型的表面上看上去大相径庭，实际上是大进后庭的断背好基友！表现明显的断背基情众所周知，ver

2017-06-12 21:31:41 377

转载对CSS vertical-align的一些理解与认识

上周我们头还给我们讲一些知识的过程中，提到了vertical-align，大概是跟display差不多牛批的能讲好久的一个样式吧，回来看了大神的文章，vertical-align属性牵扯到的知识太多，本篇就只挑几个典型或是重要的地方说一说吧。在开始之前，希望对下面的知识有所了解，inline box模型，inline/inline-block/block属性。vertical-align一大堆乱七八

2017-06-12 01:13:09 258

转载 minmax()函数

CSS Grid Layout规范中的minmax()函数是一个非常有用的新特性。这个函数能够让我们用最简单的CSS控制网格轨道的大小。这个函数包括一个最小值和最大值。minmax()函数minmax()函数接受两个参数，最小值和最大值。minmax(min,max)如果定义的最大值小于最小值，它将会被忽略，函数会被视为只设置了一个最小值。minmax()函数接受六种类型的值：长度值<length

2017-06-11 23:46:54 18556

原创 axios基础

axios基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用功能特性在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据自动转换 JSON 数据客户端支持保护安全免受 XSRF 攻击取消请求引入方式利用npm安装 $ npm install a

2017-06-08 19:23:10 436

转载 HTML5 <template>标签元素简介

HTML5 template元素先见后认识元素，基本上可以确定是2013年才出现的。干嘛用的呢，顾名思意，就是用来声明是“模板元素”。目前，我们在HTML中嵌入模板HTML，往往是类似这样的写法：<script type="text/template">// ...</script>实际上，并不存在type=”text/template”这样的标准写法，<template>元素的出现旨在让HTM

2017-06-07 19:28:33 15373

原创了解CSS/CSS3原生变量var

在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。

2017-06-06 15:51:41 303

原创 CSS3随机多背景随机圆角等效果

这篇是在廖雪峰的博客学习的一个效果。首先介绍的是，什么是蝉原则？（百度图片）“蝉原则”，英文称作“cicada principle”，是一种让事物的重复出现符合“自然随机性”的规则，为什么这么说呢？“蝉原则”源自于北美，中国似乎并未有这样的说法，这背后是有有故事的：北美和东亚蝉的种群是不一样的，在东亚蝉的幼虫生活在土中3年5年或7年；但是北美有一种周期蝉（Magicicada），其生命周期为十三

2017-06-05 17:33:40 3521 1

转载了解CSS属性font-kerning,font-smoothing,font-variant

本文很简单，了解几个可能平时用得不太多，长得不太熟的font相关的几个CSS属性，分别是：font-kerning, font-smoothing和font-variant。字距调整属性font-kerningfont-kerning应该算是一个CSS3属性，主要作用是调整字形间距，且基本上是英文字符形状的间距，因为英文字符形状都是不规则的，有宽有窄，有的圆乎乎，有的棱角分明，就会导致排列在一起的时

2017-06-04 16:18:15 3634

转载真正了解CSS3背景下的@font face规则

很多人只要一提到@font face规则，心中就会不由自主“哦~~”的一声：“这个我知道，可以用来生成自定义字符小图标！”话是没错，问题在于很多人就以为生成字符小图标就是@font face规则的全部，实际上只是功能之一，如果真正了解@font face规则，你会发现，@font face规则可以做的事情其实非常多，尤其不考虑IE7，IE8浏览器的情况下。@font face的本质是变量虽然说CSS

2017-06-04 16:01:19 1029

转载 CSS即将具备的6种处理器特性

众所周知，CSS是不具备类似其他程序语言一样的特性，没有逻辑性而言。他就是一门描述性语言。因此才会有各式各样的CSS处理器出来，比如较为流行的Sass，LESS和Stylus。当然还有近年最强大的PostCSS，在项目中使用PostCSS能将你带入到一个全新的CSS世界，至于原因是什么，暂不阐述。使用过CSS处理器的同学应该知道，在CSS处理器中最常见的几个特性是变量、混合宏、扩展、嵌套、运算以及一

2017-06-03 01:24:06 632

原创 Canvas的基本用法

<canvas> 元素<canvas id="tutorial" width="150" height="150"></canvas><canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<canvas> 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时

2017-06-02 00:23:34 271

原创美化下划线

在CSS中，众所周知使用text-decoration:underline;可以为任何文本添加下划线的效果。不过我们一般都在初始化里把a标签的下划线去掉(text-decoration : none )，有没有想过美化这些下滑下划线呢~理想的场景中，强调使用下划线，它应该做到以下几点：下划线应该位于文本基线（baseline）下方下划线应该可以跳过下行字母能改变下线线的颜色、粗细和样式横跨文

2017-06-01 20:30:41 2815

转载用css绘制各种形状（放松一下）

自适应的椭圆border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。so 代码如下：div { width: 100%; height: 300px; background: pink;

2017-06-01 19:41:29 787

原创 Compass用法

上一篇我们学习了有关sass的的使用和主要用法，有提到compass。Sass可以让CSS的开发变得简单和可维护。但是，只有搭配Compass，它才能显出真正的威力。学会了Compass，你的CSS开发效率会上一个台阶哟。安装：sudo gem install compass如果你用的是Windows系统，那么要省略前面的sudo。正常情况下，Compass（连同Sass）就安装好了。项目初始化

2017-06-01 15:34:04 920

原创 CSS预处理器

作为前端工作人员，应该觉得写样式还是蛮麻烦的，有些超简单样式，要一点一点，一板一眼的把我们需求的样式写出来，有时候都能写出魂游天外的感觉，只有手指在动，感觉在浪费生命。so 这时候肯定就肯定有人为CSS加入编程元素，这就是CSS的预处理器，它的基本思想是，用一种专门的编程语言，进行网页样式编写，然后再编译成CSS文件。各种”CSS预处理器”之中，我用过LESS，但是他有某些BUG，得下载一些插件，s

2017-06-01 14:28:39 236

转载高级CSS filters

Winter（我） Is Coming…在上一篇提到，filter有一个高斯模糊效果，类似于iPhone手机从下往上滑的那个功能的背景（我知道我没说明白，这次上图来解释，一看就了）嗯就是图二介玩应的效果，图片转载…这种效果早期的CSS是现实挺困难的，在早些年的时候，对filter规范就有支持，但是实在SVG标签上有这个属性，而且只支持Firefox浏览器，并且只能在运行在HTML。首先能想到的是C

2017-05-27 15:32:47 317