摘要：方法一：图片尺寸未知，IE8-不支持CSS部分：DOM部分：方法二：图片尺寸已知，正负margin抵消CSS部分：DOM结构：//margin-top:-imgheight/2方法三：图片尺寸未知，table-cell属性，IE8-不支持CSS部分DOM部分方法四：图片大小未知，背景图片CSS部分D... 阅读全文

摘要：Web安全色产生的原因 什么是Web安全颜色？ 在256色计算机系统上，总能避免抖动的颜色。 Web安全颜色的表示 Web安全色可以表示为RGB值20%，51和十六进制值33的倍数，另外0%和0也是一个安全值。因此，如果采用RGB百分数，要让所有这三个分量都要么是0%，或者是20%的倍数,如：rgb 阅读全文

摘要：前端开发中，我们知道clear属性有none、both、left和right四个值。它们的具体含义如下：none：允许两边都可以有浮动对象；both：不允许有浮动对象;left：不允许左边有浮动对象;right：不允许右边有浮动对象。这里主要讨论both、left和right三个值。要用到的CSS代... 阅读全文

摘要：IFC(inline formatting context),即行内格式化上下文，与之对应的是BFC(block formating context),块格式化上下文，见本博客锋利的BFC一文。它和BFC一样，既不是属性也不是元素，而是一种环境，一种上下文。下面这个链接是w3c关于IFC的描述：ht... 阅读全文

摘要：一、block元素的特点1、处于常规流中时，如果width没有设置，会自动填充满父容器2、可以设置height/width及margin/padding3、处于常规流中时，布局在前后元素位置之间（独占一个水平空间）4、忽略vertical-align二、inline元素特点1、水平方向上根据dire... 阅读全文

摘要：关于CSS中不透明度的设置，除了兼容方面的问题，还有不透明度继承问题，这里只讨论下后者。那么，什么时候会发生不透明度继承问题？当文档结构中有父子嵌套关系的时候，并且父元素有不透明度属性设置时，会发生不透明度继承问题，此时子元素也继承了父元素的不透明度，并且再另外设置子元素不透明度是无效的（如果父元素... 阅读全文

摘要：虽然CSS hack技术有风险，不推荐使用，但还是有必要了解一下。一、什么是CSS hack？我的理解就是针对不同浏览器/不同版本，写相应CSS代码，这一过程叫做CSS hack。二、CSS hack原理由于不同浏览器/不同版本，对CSS的理解会有差异，以及CSS优先级的关系，我们可以据此针对不同的... 阅读全文

摘要：关于CSS选择器的问题，在实际项目中，以及一般的前端面试中会经常遇到。下面对此做一小结，梳理和巩固相关方面知识。（如有不妥之处，还望大家及时批评指正，以免误导他人）一、选择器种类1、id选择器（#myid）；2、类选择器（.myclass）；3、标签选择器（div,ul,span）；4、相邻兄弟选择... 阅读全文

摘要：控制元素隐藏的方式，有display:none、visibility:hidden以及不透明度设置。一、display:none被隐藏的元素，在页面中不占位，空出的位置会被相邻的元素占用。效果图如下：由图可见，div1即绿色部分空出的位子已被div2占用。二、visibility:hidden被隐藏... 阅读全文

摘要：在初学前端的时候，我们会经常碰到各种各样的布局问题，尤其当使用浮动的时候，然而学习了BFC之后，其中的一些怪异现象，也因此成为理所当然，会有一种拨开云雾的快感。下面简单介绍下BFC，究竟什么是BFC，它到底有什么作用和特点？链接：http://www.w3.org/TR/CSS21/visuren.... 阅读全文

摘要：我们在前端布局的时候，会偶尔发现，在具有inline/inline-block属性的元素间存在一小段间隙，网上有些文章说这个间隙是6px，但我觉得应该是一个空格的宽度。这里以inline-block(IE6、IE7不支持，也就是存在兼容问题)为例：下面是一些代码及其相应的效果图：CSS:span{ ... 阅读全文

摘要：我们经常会看到CSS样式属性中外边距margin和内边距padding的各种用法，这里做一个小结，但只简单介绍margin，因为它们的用法大同小异。方法一、margin:10px; //4个外边距都是10px方法二、margin:10px 20px; //上下外边距10px，左右外边距20px方... 阅读全文