随笔分类 -  css

摘要：平时为图片添加半透明遮罩效果，我的做法如下：利用标签i实现背景半透明遮罩。当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6)为html结构添加如下css样式：/* 利用标签i实现背景半透明遮罩, 兼容性不好 */.opacity-bla... 阅读全文

摘要：Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。 阅读全文

摘要：杜绝低效CSS选择符的影响，不仅要考虑页面加载时间，也要考虑用户交互时如何使用样式进行表现。 阅读全文

摘要：display:box可以做水平居中和垂直居中。也可以实现经典的n列布局 阅读全文

摘要：继承的思路是将一个复杂且包含变化的类，拆分成几个复杂但稳定的子类。首先明确一个抽象的父类，父类有着几乎所有的方法和属性。但使用继承的话，任何一点小的变化也需要重新定义一个类，很容易引起类的爆炸式增长，产生一大堆有着细微不同的子类。 组合的思路是将一个复杂的类分成容易产生变化的部分和相对稳定的部分，将容易变化的部分拆分出去，每一种可能的变化设计成一个个单独的类，而相对稳定部分设计成一个主体类，这样，将一个复杂的类拆分成几个简单的类，类之间没有继承关系，这遵循了面向对象设计的“单一职责”原则。将那些容易变化的类的实例赋值给主体类作为一个属性，这样就实现了类的组合。用组合方式，可以大大减少类的数量。 阅读全文

摘要：CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。 阅读全文

摘要：浮动、定位、盒模型。外边距叠加、清除浮动 阅读全文

摘要：转载http://paranimage.com/css-overflow-attribute/检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。Visible如果你不设置overflow属性，则默认的overflo 阅读全文

摘要：转载http://css-tricks.com/795-all-about-floats/All About Floatsby: Chris CoyierJul 8 2009119What is "Float"?Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around t 阅读全文