Css
面向属性的CSS命名
自从开始做前端开发以来，我发现在开发页面的时候，总是有一个问题十分影响自己的开发效率，这个问题就是css的命名，主要是指css类选择器的命名。这个问题主要体现在：第一，有的内容你压根想不出用什么名字来给它命名，因为一般命名总是考虑语义化，好让其他人看到这个css类的名字就知道它是作用于哪一个内容的，但是由于网页内容的复...
CSS精灵
方法一：方法二：watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">方法二能够降低http请求。！！css精灵的核心思想是将多张图片合...
CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类：用于向某些选择器添加特殊的效果伪元素：用于将特殊的效果添加到某些选择器讲道理，可能我语文不好，我觉得这两句话是等价的:-) 根本不能看出有什么区别&...
css设置字体单行，多行超出省略号显示
单行： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行 display: -webkit-box; -webkit-box-orient: vertical; -webkit-l...
CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
300px!important;width/**/:340px;margin:010px010px}，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所...
使用scss覆盖vant默认样式
//vant覆盖默认样式的写法<style lang="scss" scoped> ::v-deep .van-popup { background: transparent; &...
文件图标css样式
.list-list.ico-bookfolder{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5cc...
深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
我们可以通过计算样式来读取伪元素的样式信息，但是却无法使用javascript来直接操作伪元素，本文以一个需求解决为例，详细介绍脚本化伪元素的6种方法需求说明 【1】为id=box的div元素添加content="前缀"的:before伪元素 【2】为已经添加:before伪元素的div元素删除伪元素 &nb...
深入理解脚本化CSS系列第四篇——脚本化样式表
关于脚本化CSS，查询样式时，查询的是计算样式；设置单个样式时，设置的是行间样式；设置多个样式时，设置的是CSS类名。脚本化样式表当然也是一种脚本化CSS的技术，虽然不经常使用，但有时却非常有用。下面将详细介绍脚本化样式表的内容 CSSStyleSheet CSSStyleSheet类型表示的是样式表。...
深入理解脚本化CSS系列第五篇——动态样式
很多时候，DOM操作比较简单明了，因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦。但由于浏览器充斥着隐藏的陷阱和不兼容问题，处理DOM中的某些部分时要复杂一些，比如动态样式就相对较复杂 所谓动态样式，是指在页面加载时并不存在，在页面加载完成后动态添加到页面的样式 动态样式包括两种情况...
深入理解CSS Media媒体查询
一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容 媒介类型 在CSS2中，媒体查询只使用于<style>和<link>标签中，以m...
深入理解脚本化CSS系列第三篇——脚本化CSS类
在实际工作中，我们使用javascript操作CSS样式时，如果要改变大量样式，会使用脚本化CSS类的技术，本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时，一般会直接改变其行间样式<divid="test"style="height:100px;width:100px;ba...
深入理解脚本化CSS系列第一篇——脚本化行内样式
脚本化CSS，通俗点说，就是使用javascript来操作CSS。引入CSS有3种方式：外部样式，内部样式和行间样式。本文将主要介绍脚本化行间样式 基本用法 行间样式又叫内联样式，使用HTML的style属性进行设置<divstyle="height:40px;width:40px;backgro...
深入理解脚本化CSS系列第二篇——查询计算样式
元素的渲染结果是多个CSS样式博弈后的最终结果，这也是CSS中的C(cascade)层叠的含义。访问第一篇中的style属性只能获取行间样式，这通常来说，并不是我们想要的结果。本文将详细介绍如何查询计算样式 getComputedStyle() 元素的计算样式(computedStyle)是一组在显示元...
