CSS作为Web开发的三大当家之一,熟练的CSS技术可以让我们的网页显得多姿多样。
本篇是我在学习及做项目的过程中所遇到或自创的CSS奇技,可以解决一些偏门的样式问题。

block元素的100%全屏高

在一开始写最外部的外标签时,我们时常会想让其占满整个body;我们会这么写

1
<div class="all">我要称霸整个body</div>

设置其style

1
2
3
4
5
6
7
8
9
10
11
<style>
* {
padding: 0;
margin: 0;
}
.all {
width: 100%;
height: 100%;
background-color: yellowgreen;
}
</style>

元素高度我们设了100%;看一下真实的高度:

理想很美好,现实是残酷的,说好的高度100%呢?

要想占据100%的高度,这里用到的其中一种方法是:

给该元素添加样式:

1
position: fixed

定位该元素,使其脱离正常流,这时候的结果是:

已经完全占满了窗口。

这里顺带说一下微信小程序,在小程序开发中,如果想设置全屏背景,设置外标签高度100%现在是不管用的,有些教程是教你这么干,但好像是版本更新了后不能这么做了,你可能会说给body设置背景样式呀! 想法很好,可惜,很遗憾的说,小程序是没有body这个说法的,在小程序中充当body的角色是:page;所以,只要给page设置背景样式即可。

同样的,如果想让某个块级元素height:100%;就给这个元素设置position: fixed或者是position: absolute;脱离正常流,高度100%;

其实该position: fixed样式的还有一个好用处:

vue组件式开发时,如果是其中一个或多个组件要设置全局背景,其他组件不需要,这个问题该如何解决?

如果组件的style有scoped属性,则该组件的样式给不了body的,如果该组件的style没有scoped属性,则该组件的body样式会在所有的组件页展示。

解决办法依然是这个position: fixed
我们给该组件的最外标签加上该样式,再加上自己想要的背景样式,

1
position: fixed

就能实现该组件页有全局背景,且不会影响到其他页面。

inline元素间的间隙

在一般的写代码过程中,比如我们写到

1
2
3
4
5
6
<ul>
<li>我是第一项</li>
<li>我是第二项</li>
<li>我是第三项</li>
<li>我是第四项</li>
</ul>

设置其style

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
ul {
list-style: none;
}
li {
width: 25%;
display: inline-block;
background: green;
text-align: center;
height: 40px;
line-height: 40px;
}
</style>

表面上看应该是所有的li处于同一行,没什么问题,但是效果其实是下面这样的:

最重点是元素间的间隙,用其他的inline元素测试,元素之间依然存在;这里我用到的解决办法是:

给li的父级ul设置: font-size: 0; 给li设置:font-size: 16px; 如此就达到了所需效果。

重点是给其父元素添加样式: font-size: 0; 给其li再添加font-size: 16px;是为了还原其字体大小;

其他的inline元素,像等等的间隙解决办法就是在其父元素添加样式:

1
font-size: 0

边框字体同色

元素:

1
<div id="app">茂茂</div>

设置其style

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
#app {
width: 200px;
height: 200px;
color: #000;
font-size: 30px;

border: 50px solid;

/*或者*/
border: 50px solid currentColor;
}
</style>

我们可以看到的效果是:

border 的默认值 (initial) 就是 currentColor, 可以直接写成 border: 50px solid;
而重点就在于这个currentColor的特性,有兴趣的朋友可以上网查询有关资料。

该样式在实现一些好玩的东西时,还是很有用的,好比边框就是一个变色龙一般。

文字颜色渐变

我们也许都知道linear-gradient()可以实现背景颜色的渐变,可本节要实现的是文字的颜色渐变,那该linear-gradient()能直接用到字体样式上吗?答案是不能
那有没有一个专门的属性可有直接对文字添加渐变呢?答案是没有

那如何实现?

我们先写html元素:

1
<div id="app">我要渐变</div>

再设置其样式

1
2
3
4
5
6
7
8
9
10
<style>
#app {
font-weight: bold;
font-size: 100px;
background-image: linear-gradient(#167, #202d40);
-webkit-background-clip: text;
color: transparent;
margin: 20px;
}
</style>

