css参考手册4.2.4最新版 by飘零雾雨

Tags：css参考手册,css3.0参考手册

css参考手册4.2.4由飘零雾雨编写，前端开发人员必备手册，西西曾经学习过一段时间，感觉忽而容易，忽而神奇，CSS参考手册有关于CSS3.0参考手册以及低版本兼容2.0版本，CSS参考手册下载版权所有者为飘零雾雨。本手册的部分内容参考了苏沈小雨版的CSS2.0手册及World Wide Web Consortium (W3C)公开的网络文档。

说明：

本手册针对的是已有一定网页设计制作经验的读者。其目的是提供最新的样式表内容的快速索引及注释。所以对于样式表的基础知识，在此仅简单介绍，恕不赘述。 

本手册的升级信息与版权声明请参阅关于本手册页面。 

什么是层叠样式表：

CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 

CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。 

CSS2.1是目前被使用最广泛的版本，而目前还在开发中的CSS3具有更吸引人的特性。 

本手册除了CSS2.1外，还涵盖了大部分的CSS3内容。但由于CSS3尚未定稿，不可避免会出现一些变动。 

样式语法：

Selector {property:value} 

如何将样式表加入您的网页：

你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅!important声明。

版本信息 Version Information

CSS参考手册v4.2.4

Update Time: 2017-03-10

补充对兄弟选择符、相邻选择符等的描述和示例；

移除了整个 only-firefox 目录下的属性；

新增了-webkit-overflow-scrolling属性参考；

修复在MAC上chm乱码的问题（感谢 @gucong3000 童鞋）；

修订了热心用户所提的部分 Issues；

补充了calc()兼容性描述；

修复了导航栏出现横向滚动条的问题；

将早期的历史版本变更合并记录，详见更新历史

CSS参考手册v4.2.3

Update Time: 2016-09-01

修订了热心用户所提的部分 Issues；

修订对vertical-align取值的描述；

修订对align-content兼容性表格中对 Firefox 的描述；

CSS参考手册v4.2.2

Update Time: 2016-01-21

关于作者页面新增了本手册的微信交流群二维码；

修复animation类别下部分页面示例中的渐变语法问题；

增加早期Chrome和Safari不支持border-radius取值为<percentage>的描述；

修订对background-position取值为3或4个值时的描述；

更新了Firefox对writing-mode的支持数据；

新增了@supports规则；

新增了unset取值；

CSS参考手册v4.2.0

Update Time: 2015-08-14

新增了text-size-adjust,tap-highlight-color,user-drag参考；

修订了 Transform 模块，并新增了3D相关参考：transform-style,perspective, perspective-origin, backface-visibility；

阅读指引中新增了 语法指引 用于帮助读者轻松看懂语法；

修订了大部分模块的浏览器兼容性列表； 

Bugs和解决方案

如何在IE6及更早浏览器中定义小高度的容器？ 

如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？ 

如何在IE6及更早浏览器下模拟min-height效果？ 

如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？ 

如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？ 

如何解决IE6及更早浏览器下的3像素BUG？ 

如何解决IE6下的文本溢出BUG（江湖匪号：“谍影重重”或“一只猪的故事”）？ 

如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问题？ 

如何解决IE6无法识别伪对象:first-letter/:first-line的问题？ 

如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题？ 

如何解决IE6会忽略同一条样式体内的!important规则的问题？ 

如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题？ 

如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题？ 

如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题？ 

如何解决Chrome在应用transition时页面闪动的问题？ 

技巧和经验

如何清除图片下方出现几像素的空白间隙？ 

如何让文本垂直对齐文本输入框？ 

如何让单行文本在容器内垂直居中？ 

如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？ 

为什么Standard mode下IE无法设置滚动条的颜色？ 

如何使文本溢出边界不换行强制在一行内显示？ 

如何使文本溢出边界显示为省略号？ 

如何使连续的长字符串自动换行？ 

如何清除浮动？ 

如何定义鼠标指针的光标形状为手型并兼容所有浏览器？ 

如何让已知高度的容器在页面中水平垂直居中？ 

如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？ 

如何设置span的宽度和高度（即如何设置内联元素的宽高）？ 

如何给一个元素定义多个不同的css规则？ 

如何让某个元素充满整个页面？ 

如何让某个元素距离窗口上右下左4边各10像素？ 

如何去掉超链接的虚线框？ 

如何容器透明，内容不透明？ 

如何让整个页面水平居中？ 

为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？ 

如何做1像素细边框的table？ 

如何使页面文本行距始终保持为n倍字体大小的基调？ 

标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？ 

以图换字的几种方法及优劣分析 

为什么2个相邻div的margin只有1个生效？ 

如何在文本框中禁用中文输入法？ 

如何解决列表中list-style-image不能精准定位的问题？ 

如何解决伪对象:before和:after在input标签上的怪异表现的问题？ 

如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定义过渡和动画的问题？