水中熊的博客

规范的命名也是Web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义了两个div，一个id命名为“div1”，另外一个命名为“News”，肯定第二个比较易读，而且搜索引擎抓取率要高，在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名！ .navMenuRedButton 骆驼命名发法 .NavMenuRedButton 帕斯卡命名法

以下是比较稳妥的清除浮动的样式，只要在浮动的父元素的class加上clearfloat，即可实现。不过个人还是喜欢直接加上overflow:hidden;或是直接使用flex布局，简单，方便！/* * 清除浮动代码 * 其中clear:both;指清除所有浮动； * content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content

CSS 3D++原理++ CSS 3D并非真的3D，只是利用计算的方法，借由浏览器的高效能，在2D的空间绘制一个3D的图形，就像我们拿张纸，用铅笔在上头画个正立方体之类的。 3d场景的每一个面就是一个div。首先确立好中心点，然后通过设置每个div的css属性（即旋转+位移），将其设置到指定的位置，这样，就能画出各种立方体。 ++属性++transform 该属性能让你修改 C

以下是毛玻璃效果.blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px);

3px留白说明：块级元素包含换行显示或空格分隔的情况下的行内块级元素（inline-block）会有间距，右边会有3px的留白，如果是空行内元素或是图片，右部和底部会同时有3px的留白。解决方案：推荐：父元素加个 ==font-size:0==，子元素在单独定义字体大小，这样就可以同时把下、右间隙都干掉。其他的例如 将行内块级元素写成一行、闭合标签换行、magin负边距、letter-spaci

问题：在不同浏览器中，input里面的输入光标大小表现形式却大不相同，具体的如下：IE：不管该行有没有文字，光标高度与font-size一致。FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。* 该行无文字时，光标高度与line-height一致；该行有文字时，光标高度从input顶部到文字底部(这两种情况都是在有设定line-heig

盒子模型（margin&padding）margin是外边距，padding是内边距。margin变了，border和里面的content还有padding作为一个整体一起都动了。padding变了，border和外面的margin不动，就content动了。margin是块与块之间的距离，padding是单个块内内容与边框的距离。只是padding，border的默认值是0。浮动

今天有人问我一个奇葩的问题，从来没遇到过，搞了半天才知道原因。事件起因：在一个div里放一个img，但下方会出现一小块空白，他想去掉。事件经过：当时是以为是边距的简单问题，就过去通过chrom调试，调试了半天发现，当内外边距都为0时，下方还是会有3px的空白，搞不清楚只好上网搜索一下，奥！！！！！原来是浏览器解析问题。事件结果：因为img是内联元素，div是块元素，浏览器解析时会在im

css完全居中一width: 50px;height: 50px;background-color: #000;position: absolute;margin:auto;left:0; top:0; bottom:0; right:0;css完全居中二width: 50px;height: 50px;background-color: #000; positio

今天为了写一个简单的样式，研究了半天，图如下：方法其实很简单，但中间尝试了很多，特记录下来重要的东西。首先单看图片，发现中间这块使用了两个css的三角形，一块在左边为灰色，一块在右边为白色，写下了如下代码：无标题文档.div0 { width: 600px; height: 34px;}.div1 { width: 250px; height: 34px;

1.、、短引用、长引用、2.先计划好网页结构，、、、、、...3.css最开始要重置标签 body,div,p,ul,li,dl,dt,dd,h1,a,img{margin:0; padding:0;}                                  img{border:none;}4.为了提升网页的用户体验，页面背景先加载小图片，这样背景加载速

伪类：CSS伪类是用来添加一些选择器的特殊效果。    （1）a:link {color:#FF0000;} /* 未访问的链接 */             a:visited {color:#00FF00;} /* 已访问的链接 */             a:hover {color:#FF00FF;} /* 鼠标划过链接 */             a:active

opacity 属性是css3的属性，是指颜色的不透明度，也可以实现透明效果，1为完全不透明，0为完全透明 例子：opacity: .5;        rgb() 定义了颜色的红绿蓝值  例子：rgb(0,0,0); //表示黑色rgba() 表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数，可以让指定的颜色透明化。例子：rgb