随笔分类 -  CSS

1 2 下一页
你可能没注意的CSS单位
摘要：# 扶今追昔CSS中的单位我们**经常**用到`px`、`pt`、`em`、`百分比`，px和pt不用多说## emem是相对单位，参考物是父元素的`font-size`，具有继承的特点如果字体大小是16px（浏览器的默认值），那么 `1em = 16px`这样使用换算很复杂，尤其是和px对应，大家... 阅读全文
posted @ 2014-11-14 16:56 谦行 阅读(6073) 评论(7) 推荐(9) 编辑
CSS 实现打字效果
摘要：# JS实现最近做项目的时候需要实现一个字符逐个出现的打字效果，在网上一搜有个不错的jQuery插件[Typed.js](http://www.mattboldt.com/demos/typed-js/)，效果很赞![image](http://lsly1989.qiniudn.com/xxxasd... 阅读全文
posted @ 2014-11-11 08:35 谦行 阅读(22501) 评论(11) 推荐(14) 编辑
direction和unicode-bidi
摘要：在做多语言页面，接触过阿利伯语、希伯来语的同学肯定了解书写方向的重要性，包括我们五四运动前的书写顺序也是从右到左的。css中 `unicode-bidi`和`direction`属性决定了HTML或XML文字渲染方向，两个属性结合使用可以改变文字书写顺序#directiondirection属性有三... 阅读全文
posted @ 2014-11-10 18:35 谦行 阅读(5063) 评论(2) 推荐(4) 编辑
CSS3 滤镜
摘要：了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生，CSS3对各种滤镜效果有了支持，可以做出很多好玩儿效果，走马观花了解一下# 语法 filter: function(param); 很很多CSS3属性一样，监狱支持情况需要使用浏览器前缀，CSS滤镜支持的方法有1. grayscale 灰度2.... 阅读全文
posted @ 2014-11-10 09:37 谦行 阅读(6419) 评论(8) 推荐(9) 编辑
Outlook HTML渲染引擎
摘要：#OutLook始终不离不弃是不是很讨厌为Email代码兼容Outlook？ 太遗憾了！虽然光都有尽头，但Outlook始终存在。为了应付Email的怪癖，我们花了很多时间测试，确保我们搞定了所有Outlook的坑洼沟洄。在这个指导中，我们会分享一下数年来我们应付这种烦人的邮件客户端的编程经验，主要... 阅读全文
posted @ 2014-11-07 17:23 谦行 阅读(26682) 评论(6) 推荐(9) 编辑
Intro to CSS 3D transforms
摘要：原文地址：[Intro to CSS 3D transforms](http://desandro.github.io/3dtransforms/)，本文只是翻译了其中的一部分，省去了作者写文章的原因浏览器兼容部分（已经过时）#Perspective元素需要设置需要设置`perspective`来激... 阅读全文
posted @ 2014-11-05 09:29 谦行 阅读(1425) 评论(1) 推荐(3) 编辑
负边距在布局中的使用
摘要：负边距即`margin`属性的值设为负值，在CSS布局中时一个很有用的技巧。值为正的场景很常见，大家都很熟悉其表现* 当`margin-top`、`margin-left`为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与`position:relative`的元素设置top... 阅读全文
posted @ 2014-11-03 17:31 谦行 阅读(5117) 评论(3) 推荐(6) 编辑
使用border做三角形
摘要：网站上经常会使用一些三角形，除了图片的方式，实际上利用border我们可以做出纯CSS的三角形。我们知道border是个边抖可以单独设置，当四个边相交的时候他们是什么时候改变的？ .t0{ margin:30px; height:200px; width:200p... 阅读全文
posted @ 2014-11-03 09:07 谦行 阅读(10218) 评论(12) 推荐(20) 编辑
容易被忽略CSS特性
摘要：CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑大小写不敏感虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的.test{ background-COLOR:#a00; width:100px; height: 100px;}虽然把background-color写为了background-COLOR，但仍然会生效，之所以写成小写是因为xhtml标准的关系，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求选择器优先级当两个规则都作用到了同一个html元素上时，如果定义的属... 阅读全文
posted @ 2014-01-16 07:58 谦行 阅读(14018) 评论(45) 推荐(69) 编辑
常用CSS优化总结——网络性能与语法性能建议
摘要：在前端面试中最常见的问题就是页面优化和缓存（貌似也是页面优化），被问了几次后心虚的不行，平然平时多少会用到一些，但突然问我，很难把自己知道的都说出来。页面优化明显不是一两句能够说完的，这两天总结了一下CSS相关的优化知识，写篇博客梳理一下，还望大家多多指教关于CSS的优化工作主要从两个方面着手网络性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些语法性能：同样都能实现某些效果，但并不是所有的方式效果都相同，我们看过不少关于JavaScript方面的语法优化知识，其实CSS里面也有一些CSS压缩CSS压缩并不是什么高端的姿势，但却很有用，其原理很简单，就是把我们CSS中没用 阅读全文
posted @ 2014-01-14 08:10 谦行 阅读(11252) 评论(9) 推荐(22) 编辑
常见标签的默认属性值及相互作用——关于CSS reset的思考
摘要：在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见，但有时候我们已经为了reset而reset，我们经常看到这样的reset代码div{ padding:0px; margin:0px;}span{ margin:0px; }其实大部分CSS reset是没必要的，多写了只会增加浏览器在渲染页面是的负担，当然有同学会说CSS reset还是有其意义的，这个我也承认，但是我们可以通过了解一些标签的CSS属性的默认值来避免过度的reset标签属性默认值由于大部分的CSS reset都是针对padding、border、margin，我们就先看看常用标签的... 阅读全文
posted @ 2014-01-08 17:47 谦行 阅读(7410) 评论(7) 推荐(13) 编辑
CSS清浮动处理（Clear与BFC）
摘要：在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题 1 2 3 4 5 Clear float 6 23 24 25 26 27 28 29 30 31 32 33 我们希望看到的效果是这样的但结果却是这样的父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，我们需要一些清除浮动的技巧。2 如何清理浮动清理浮动一般有两种思路利用 clear属... 阅读全文
posted @ 2014-01-07 17:52 谦行 阅读(27489) 评论(32) 推荐(49) 编辑
使用CSS sprites减少HTTP请求
摘要：sprites是鬼怪，小妖精，调皮鬼的意思，初听这个高端洋气的名字我被震慑住了，一步步掀开其面纱后发觉很简单的东西，作用却很大神马是CSS 小妖精CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。使用过jQuery UI 的同学可定见过这种图片很多页面常用的小图标，但是我们看看每个小图标的源码的时候会发现，这些小图标的src是同一个文件，都是这张大图为什么要使用CSS小妖精姑且先不管这是怎么实现的，我们先来了解一下又好 阅读全文
posted @ 2013-10-09 22:44 谦行 阅读(4382) 评论(8) 推荐(2) 编辑
十分钟搞定CSS选择器
摘要：在最近的web开发中是不是就会用到一些选择器，发现很多尤其是CSS3新增的不太熟悉，在此总结一下。 优先级不同级别1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。2.作为style属性写在元素内的样式 3.id选择器4.类选择器5.标签选择器6.通配符选择器7.浏览器自定义同一级别同一级别中后写的会覆盖先写的样式基础选择器选择器含义 *通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用） #idid选择器，匹配特定id的元素 .class类选择器，匹配class包含(不是等于)特定类的元素 element标签选择器 ... 阅读全文
posted @ 2013-09-30 19:07 谦行 阅读(19372) 评论(12) 推荐(21) 编辑
CSS hack前传——背景图片全屏
摘要：在之前的博客CSS hack中我有提到，一个问题的解决让我对CSS hack的态度从不屑一顾，到认真研究了实验一下，事情是这样的，最近产品发布，向来狂妄的我被一个bug纠缠住了，甚至丧气的表示我做不出来，说来也惭愧，难住我的并不是造火箭这样的难题，只是个背景图片。。。前世今生最近为产品做了一个扁平化的新Theme，看起来很美观，公司的艺术家看后表示需要一张有深意的背景图片，发给我了放上去后一看艺术家就是艺术家，果真和Theme很搭而且让网站高端了很多（自我感脚），兴冲冲的就发布了上去，主要代码大概是这样的 Test 很... 阅读全文
posted @ 2013-08-31 13:48 谦行 阅读(21674) 评论(15) 推荐(6) 编辑
CSS hack
摘要：之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。什么是CSS hack由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。CSS 内部hack正经的CSS是这么写的 Test ... 阅读全文
posted @ 2013-08-30 23:03 谦行 阅读(14427) 评论(16) 推荐(19) 编辑
CSS media queries
摘要：最近在做一些页面打印时的特殊处理接触到了media queries，想系统学习一下，在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错，结合自己的使用总结一下。 CSS2/media 在CSS2中可以使用media属性可以使特定style只在指定媒体类型下其作用,比如页面有些部分需要在打印的时候隐藏或者变大，这时候可以使用media使某些style只在打印的时候生效 ... 阅读全文
posted @ 2013-08-25 21:54 谦行 阅读(2514) 评论(0) 推荐(0) 编辑
z-index 应用简单总结
摘要：做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。简单演示 两个DIV，第二个向上移动50px，正常情况应该是这样的第二个div遮住了第一个div，对第二个添加z-... 阅读全文
posted @ 2013-08-19 07:50 谦行 阅读(20695) 评论(7) 推荐(12) 编辑
Html 字体大小单位 px em pt
摘要：网页上定义字体大小有常见三种单位，px、em、ptpxpx是pixel缩写，是基于像素的单位.在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768下，则只占约1/10。所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位），甚至会看不清，影响浏览。emem：即％，是相对单位，是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 阅读全文
posted @ 2013-08-04 21:36 谦行 阅读(42730) 评论(1) 推荐(3) 编辑
CSS行高——line-height
摘要：初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中线、基线、底线 Test 中文English English中文 从上到下四条线分别是顶线、中线、基... 阅读全文
posted @ 2013-08-04 19:21 谦行 阅读(107599) 评论(27) 推荐(47) 编辑

1 2 下一页