CSS奇淫巧技

前言

最近在读大神张鑫旭的《CSS世界》,让我对CSS又有了更进一步的理解,也学到一些奇淫巧技,感觉特别有意思,遂记录一下。

1.鼠标悬停,改变图片

在以往的经验中,做此类效果通常使用的方法是通过javascript的mouseover事件或者通过:hover来控制子元素(目标图片)的显示与隐藏来实现,在看完该书替换元素与非替换元素章节介绍后,学习到了另外一种写法。
html:

<img src="i.jpg" />

css:

img:hover::after{
   content:url("2.jpg");
}

2.div方块水平分布

以往的经验要么通过float,要么通过flex布局来实现,今天又学到了另外一种:

html:

<div class="box"><div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
</div>

css:

.box{
   text-align: justify;
   height: 200px;
}

.box:before{
   content: '';
   display: inline-block;
   height: 100%;
}

.box:after{
   content: '';
   display: inline-block;
   height: 100%;
}

.bar{
   display: inline-block;
   width: 150px;
   height: 100px;
   background: #ccc;
}

注:before负责把方块向底部对其,after负责水平均匀分布,但是有一个缺点就是第一个div.bar前面不能有空格,否则最前面会出现空白列。
所以,通常情况下,我们可以把.box的高度和.bar的高度设成一样,然后改造一下css,

.box{
   text-align: justify;
   height: 100px;
}

.box:after{
   content:'';
   display:inline-block;
   width:100%;
}

.bar{
   display: inline-block;
   width: 150px;
   height: 100px;
   background: #ccc;
}

这样一来,就不需要理会第一个div.bar前面有没有空格了。

评论已关闭