随笔分类 - css
摘要：在CSS中我们会用到position来进行布局，常用的就是三种relative，absolute，fixed relative就是我们常说的相对定位，相对于在正常文档流中的位置进行定位，它不会脱离正常的文档流，所以在进行定位以后，之前的位置也会保持占有状态。 我们可以看到文字和黄色div之间有很大的
阅读全文
摘要：今天在做一个项目时，接触到了这个属性。再一次见识到了CSS的强大。 先来看看兼容性 很遗憾IE全军覆没了，但是其他浏览器还是可以的。接下来我们来看看他有哪些厉害之处。 blur()，blur功能函数就是来设置图片的模糊程度。 值就是模糊半径，效果图如下。 brightness():就是通常所说的亮度
阅读全文
摘要：:after 和 :before其实已经比较熟了，但是一直只是会用，今天来做个总结。 首先说说:after 和 ::after，这两个其实区别不大，个人感觉，只是官方为了区别伪类和伪元素。有一个冒号的一般代表伪类如:hover。两个的代表伪元素。所有浏览器都支持一个冒号或者两个冒号，也就是说:aft
阅读全文
摘要：今天看了outline这个属性，运用到了做双层边框上，仔细看了一下这个属性怎么用。要说outline感觉就是和border是一对兄弟啊！ 看他的用法确实是这样，但是他和border还是有点区别的 1 outline产生的“边框”不占据空间，不会影响布局 2 outline不能和border一样分别单
阅读全文
摘要：这本书是魔法哥的译著，也是买了有很长时间了，现在开始慢慢阅读，确实比较新颖，包含了很多css方面的小tips。来一点点的做个总结。 半透明边框的实现： 关于半透明我们可能会想到使用rgba,opacity等等，对于背景提供回退方案还是比较好做的，要么利用一张单像素半透明图片，要么回退到实色。但是对于
阅读全文
摘要：line-height：定义文本行基线之间的距离 说到line-height就不能不说到行框中各个高度是怎么计算的，这里引用css权威指南中的图 文本行中的每个元素都会生成一个内容区，这由字体的大小确定。如果不存在其他因素（如line-height）那么这个内容区的高度就是行内框的高度。而行框的高度
阅读全文
摘要：目前越来越多的浏览器都已经支持使用flex来，进行布局了。当然使用flex布局可以解决很多传统布局方式带来的问题，比如居中问题。 这里有阮一峰老师的中文教程： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tu
阅读全文
摘要：关于css完全居中的文章，网上已经很多了。这里主要记录一下思路，方便记忆，最后附上所有的参考链接。 1 水平居中 1 内部是内联元素，那么我们直接可以在父元素上面设置，text-align:center。 2 有多个内联元素，排成一排，实现水平居中。 html代码： css代码： 那么这里就实现了，
阅读全文
摘要：今天又来一了一篇关于3D效果的文章，教你打造自己的3D旋转盒 首先还是希望大家自己看看关于transform这个属性的相关特性作用，张前辈已经写了详细的教程，直接附上 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-pers
阅读全文
摘要：有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用
阅读全文
摘要：昨天看见了一篇文章关于用纯CSS实现文本滚动，在这里跟大家分享一下。 首先把效果图贴给大家 根据效果图我们很容易发现肯定是要用到3D转换的，如果对这个还不是很了解的可以先看看下面的文章 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-trans
阅读全文
摘要：一.首先介绍一下px px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！ 可但是！但可是！如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导
阅读全文
摘要：http://gold.xitu.io/entry/57139c9d128fe1006cff2424 css中垂直居中 http://www.labazhou.net/2016/01/22-essential-css-recipes/ CSS 的 22 个必备技巧 http://web.jobbol
阅读全文
摘要：关于calc()这个css函数，有太大的作用了，相信熟悉css的朋友们，对这个函数都不会陌生，如果你属于这一类，那么你可以跳过了，因为这篇也没什么很重要的，只是对它的一些基本的介绍。 好了我是怎么开始接触到这个属性的呢，一定是当时遇到了什么问题，然后才发现了有这种方法。见下图： 那么由于要实现这种效
阅读全文
摘要：alt和title 我们都用过img标签，相信也都知道有title和alt这两个属性，笔试时有时会考到，在这里简单记录一下，主要是怕混淆。 alt：是当图片不能正确加载出来，进而显示的文字（图2） title：是当鼠标悬停在图片上，出现的提示文字。（图1） 图1 当我们把图片的路径换为错误的路径时。
阅读全文
摘要：在html中有form表单元素，而form表单最大的一个作用就是与后台服务器交换数据。 常见的表单元素类型： 输入型：text password textarea 选择型：radio select checkbox file 按钮 ：submit button reset 隐藏：hidden 当然还
阅读全文
摘要：在一张页面中我们经常会看见一些小的图标，这些图标小巧、意义明确，总之非常有用，难道他们是一些小图片吗。不错有的的确是小图片，但是在这里我将介绍另外一款工具那就是iconfont,我们可以把这些图标当做一个个文字来对待，因此我们可以调整它的大小和颜色。下面我来介绍一下如何使用。 iconfont有两种
阅读全文
摘要：今天有个学妹问我我要在一张图片上还要显示一些文字怎么办，我说用背景图片来做，后来学妹碰到了各种奇葩问题，搞得我也一时给弄糊涂了，于是又痛下决心再次看了一下background这个属性。 相信大家对这个属性有哪些属性值，应该是再熟悉不过了，如果还有不清楚的可以点击这里，进行查看。基本的我就不再进...
阅读全文
摘要：1 垂直的两个DIV.top{width: 100px;height:100px;background: red;margin-bottom: 20px}.bottom{width: 100px;height:100px;background: green;margin-top: 40px} ...
阅读全文
浙公网安备 33010602011771号