清空所有默认间距:http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
ctrl + / : 单行注释
ctrl + shift + / : 块注释
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+空格 代码提示
ctrl+alt+L 格式化代码
ctrl+alt+T 包裹添加标签
fs: font-style
pd:padding内边距
mg:margin外边距
fwb: font-style:bold 加粗
fz30:font-size:30px
tac:text-align:center文字行内居中
dib:display: inline-block;设置为行内块级元素
li变成圆的:border-radius: 50%;
清楚图片之间间隙:vertical-align:top;
鼠标悬停变为手指:cursor:pointer;
兼容写法:
- scroll家族:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
margin:0 auto→让盒子居中
让图片居中:如果图片的宽度大于父元素的宽度,不能使用margin:0 auto或者text-align:center让图片居中,可以用margin:0 -100%(父元素必须设置text-align:center;)
font:bold italic 10px "微软雅黑" →size,family不能省略,这两个属性要放在这行的最后,size要放在family前面
在css的body{}中写bg+→background:背景颜色 背景图片 平铺方式 关联方式 定位方式→背景的缩写连写
ul>li*n>....
<!--按tab快速生成无序列表-->
div.box$*n
<!--生成class参数由1顺序递增的标签如下-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
清除盒子浮动方式1:在第一个盒子的css最后使用伪元素选择器:
.box::after{
/*设置添加的子元素内容为空*/
content:"";
/*设置添加的是块级元素*/
display:block;
/*设置元素的高度为0,不占用空间*/
height:0;
/*设置元素为不可见*/
visibility:hidden;
/*设置清除浮动*/
clear:both;
}
<!--此时IE6不兼容,解决方法-->
.box1{
*zoom:1;
}
清除盒子浮动方式2:
.box1{
overflow:hidden;
*zoom:1;
}
/*overflow可以裁剪超出范围的内容,也可以用于清除浮动,也可以用于防止嵌套盒子的被顶开*/
