每天多懂一点点

当两个或者更多垂直外边距相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。具体的情况有：1.当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加。2.当一个元素包含在另一个元素中时（假设没有内边距或边框将外边距隔开），它们的顶或底外边距也会发生叠加。3.对于一个空元素，其外边距甚至可以与本身发生叠加，如果它碰到另

一、document.formName.item("itemName") 问题问题说明：IE下，可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]；Firefox下，只能使用document.formName.elements["elementName"]。解决方法：统

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。语法：transition ： [ || || || [, [ || || || ]]* transition主要包含四个属性值：transition-property（变换的属性），transition-duration（变换延续的时间），transition-timing-function（在延续时

在css3中transform主要包括以下几种：rotate（旋转）、translate（移动）、scale（缩放）、skew（扭曲）以及matrix（矩阵变形）。语法：transform ： none | [ ]* 也就是：transform: rotate | scale | skew | translate |matrix;none表示不进行变形，transform的这些属性

清浮动早就是个页面布局的大问题了，在网上也有很多关于清浮动的案例。这里我要提到的是一个比较完美的清除浮动的方法，废话不多说，直接上代码：css代码：.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: ".";

placeholder是html5中输入框的一个新的属性（input，textarea）。它主要用于当输入框没输入内容时，给出的默认显示文案，比如说“请输入账户名”等，对于这个属性，不同的浏览器所显示的样式是不一样的，因此就需要统一一下：input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

实现透明的css方法通常有以下3种方式：•  css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.5•  css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.5)•  IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filt

CSS3中的animation与HTML5中的Canvas绘制动画又不同，animation只应用在页面上已存在的DOM元素上。运用animation能创建自己想要的一些动画效果，但是有点粗糙。了解animation之前得知道"Keyframes",我们把他叫做“关键帧”。Keyframes具有其自己的语法规则，它的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称

什么是calc()?calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。calc()能做什么？calc()能让你给元素的做计算

之前在做一个活动页面，里面用到了 input 的 button，写完样式在安卓手机上面测试没有问题，但是在iPhone的Safari中的样式完全变了。在网上搜索了一下，原来是Safari默认添加上的样式。而且不仅仅是button，还有submit，reset。找到原因，赶紧解决，下面献上css代码：input[type="submit"],input[type="reset"],

单行省略：selector{ -o-text-overflow: ellipsis;/*兼容opera*/ text-overflow: ellipsis;/*这就是省略号喽*/ overflow: hidden;/*设置超过的隐藏*/ white-space: nowrap;/*设置不折行*/ width:200px;/*设置宽度*/}多行省略：因为移动端浏览器用

在工作中经常遇到在手机浏览器中浏览网页时，点击页面中的按钮或者是具备点击事件的元素，就会出现一个默认的高亮框，影响整体的感观体验。我们可以用一个简单的css3属性就能加以解决，该属性就是：-webkit-tap-highlight-color举个栗子：对该按钮加上相应的css样式：-webkit-tap-highlight-color: rgba(0,0,0,0);-

浏览器的兼容性一直是个头疼的问题，使用“欺骗”技术可使各个浏览器效果一致，花了些时间整理了各个浏览器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比较全面的记录下Hack，内容包括3部分：媒体查询 hack、属性Hack、选择器Hack，这些Hack已经测试并得到有效运用，有需要的同学可以放心使用，笔者会在以后不断的更新，如果有需要补充或者修改的

CSS优先级是指CSS样式在浏览器中被解析的先后顺序。比较CSS优先级的一种简单的方法就是给不同的选择器分配一个数值。然后，将规则的每个选择器的值加在一起，计算出规则的优先级。但是优先级不是的计算不是以10为基数的，而是采用一个更高的未指定的基数。这能确保非常特殊的选择器（如ID选择器）不会被大量的一般选择器（如类型选择器）超越。不过有时候为了简化，如果一个特定选择器中的数量少于10个，可以以

1.骆驼命名法：第一个字母要小写，后面的词的第一个字母就要用大写。如：#headerBlock2.帕斯卡命名法：每个单词首字母都大写。如：#HeaderBlock3.匈牙利命名法：在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解。如：head_navigation页面模块的常用命名： 头：header        内容：content/c

CSS字体属性简写规则一般用CSS设定字体属性是这样做的：1font-weight: bold;2font-style: italic;3font-varient: small-caps;4font-

不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。慎用 * 通配符。所谓通配符，就是将 CSS 中的所

CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍，看过不少文章， 看到所多的是零碎的CSS布局基本知识，比较表面。看过O'Reilly的《CSS权威指南》，发现里面提到的文档流概念让我很敏感。 可恶的是书中并没有解释文档流是什么东西，或许作者觉得这个太简单了以至于不值一提。但我觉得，这个概念实在太重要了。理解了它，一堆CSS布局的理论都变得易于理解，并且体会到CSS

用css设置webkit内核浏览器的滚动条主要设置以下7个属性：1.::-webkit-scrollbar /*滚动条整体部分，可以设置宽度高度*/2.::-webkit-scrollbar-button /*滚动条两端的按钮*/3.::-webkit-scrollbar-track  /*外层轨道*/4.::-webkit-scrollbar-track-piece  /*内层滚