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;很重要，不能省略；

看一下效果：

完美实现！

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

……
……
……