CSS趣味见闻

日期:2015-3-4 23:51 | 标签: CSS 趣味见闻 | 阅读:929

这里记录我平常使用CSS时遇到的好玩的东东,当然,如果您见得多了话,也就见怪不怪了。

继承与非继承属性

  1. 非继承
    display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
  2. 所有元素可继承
    visibility和cursor。
  3. 内联元素可继承
    letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  4. 终端块状元素可继承
    关于什么是终端块状元素。请参考这个,text-indent和text-align。
  5. 列表元素可继承
    list-style、list-style-type、list-style-position、list-style-image。
  6. 表格元素可继承
    border-collapse。

元素放大缩小

此方法常用于给字体放大缩小,

  1. transform scale,以元素中心为定位点,可以使用transform-origin改变定位点
  2. zoom,以元素左上角为定位点

酷炫效果

  1. 文字颜色渐变
    div{
     font-size: 30px;
     background: -webkit-linear-gradient(top,#fc0,#f30 50%,#c00 51%,#600);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
    }
    

js获取CSS属性

为什么这个不一定对呢?

document.getElementById("eleId").style.padding;

其实,通过该方法获取元素样式前提有2个:

  1. 该元素的HTML标签有style属性设置了对应的内联样式
  2. 该属性在获取之前在其它地方有通过JS动态设置过。

保险做法:

// IE
document.getElementById('eleid').currentStyle;
// 非IE
var cstyle=window.getComputedStyle(document.getElementById('eleid'), '伪类,不是则置null');
// 获取属性值,IE使用getAttribute(驼峰写法)
cstyle.getPropertyValue("padding");

table collapse中border覆盖规则

原则很简单,上边覆盖下边的,左边覆盖右边的,可以用来实现不同单元格显示不同边框。
参考链接:https://www.web-tinker.com/article/21297.html

css类加载方式

从右至左加载,若类中中有重复样式,则覆盖。想起了js中的

var a = b = 1;

这个也是从右往左执行哦。

图片格式

  1. SVG Sprite svg sprite,不仅可以随意改变图标大小不会产生锯齿,还能随心所欲的填充颜色。
    参考:http://web.jobbole.com/85234/
  2. png8&&png24 IE6完全不支持PNG,IE7 IE8支持PNG不完全,有时候会出现非常诡异的情况,如图片黑边啦....
    参考: http://www.cnblogs.com/hnyei/p/4620250.html

http://blog.csdn.net/sensation_cyq/article/details/50999733

img底部有空白?

解决办法为

  1. line-height设置为0
  2. font-size设置为0,缺点是无法图文混排
    参考此贴:https://www.zhihu.com/question/21558138

垂直填充

position: absolute;
top : 5%;
bottom: 5%;

inline-block与空格

增加父元素,并设置如下样式:

font-size:0px;

缺点是子元素得分别设置字体大小样式。 寻求更多方法请参考:
http://www.w3cboy.com/post/2015/03/%E8%B0%88%E8%B0%88css%E5%B1%85%E4%B8%AD/
张鑫旭博文:inline-block-space-remove-去除间距

display:table

一般情况下,用这个属性还不如直接使用原生表格,网上多见于垂直居中的案例之中,但是如果你偏要顶格对齐呢,很简单,直接:

vertical-align:top

这里记录一则要点:vertical-align该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,更多垂直居中的方式可以参考:
http://blog.csdn.net/wolinxuebin/article/details/7615098

清除浮动

使用以下代码,只需要小小的添加一个class就可以清除浮动

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }

很多人可能知道以上段子,但是原理是啥呢?详情如下:

  1. display:block 使生成的元素以块级元素显示,占满剩余空间。
  2. height:0 避免生成内容破坏原有布局的高度。
  3. visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互。
  4. 通过 content:"."生成内容作为最后一个元素,有些版本可能content 里面内容为空,其可能在Firefox下产生额外的空隙。最高级的方法是使用content:"\200B";叫做零宽度空格,这个字符本身是不可见的,上述的visibility:hidden可以忽略掉了。
  5. font-size: 0, 触发IE hasLayout,目的就是隐藏该元素,使用其它属性如:zoom:1、line-height:0都是没有问题的。

如何不被浮动元素覆盖

display:absolute;可以解决问题。

z-index

有人问,z代表什么意思?因为是层叠上下文,z的解释该是z轴吧,这个属性大部分决定了用的看到的是哪个元素。注意:只是大部分,首先了这个属性只有在position为relative、absolute、fixed的情况下才有用,此外这个属性是非继承的,无语的是某些属性还会影响它,如overflow、transform、flex...要挖掘真相的,此外,z-index值为auto和0的区别是什么鬼?原来z-index:0所在的<div>元素是层叠上下文元素,而z-index:auto所在的<div>元素是一个普通的元素...建议参考下张鑫旭的文章:
深入理解CSS中的层叠上下文和层叠顺序

CSS3循环动画

简单的设置animation-direction属性值为:alternate 就行。 此外,animation-delay可以为负数哦,这样就可以指定动画开始位置了。

宽度无效

  1. 用table-cell试试?

优先级

从高到低排列为:

当然,也有例外的规则,如出现!important,除了不得已MDN不建议使用。其它注意点

参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

12个鲜为人知的css属性用法

英文原文:
12-little-known-css-facts-the-sequel
中译:
http://hiluluke.cn/2016/01/10/css-facts/

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式