你可能不知道的一些css小知识

刘厚水发布于2019-08-30 15:44 / 2507人阅读

摘要：在此，特地列举一些里比较容被忽略的小知识，希望能对你有所帮助。椭圆的实现跟圆形的实现一样，这里也是用到属性，但是你可能不知道，是一个简写属性，可以多带带为四个角分别设置水平和垂直半径，只要用到一个正斜杠即可。

css是一门功能强大、具备完整生态的复杂语言。它拥有很多的技巧， 但是生活工作中我们可能不怎么会接触到，这包括一些实际上挺实用的技巧。在此，特地列举一些css里比较容被忽略的小知识，希望能对你有所帮助。

1. 椭圆的实现

跟圆形的实现一样，这里也是用到border-radius属性，但是你可能不知道，border-radius是一个简写属性， border-radius可以多带带为四个角分别设置水平和垂直半径，只要用到一个正斜杠即可。在斜杠前指定前四个值，作为各自的水平半径，在斜杠后指定后四个值作为各自的垂直半径（可以简写）。故椭圆可以如下的代码实现：

div {
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    border-radius: 150px / 100px;  
}

这样子可以直接得到一个椭圆。实际上，它还支持百分比值，所以border-radius属性部分的代码还可以简化成这样子：

border-radius: 50%;

那如果仅需要实现一个上面部分的半椭圆呢？由前面的结论，实际上我们可以很容易地写出半椭圆的border-radius属性部分的css代码：

border-radius: 50% / 100% 100% 0 0;

这等价于：

border-radius: 50% 50% 50% 50% / 100% 100% 0 0;

结果如下：

2. 绝对定位和固定定位的元素可通过同时设置bottom&top或者left&right的值，来间接地设置该元素的宽度

代码如下：

.parent {
    position: relative;
    border: 1px dashed red;
    height: 100px;
    width: 100px;
}
.child {
    position: absolute;
    bottom: 10px;
    height: 10px;
    left: 10px;
    right: 10px;
    background: gray;
}

结果如下：

实际上，就算在父元素的宽高不是直接指定、而是由其内嵌的内容撑起来的情况下，也可以生效。

3. 一般情况下固定定位的父元素，无论其层级设置得多高且无论其内嵌的子元素的层级设置得多低，该元素都不能将这些子元素覆盖

老规矩，上代码示例：

.parent {
    position: fixed;
    z-index: 999;
    background: red;
    height: 100px;
    width: 100px;
}
.child {
    position: relative;
    z-index: -999;
    width: 50px;
    height: 50px;
    background: gray;
}

老规矩，贴结果图：

4. 运用currentColor

currentColor是一个比较特殊的属性，它是css的第一个变量。顾名思义，它并没有绑定具体的颜色值，而是在使用中被解析为color。例如以下的水平分割线的颜色值：

div {
    color: red;
    border: 1px solid red;
}
hr {
    height: .5em;
    background: currentColor;
}


    My First Heading
    
    My first paragraph.

结果如下，水平分割线成功被赋予了同样的颜色值：

5. 利用flexbox和外边距实现垂直水平居中

实现一个元素垂直水平居中的方法有很多，但是以下这种算是比较好的一种方法，十分简捷。

只需在父类和子类分别加上这两个属性：

.parent {
    display: flex;       
}
.child {
    margin: auto;
}

即可实现子元素垂直水平居中。

6. 绝对定位的元素设置为行内元素时不会生效

不少人以为绝对定位的元素可以随便设置其display属性，实际上，绝对定位的元素会形成一个块级框，它无法被设置为一个行内元素。你可以对一个元素同时设置以下样式试试效果：

div {
    display: inline;
    position: absolute;
    width: 200px;
    height: 200px;
    background: red;
}

会发现，给他设置的宽高依旧会生效。这已经说明了问题。

7. 更好地实现文本两端对齐的效果

相信一些人可能会在相应的样式类中设置如下属性：

text-align: justify;

但这里的效果是不好的，容易造成单词间间距过大的现象，影响阅读。

我们可以仅仅在相应的样式类中设置如下属性，达到期待中的效果：

hyphens: auto;

