随笔分类 - css3
摘要：1、使文字不换行 white-space: nowrap; 值描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白
阅读全文
摘要：使用scoped后，局部样式，不会影响到全局样式 如果想在使用了scoped不污染全局样式的情况下，修改局部组件的样式，可以使用深度选择器 less中一般使用 >>> 或 /deep/ scss中一般使用 ::v-deep
阅读全文
摘要：4导入sass文件 sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。 1 sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@im
阅读全文
摘要：在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
阅读全文
摘要：http://blog.csdn.net/jerryvon/article/details/8755548整理了一些其它动画，用的模板为flip模板，只不过CSS3不同[css]view plaincopyprint?/*****************淡入淡出*******************...
阅读全文
摘要：http://caibaojian.com/flexbox-guide.html来自CSSTricks上的一个教程，原文为：A Complete Guide to Flexbox。文中详细的介绍了新版的弹性盒子的相关属性，并且给出了几个使用例子。是新手入门flexbox的一个优秀教程。当然里面的内容...
阅读全文
摘要：box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(...
阅读全文
摘要：前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGB...
阅读全文
摘要：http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html清除浮动是连续浮动元素之后的必备工作，在工作中我做到需要清除浮动的地方都要清除。比如，我在瑞星的项目中一直这样使用：.clear:after{content:'\0...
阅读全文
摘要：The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the f...
阅读全文
摘要：今天的样式调的纠结，一会这边一会那么把jquery博客折腾的头大,浏览器兼容性。晚上闲着收集一些常见IE6中的BUG3像素问题及解决办法当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高。当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗
阅读全文
摘要：1.谷歌Google Web Designerhttps://www.google.com/webdesigner/这个工具不能在xp上运行，可以在win7 win8上运行http://www.portablesoft.org/google-web-designer/2.Adobe Edge Animate这个工具不能在xp上运行，可以在win7 win8上运行http://www.portablesoft.org/adobe-edge-animate/3.TopStylehttp://www.portablesoft.org/topstyle/
阅读全文
摘要：块元素(block element)一般是其他元素的容器元素块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页
阅读全文
摘要：内联元素是什么意思呢？什么是块级别元素。《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，di
阅读全文
摘要：CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常.文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块
阅读全文
摘要：1. 不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。2. 无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。3. 慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。4. CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写
阅读全文
摘要：Css.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;} UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.Here is what each of those CSS properties is for:o
阅读全文
