CSS
文章平均质量分 69
timtimup_KSM
以梦为马,仗剑天涯
展开
-
css3 calc():css简单的数学运算-加减乘除
css3 calc():css简单的数学运算–加减乘除多好的东西啊,不用js,一个css就解决了。.box{border:1px solid #ddd;width:calc(100% - 100px);background:#9AC8EB;}3栏等宽布局。.box{margin-left:20px;width:calc(100%/3 - 20px);}.box:nt转载 2015-08-26 16:33:22 · 16457 阅读 · 0 评论 -
无用的css样式怎么去清除?
最近项目赶得紧,常常拿以前的项目的stylecss移植过来(公司项目速度要求),这样子,其实重用项目代码没什么不好,但是多出很多无用的CSS样式,作为一名前端开发者迷,当然要想出办法怎么清除多余没有用到的CSS啦,下面这边文章是转载的。一些无用的css样式怎么去清除? 在我们写样式的时候,页面的CSS在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些转载 2015-09-24 16:54:21 · 4819 阅读 · 0 评论 -
关于reset.css的疑问:为什么一定要重置浏览器样式?
自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表。我现在想想都不知道第一次是从哪儿弄来的一个重置样式表。快五年了,好像从来都没有质疑过关于重置样式表的内容。 这样一个样式表里往往会有一大段对“浏览器样式”的清除与重置。刚开始做前端的时候一度感觉,能写出来这么一个样式表似乎很酷、很牛;做时间久了,也自己开始针对不同项目写自己的reset.css转载 2015-10-27 10:01:31 · 1716 阅读 · 1 评论 -
让网页图片变灰色的三种方法
我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如Photoshop很容易把你的彩色图像变成灰度。甚至有选择调整颜色深度和色调。不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异。1、CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。 现在,过滤转载 2015-11-13 11:24:34 · 848 阅读 · 0 评论 -
在div里到包含多个同样的标签时,CSS样式表名,是用nth-child好还是给每个标签起一个类名好?
我自己的经历,仅仅作为参考。 用nth-child好还是给每个标签起一个类名好? 在公司写一个项目,当时刚刚学CSS3里面的高级选择器nth-child,打算把其用到项目上,也就是当div里面有多个相同的标签时,用nth-child(n)来控制其样式,当时原创 2015-11-12 10:29:44 · 3171 阅读 · 0 评论 -
去掉div的滚动条的这个有用哦,CSS3滚动条-webkit-scrollbar简介~
最佳实践:仅在Chrome支持webkit现在支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。如果你想跳过介绍,直接看demo的话,请点击demo滚动条是一个伪元素,可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭,只按照用户自定义的css信息进行渲染。比如:::-webkit-scrollbar {w转载 2015-11-11 16:17:09 · 5441 阅读 · 0 评论 -
display:inline-block是什么意思
很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章,很不错,综合一下,记录下来。display:inline-block简单来说就是将对象呈递为内联对象,转载 2015-11-07 17:47:58 · 2359 阅读 · 0 评论 -
CSS 类名的单词连字符:下划线还是连接符?
本文的部分内容整理自我对此问题的解答: 命名 CSS 的类或 ID 时单词间如何连接? – 知乎问题CSS 类或 ID 命名时单词间连接通常有这几种写法:驼峰式: solutionTitle、solutionDetail用横杠(连接符)连接: solution-title、solution-detail下划线连接: solution_title、solution_detai转载 2015-11-05 11:09:46 · 1087 阅读 · 0 评论 -
使用Chrome Audits功能清理无用的css
Google chrome在“开发者工具”中提供了类似 dust-me 的冗余css检测功能。 chrome用户可以在Audits面板内使用这个功能: 选择 Web Page Performance 选框并点击Run,会得到类似如下格式的提示Remove unused CSS rules (185)35.39KB (51%) of CSS is not used by the current转载 2015-09-25 11:07:22 · 12851 阅读 · 0 评论 -
CSS选择器的浏览器支持
CSS选择器的浏览器支持CSS1 CSS2 CSS 3 :hover 在IE6中只有a元素可用。E:empty 貌似在webkit核心浏览器中有些小bug。如果这个bug依然存在,不太确定如何测试。IE6不支持.class1{}.class2{}双类选择器。IE8注意事项:E[attr]选择器在值为空的时候或者写错的时候,将不会生效;IE转载 2015-09-09 09:14:42 · 431 阅读 · 0 评论 -
移动设备显示尺寸大全 CSS3媒体查询
@media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}@media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}@media screen and ( min-width: 359px){/*360px显示屏样式 索转载 2015-08-28 10:34:34 · 2671 阅读 · 0 评论 -
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。一.旋转 rotate用法:transform: rotate(45deg);共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。二.缩放 scale用法:transform转载 2015-08-27 09:37:45 · 4067 阅读 · 0 评论 -
CSS reset的重新审视 – 避免样式重置
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=758一、CSS reset(CSS重置)的历史根据淘宝射雕的叙述,最早的一份CSS reset来自Tantek 的undohtml.css,很简单的代码,Tantek 根据自己的需要,对浏览器的默认样式转载 2015-11-01 18:02:12 · 607 阅读 · 0 评论