web前端的一些不为人知的冷知识点_CSS篇整理

时间: 2018-05-28阅读: 946标签: 前端

关于css的恶作剧

相信你看完以下代码后能够预料到会出现什么效果。

*{
    cursor: none!important;
}


简单的文字模糊效果

以下两行简单的css3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool!

p {
    color: transparent;
    text-shadow: #111 0 0 5px;
}

 

垂直居中

有好多次博主都有这样的需求,垂直居中显示某个div,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。

当然你可以将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现,但此种实现往往会因为display:table而破坏整体布局,那还不如直接用table标签了呢。

下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。

.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

相比而言,水平居中要简单得多,像上面提到的text-align:center,经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度大于容器宽度时此法失效。

如法炮制,利用left和transform同样可实现水平居中,不过意义不大,毕竟text-align和margin差不多满足需求了。

.center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}

 

多重边框

利用重复指定box-shadow来达到多个边框的效果

/*CSS Border with Box-Shadow Example*/
div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

 

实时编辑CSS

通过设置style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者,逆天也!

<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
        	body { color: blue }
        </style>
    </body>
</html>

 

创建长宽比固定的元素

通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的,这在响应式页面设计中比较有用,能够保持元素不变形。

<div style="width: 100%; position: relative; padding-bottom: 20%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
        this content will have a constant aspect ratio that varies based on the width.
    </div>
</div>

CSS中也可以做简单运算

通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的。

.container{
	background-position: calc(100% - 50px) calc(100% - 20px);
}

原文地址:http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html 

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/827

关闭

学好前端的 6 点建议

最近接触了很多前端的小伙伴,和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。在交流中我发现了一个很有意思的现象,大家同样是入门不足三年,一部分感觉前端是一个很有前途的职业,甚至一部分两年经验的前端同学透露年薪已经30W以上了

web前端的一些不为人知的冷知识点_Js篇整理

Js篇整理:生成随机字符串、整数的操作、重写原生浏览器方法以实现新功能、关于console的恶作剧、万物皆对象、If语句的变形、禁止别人以iframe加载你的页面、console.table

互联网前端现在这么多人,做前端还有出路吗?

前端能不能一直做,做前端能走多远?以后前端领域会不会被其他新的技术取代?又或者是面临着前端行业的萎缩,导致自己的失业?所有很多人对前端产生了一种所谓的认为:前端不能一直做下去。

转行web前端,需要哪些工具和需要学习什么?

今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水。

Web前端的路该怎么走?

在一个相对公平的环境下,想要超越他人,只要能够完成他人完成不了的事情就可以了。大多数非计算机背景前端从业人员对于JS的系统学习是很难坚持下来的,时间长,收益缓慢,但是,如果你坚持下来了,你就超越了这些人

前端,我为什么不要你

一方面是各种公司争相聘请,导致价格高的浮躁;一方面是从业者大多经历尚浅,浅到没什么技术积累,没什么项目经验,更可怕的是没什么进取心。这里总结一下,自勉

Web前端体系的脉络结构

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。

什么是前端? web1.0、web2.0时代的网页制作,前端开发都有哪些内容等

前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境

剖析前端开发中的防抖和节流

节流是保证在一段时间内,代码只执行了一次。防抖其实和节流有些类似,毕竟它们的最终目的都是如出一辙。防抖是在一段时间结束之后,才触发一次事件。

企业需要什么样的Web前端人才?

随着互联网行业的发展,web前端工程师成为一个很吃香的职业,只要你足够优秀就能收获高薪?企业需要什么样的web前端人才?首先来看看根据对互联网企业对Web开发工程师的招聘要求分析得出结果:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!