它会在末尾进行单词的断层，大大缩短了单词间的过大间距。

8. 实现波浪形下划线

我们将借助background这个简写属性来实现它。可先试着写如下代码：

p {    
    font-size: 30px;
    display: inline;
    background: linear-gradient(red 0 100%) no-repeat;
    background-size: 100% 1px;
    background-position: 0 85%;
}

This is my first paragraph. This is my first paragraph. This is my first paragraph.

会看到结果如下：

这并不是我们想要的结果。首先它穿过了字形的descender。我们应该让下划线在遇到字母时自动断开，那样子的效果将会更加舒服。可以巧妙地利用text-shadow属性实现这一步，在上面的样式类里加上这样一个属性段：

    text-shadow: 2px 0 white, -2px 0 white;

结果如下所示：

可看到效果变成了这样：

怎样实现类似文本输入纠错时的波浪型下划线？这里需要用到两层渐变，最终的代码如下：

p {    
    font-size: 30px;
    display: inline;
    background: linear-gradient(-45deg, transparent 40%,  red, red 60%, transparent 0) 0 1em, linear-gradient(45deg, transparent 40%,  red, red 60%, transparent 0) .1em 1em;
    background-repeat: repeat-x;
    background-size: .2em .1em;
    text-shadow: 2px 0 white, -2px 0 white;
}

实现的效果如下：

附：部分内容源自Lea Verou大神的《CSS揭秘》一书。

原文链接

【作者简介】 TRIS，芦苇科技web前端开发工程师，喜欢唱歌、看动漫、看小说。擅长微信小程序开发，系统管理后台。访问www.talkmnoney.cn了解更多。

GPU云服务器云服务器可能不知道地方你知道你应该知道 ddos一些比较小的网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116190.html

写给初入门/半路出家的前端er

摘要：半路出家的前端程序员应该不在少数，我也是其中之一。年，冯冯同事兼师兄看我写太费劲，跟我说对面楼在找，问我要不要学，说出来可能有点丢人，但是在那之前，我真得不知道什么是，什么是。半路出家的前端程序员应该不在少数，我也是其中之一。为何会走向前端非计算机专业的我，毕业之后，就职于一家电力行业公司，做过设备调试、部门助理、测试，也写过一段时间的QT，那三年的时间，最难过的不是工作忙不忙，...

Cc_2011 2019-08-23 17:18 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
一个前端菜鸟的成长历程

摘要：张鑫旭老师的文章写的很棒，解决了我的许多困惑。所以，基础知识的牢固就显得尤为重要是个不怎么听话的孩子，总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑，钻研的魔法，可见其中技术细节有多复杂。从实习算起，到现在工作了也有一年半的时间了，在这期间，深深感受到了前端领域的飞速发展，在这里记录一下自己的成长历程，算是对知识的一个梳理，也希望帮助到刚入行的同学们。说来惭愧，大学里并没有涉...

lieeps 2019-08-29 15:37 评论0 收藏0
一个前端菜鸟的成长历程

摘要：张鑫旭老师的文章写的很棒，解决了我的许多困惑。所以，基础知识的牢固就显得尤为重要是个不怎么听话的孩子，总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑，钻研的魔法，可见其中技术细节有多复杂。从实习算起，到现在工作了也有一年半的时间了，在这期间，深深感受到了前端领域的飞速发展，在这里记录一下自己的成长历程，算是对知识的一个梳理，也希望帮助到刚入行的同学们。说来惭愧，大学里并没有涉...

SHERlocked93 2019-08-26 11:59 评论0 收藏0
12个你未必知道的CSS小知识

摘要：如果你并不是一个特别有经验的程序员，我相信你未必知道属性除了能用在文本显示，还可以用作其它地方。说实话，估计这个值很少人会使用它，但你要知道确实可以使用这样的一个值，如果以前不知道它，那么，现在，在有些罕见的地方，你也许就会变得聪明一点了。虽然CSS并不是一种很复杂的技术，但就算你是一个使用CSS多年的高手，仍然会有很多CSS用法/属性/属性值你从来没使用过，甚至从来没听说过。 1...

Caizhenhao 2019-08-28 18:05 评论0 收藏0