随笔分类 - CSS
记录CSS的难点和趣味
摘要：1、不同的浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。 碰到频率：100% 解决方案：初始化CSS的默认样式，*{margin:0;padding:0}。也可以使用其他网站的初始化代码。 备注：这个是最常见的也是最
阅读全文
摘要：CSS性能优化 1、衡量属性和布局的消耗代价； 2、探索W3C的性能优化新规范； 3、用测试数据判断优化策略。 慎重选择高消耗的样式 1、box-shadows; 2、border-radius; 3、transparency; 4、transforms; 5、CSS fitters（性能杀手）。
阅读全文
摘要：什么是CSS预处理器？ CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 什么是Sass？ Sass是一门高于CSS的元语言，它能用来清洗地、结构化地描述文件样式，有着比普通CSS
阅读全文
摘要：原文地址 在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰
阅读全文
摘要：1、制作如图三角形效果： 步骤一：将右侧盒子设置为相对定位 步骤二：在右侧盒子里面新建个子盒子，设置宽高相等，为正方形，绝对定位 步骤三：将绝对定位的盒子用CSS3旋转属性旋转 2、制定如图的序列号 步骤一：利用CSS中的伪类元素在父元素前插入另一个元素，并设置一个计数器和相关样式 步骤二：在父元素
阅读全文
摘要：1、解决搜索框和按钮不对齐的方法 vertical-align属性只有两个元素设置为display：inline-block才有效 2、盒子莫名的分行现象 问题描述：比如父盒子宽度为960px，两个左右子盒子宽度分别为500px和440px，设置display：inline-block或者float
阅读全文
摘要：flexbox详解 flexbox的出现是为了解决复杂的web布局，因为这种布局方式很灵活。容器的子元素可以任意方向进行排列。此属性目前处于非正式标准。 flex布局模型不同于块和内联模型布局，块和内联模型的布局计算依赖于块和内联的流方向，而flex布局依赖于flex directions.简单的说
阅读全文
摘要：CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 1、如何才能让DIV的宽度跟随浏览器窗口变化而变换呢？在CSS3中我们只要使用一个b
阅读全文
摘要：CSS3多列布局columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样
阅读全文
摘要：CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获
阅读全文
摘要：CSS3变形篇 旋转rotate（） 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 例子： 扭曲skew（） 扭曲skew
阅读全文
摘要：设置背景图片的原始起始位置，语法为： 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。 例子： 背景图片的裁剪，语法为： 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip
阅读全文
摘要：@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： 例子：
阅读全文
摘要：text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法： 但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hi
阅读全文
摘要：CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。首先来了解下线性渐变的语法： 第一个参数是指定渐变的方向，可以用角度的关键词或英文来表示。第一个参数省略时，默认为180deg，等同于to bottom： 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色
阅读全文
摘要：CSS3图片边框 顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似，语法规则：
阅读全文
摘要：属性选择器 结构性伪类选择器 UI状态伪类选择器 CSS其他选择器
阅读全文
