第一次写技术博客。写得不好的话，大神们请见谅啊。
前段时间有个搞前端搞得还不错的朋友去面试，被问到了一个问题。就是怎么用一个标签画出一个铅笔状的图形。就像下图这样。
应该很多人都知道怎么不用一个div画个三角形吧？如果实在不知道的话，我这里也可以说一下，就是使用border的特性来画。
可以这样画。
上面这个的样式代码如下
content: '';
display: block;
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: red blue green #000;
position: absolute;
right: -40px;
而铅笔那边的三角形的话只要把除了黑色那边的颜色保留，其余都改成transparent就可以出现那个半边三角形了。
所以一个标签画铅笔怎么画？就是用伪类:after来实现的。其实这道面试题就考这两个点。一个就是看你会不会用伪类，还有一个就是看你会不会用border画三角形。
具体代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.pencil{
position:relative;
width:40px;
height:40px;
background-color:#000;
}
.pencil:after{
content:'';
display:block;
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent #000;
position:absolute;
right:-40px;
}
</style>
</head>
<body>
<div class="pencil"></div>
</body>
</html>
而:after是跟在后面的标签，:before是跟在前面的标签。
上面的代码要注意的就是那个 content:' ';
这个是可以在:after伪类里可以填入文本的东西。但是如果你要它显示，但是又没有文本的话，就跟我一样设置它为一个空格。但是不能把它去掉。去掉的话什么都看不到.
这东西还是有个限制条件的，就是使用在input等不是容器的标签下是不起任何效果的。一定要是div之类的能够存入标签的标签才可以。
但是很多人可能会觉得这个有什么用，写多一个标签的话就可以实现的功能，为什么非要搞那么麻烦。
确实啊，如果这个伪类复用的地方不多的话，我不建议使用。但是很多地方都引用到的话，我建议还是可以使用的，这样写会变得很便利。引用一个class就可以直接附带一个标签在后面这样的感觉不是很方便吗？
就像现在很多人在做页面的时候很喜欢用float:left和float:right。这个浮动又不占据高度，所以很多人在后面添加东西之后，都到上去了，还被浮动的内容给遮盖了。这个导致很多人还要再去外部加个DIV，给个高度。这个很麻烦啊。怎么做才能方便点呢？
这里就可以使用伪类来解决浮动不占据高度的问题。
.clearfix:after,
.clearfix:before{content:" ";display:table;}
.clearfix:after{clear:both;}以上代码在很多人的博客都能看到，而且很多种写法，我这只是其中一种我用得比较多的写法。这个的原理就是然后前后两个伪类都设置为display:table;然后:after清除浮动，就不会影响到后续的代码。不会让后面的跟着浮动。
引用的话就只要在使用了浮动的标签外面div添加一个clearfix的class，就可以解决浮动不占高度的问题了.这个非常常用。
clearfix这个应该很多人都听过，感兴趣的可以去百度一下。
对于前端大神来说，我说的这些都是皮毛啦。对于前端新手来说，希望能够学习到其中的一些有用的知识。
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
