div+css3笔记

下列快捷输入在phpstrom、webstrom、subline等中使用。

1、快速写入文档类型

输入：！+tab。即可完成以下代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

2、快捷输入ul下多个li

例：输入5个li

快捷输入为：ul>li*5+tab。即可完成如下代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

 3、h1建议使用在logo图片处

理由：可以增加收索引擎的权重，网络爬虫会对该语句非常重视。

4、快捷输入多个div

.fahter+.son+tab即可直接生成

<div class="father"></div>
<div class="son"></div>

5、快捷输入width、height

w100px+tab即为width：100px;

h100px+tab即为height：100px；

6、after伪类清除浮动

.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； 
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。 
display: block; <----加入的这个元素转换为块级元素。 
clear: both; <----清除左右两边浮动。 
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已； 
line-height: 0; <----行高为0； 
height: 0; <----高度为0； 
font-size:0; <----字体大小为0； 
} 
.clearfix
 { *zoom:1;} 
<----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的
话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。 

话说回来，你这段代码真是个累赘啊，这样写不利于维护。 
只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。 
如：
<div class="head clearfix"></div>

清除浮动简介版：
.clearfix:after {
   content:"\200bB";
   display:block;
   clear:both;
   height:0;
}
.clearfix {*zoom:1;}

　　解释下:content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。

posted @ 2016-02-10 08:13  凌步  阅读(605)  评论(0)    收藏  举报