webstorm个人常用快捷方法笔记

清空所有默认间距: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>....

div.box$*n

清除盒子浮动方式1:在第一个盒子的css最后使用伪元素选择器:

.box::after{
/*设置添加的子元素内容为空*/
content:"";
/*设置添加的是块级元素*/
display:block;
/*设置元素的高度为0,不占用空间*/
height:0;
/*设置元素为不可见*/
visibility:hidden;
/*设置清除浮动*/
clear:both;
}


.box1{
      *zoom:1;
}

清除盒子浮动方式2:

.box1{
  overflow:hidden;
  *zoom:1;
}
/*overflow可以裁剪超出范围的内容,也可以用于清除浮动,也可以用于防止嵌套盒子的被顶开*/