让我们来看一下效果:

这就实现了文字渐变的效果,代码重点在三句:

1
2
3
background-image: linear-gradient(#167, #202d40);
-webkit-background-clip: text;
color: transparent;

background-image: linear-gradient(#167, #202d40);这行是给背景设置为渐变色;

-webkit-background-clip:text;这行就要说到,background-clip 属性了 ,我们来看看 W3Cschool 上的说明:

background-clip 属性 规定背景的绘制区域

语法:

1
background-clip: border-box|padding-box|xcontent-bo;
属性值 说明
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-bo 背景被裁剪到内容框

上面没有说取值 text 的情况,看到前面的前缀,大家应该也能想到,它的兼容性问题了,目前还不是能所有浏览器都支持。

取值为text的意思,就是以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。

所以,我们最后写color: transparent; 让文字为透明色,就是让后面背景色显示出来。从而实现文字颜色渐变

其实实现文字渐变不止这一种实现方法,有兴趣的学友可以查询相关资料;

定位元素居中

先写html元素:

1
<div id="app">我不但要定位,还要在中间</div>

设置其style

1
2
3
4
5
6
7
8
9
#app {
height: 300px;
width: 300px;
background-color: yellowgreen;
position: absolute;
text-align: center;
line-height: 300px;
margin: auto 0;
}

看一下效果:

设置margin: auto 0;并没有起到居中作用,因为该元素已经position脱离了正常流;要实现该元素居中,应该把margin: auto 0;改为:

1
2
3
4
5
6
7
8
9
10
#app {
height: 300px;
width: 300px;
background-color: yellowgreen;
position: absolute;
text-align: center;
line-height: 300px;
left: 50%;
margin-left: -150px;
}

再来看一下效果

现在该元素已经居中了,原理是先用left: 50%定位,使得该元素的最左侧定位到父元素(body)的中间,再通过margin-left: -150px;使得该元素向左偏移自己的一半宽度(150);实现元素居中;

除了这种实现方式,我这里再给出另一种实现方法

这就要引出另一个属性:calc

这是一个可以计算的属性,因为本身的CSS不能直接实现运算,SASS/SCSS、LESS用计算是非常方便的,但CSS通过calc属性可实现简单的运算。

所有我们再修改一下样式为:

1
2
3
4
5
6
7
8
9
#app {
height: 300px;
width: 300px;
background-color: yellowgreen;
position: absolute;
text-align: center;
line-height: 300px;
left: calc(50% - 150px);
}

看一下效果:

效果和上面的一样,都实现了定位元素的居中效果。

calc的作用还是蛮大的,巧妙的运用,会有巧妙的效果;

利用伪元素清除浮动

很多情况我们会使某个元素向左或向右浮动,但令人脑的是该浮动元素的父元素就不顺我们的意了,

比如:

1
2
3
<div id="parent">我不能让孩子离开我
<div id="son">我不能离开妈妈</div>
</div>

设置其style

1
2
3
4
5
6
7
8
9
10
11
12
#parent{
width: 800px;
margin: 0 auto;
padding: 20px;
background-color:coral;
}
#son {
height: 300px;
width: 300px;
background-color: yellowgreen;
float: right;
}

看一下效果:

父元素已经管不住自己的浮动孩子了;可能有些说法里会让你再父元素最后加一个子元素

1
2
3
4
<div id="parent">我不能让孩子离开我
<div id="son">我不能离开妈妈</div>
<div id="new"></div>
</div>

再为该新子元素添加样式

1
2
3
#new{
clear: both;
}

效果:

子元素没有离开父元素,这种方式确实实现了效果,但不是那么完美;

另一种实现方法

直接给父元素添加伪元素after,(before好像不行)

1
2
3
4
5
#parent::after{
content: '';
display: block;
clear: both;
}

display: block;很重要,不能省略;

看一下效果:

完美实现!

其实浮动带来的麻烦比这上面提到的还要大,针对性的解决,已达到我们想要的效果。

……
……
……