Css
Vue过渡效果之CSS过渡
Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡 引入 以一个toggle按钮控制p元素显隐为例，如果不使用过渡效果...
animate.css的使用
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用 引入 animate.css的最新版本是3.5.2，引入animate.css很容易，有以下几种方法 1、从官网下载 htt...
CSS变量variable
一直以来，CSS中是没有变量而言的，要使用CSS变量，只能借助SASS或者LESS这类预编译器。新的草案发布之后，直接在CSS中定义和使用变量不再是幻想了。本文将详细介绍CSS变量variable 基本用法 CSS变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置...
CSS遮罩mask
CSS遮罩是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位或png32位中的alpha透明通道的效果。本文将详细介绍CSS遮罩mask概述 遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景。于是，遮罩mask与背景backgro...
CSS命名实践
每次写HTML结构涉及到CSS命名时，都要挣扎一番。关于CSS命名的规范，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在这里面最火的应该算BEM了。本文将详细介绍CSS命名 主流命名【BEM】 说起CSS命名，当然要提到BEM。BEM的意思就是B模块(block)、E元素(eleme...
CSS兼容性详解
对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。在几年之前，处理兼容性，一般地就是处理IE低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性 盒模型属性【宽高width/height】(全兼容)widthheight(IE6...
CSS规范
CSS是网页样式的描述语言，CSS规范能够使CSS代码风格保持一致，使得CSS更容易理解和维护。本文将详细介绍CSS规范 代码风格【选择器】 1、选择器 与 { 之间包含空格.selector{} 2、>、+、~ 选择器的两边各保留一个空格/*good*/...
吴裕雄--天生自然HTML学习笔记：HTML 样式- CSS
CSS(CascadingStyleSheets)用于渲染HTML元素标签的样式.<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><s...
css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中，不定宽高的div垂直水平居中，等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案。1.父元素text-align:center;display:table-cell;vertical-align:middle;子元素display:inline-bloc...
css3之transform属性实现div不定宽高垂直水平居中
transform的作用transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool)transform的兼容性transform的兼容性还是比较乐观的。IE9以下不兼容，IE9支持代替的-ms-transform属性不过只支持2D转换。谷歌和Safari支持代替...
css之background-position属性实现雪碧图
什么是雪碧图雪碧图就是CSSSprite，也有人叫它CSS精灵，是一种CSS图像合并技术，就是把多张小图标合并到一张图片上，然后用css的background-position来显示需要显示的部分。为什么要用雪碧图可以减少加载网页图片时对服务器的请求次数，提高页面的加载速度，解决IE6鼠标滑过时出现闪白的现象。用雪碧图...
CSS3之word-wrap英文单词溢出强制换行
word-wrap:normal|break-word;所有主流浏览器都支持word-wrap属性。<divcolor:#800000;">"border:1px#f00solid;width:50px;word-wrap:break-word;">https://home.cnblogs.com/set/...
CSS Bugs 解决方案
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10,Firefox6.0,Chrome13.0,Safari5.1,Opera11.51如何在IE6及更早浏览器中定义小高度的容器？方法：#test{overflow:hidden;height:1px;font-size:0;line-height:...
