理解css 中的position五个属性
在实际开发页面布局时，运用position，对定位的块级元素的嵌套的效果总是不太理解，这里做了几个测试一般的在w3c中我们可以很容易的获取定义:static ： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。fixed ...
!!!css如何让img图片居中？css的display属性实现图片居中（代码实例）
在我们开发前端页面的时候，为了让页面效果美观，会让图片呈现居中效果。那么css怎么让img图片居中显示呢？本篇文章给大家带来css如何让img图片居中？css的display属性实现图片居中（代码实例），让大家可以了解并掌握css的display属性设置img图片居中的两种方法。有一定的参考价值，有...
gulp-css-spriter 将css代码中的切片图片合并成雪碧图
NPM地址：https://www.npmjs.com/package/gulp-css-spriter/配置gulpfile.js：var gulp = require('gulp'), minifyCSS = require('gulp-minify-css'), spriter =...
7：CSS Sprites的原理（图片整合技术）
7：CSS Sprites的原理（图片整合技术）一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。二、图片整合的优势：1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。2）通...
css雪碧图（精灵图）与字体图标的介绍以及对比
css雪碧图（精灵图）与字体图标的介绍以及对比设想一个实际场景：在一个页面为了展示，我们放置了很多独立的小图片，浏览器在显示页面的时候，就需要向服务器就会发送很多请求，来获取并加载这些小图片，但是这样的话，就会导致请求数量太多，造成资源浪费，以及访问速度变慢。碰到这样的情况，可以使用两种方式解决这种...
CSS雪碧图（精灵图）使用
1：CSS雪碧图：CSS雪碧图 即 CSS Sprites，也有人叫它CSS精灵图。2：雪碧图的由来：一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求，那么请求的次数将大大增加。由此出现了雪碧图的概念3：用处：是一种CSS图像合并技术，方法...
css雪碧图实现数字切换
vue中 css 雪碧图应用及数字切换demo1. CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。2.使用css雪碧图的优点：利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。CSS Sprites能减少图片的字节...
CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites？“Sprite”（精灵）这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要 同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。Spr...
CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合，并由 oncoding翻译成中文的，感谢他们的辛苦贡献。CSS Sprites技术在国外并不是什么新技术，只不过近两年(尤其08年开始)中国开始流行这个词，大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术。CSS Sprites这个词如果直译的话...
CSS 图像拼合技术
CSS 图像拼合技术一、图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量，并节省带宽。二、图像拼合 - 简单实例与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）：有了CS...
如何用纯 CSS 创作单元素点阵 loader
效果预览在线演示按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。https://codepen.io/comehope/pen/YvBvBr可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。https:/...
vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404在vue-cli项目中build/utils.js中找到如下代码块，添加 publicPath:’../../’if (options.extract) { return ExtractTextPlugin.extract({ ...
HTML&CSS基础学习笔记1.26-input重置表单
重置表单<input>的[type]属性值为"button"的时候表示一个普通的按钮，相当于一个<button>标签。<input>的[type]属性值为"reset"时，表示表单重置，它在页面的表现形式也是个按钮，但点击他的时候会让表单重置到页面刚加载时的状态。...
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
原文地址：https://segmentfault.com/a/1190000014946883感想：三个平面图形旋转HTML代码：<!-- penrose: 彭罗斯 --><div class="penrose"> <span></span> ...
css书写规范 & 页面布局规范 &常用案例经验总结
CSS 属性书写顺序(重点)建议遵循以下顺序：布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性：width / height / margin / paddin...
如何处理CSS3属性前缀
今天闲来无聊，重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说：为什么还要用mixin呢？为什么不使用Autoprefixer？使用Autoprefixer，只需要输入一行代码，编译器帮你做了一切，还纠结个毛mixin。姐姐的一句话让我汗颜...
CSS3属性border-radius绘制多种多样的图形
border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就...
[css]需警惕CSS3属性的书写顺序
转载张鑫旭：http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/一、不同书...
H5、CSS3属性的支持性以及flex
一、项目中用到一个flex属性，但是应用了flex的父容器只设置了width，没有设置height，此时每一个应用了上面提到的属性的样式的div都重叠在了一起，在IE10，IE11出问题，IE9没有问题。（待深入研究）二、距离上一次发布《五大主流浏览器 HTML5 和 CSS3 兼容性大比拼》转眼已...
【原】常见CSS3属性对ios&android&winphone的支持
2个月前，我在博文《webapp开发中兼容Android4.0以下版本的css hack》中写过“那对于做移动网页开发的同事来说，一般只要做好webkit内核浏览器的展现效果就行了” ，在这里纠正下，在目前Wepapp开发中，主要对webkit内核的手机做好各个版本的兼容已经不够了，像其它的高端智能...