css是一门功能强大、具备完整生态的复杂语言。它拥有很多的技巧, 但是生活工作中我们可能不怎么会接触到,这包括一些实际上挺实用的技巧。在此,特地列举一些css里比较容被忽略的小知识,希望能对你有所帮助。
跟圆形的实现一样,这里也是用到border-radius属性,但是你可能不知道,border-radius是一个简写属性, border-radius可以单独为四个角分别设置水平和垂直半径,只要用到一个正斜杠即可。在斜杠前指定前四个值,作为各自的水平半径,在斜杠后指定后四个值作为各自的垂直半径(可以简写)。故椭圆可以如下的代码实现:
div {
width: 200px;
height: 300px;
border: 1px solid #000;
border-radius: 150px / 100px;
}
<div></div>
这样子可以直接得到一个椭圆。实际上,它还支持百分比值,所以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;
结果如下:
代码如下:
.parent {
position: relative;
border: 1px dashed red;
height: 100px;
width: 100px;
}
.child {
position: absolute;
bottom: 10px;
height: 10px;
left: 10px;
right: 10px;
background: gray;
}
<div class="parent">
<div class="child"></div>
</div>
结果如下:
实际上,就算在父元素的宽高不是直接指定、而是由其内嵌的内容撑起来的情况下,也可以生效。
老规矩,上代码示例:
.parent {
position: fixed;
z-index: 999;
background: red;
height: 100px;
width: 100px;
}
.child {
position: relative;
z-index: -999;
width: 50px;
height: 50px;
background: gray;
}
<div class="parent">
<div class="child"></div>
</div>
老规矩,贴结果图:
currentColor是一个比较特殊的属性,它是css的第一个变量。顾名思义,它并没有绑定具体的颜色值,而是在使用中被解析为color。例如以下的水平分割线的颜色值:
div {
color: red;
border: 1px solid red;
}
hr {
height: .5em;
background: currentColor;
}
<div>
<h1>My First Heading</h1>
<hr>
<p>My first paragraph.</p>
</div>
结果如下,水平分割线成功被赋予了同样的颜色值:
实现一个元素垂直水平居中的方法有很多,但是以下这种算是比较好的一种方法,十分简捷。
只需在父类和子类分别加上这两个属性:
.parent {
display: flex;
}
.child {
margin: auto;
}
<div class="parent">
<div class="child"></div>
</div>
即可实现子元素垂直水平居中。
不少人以为绝对定位的元素可以随便设置其display属性,实际上,绝对定位的元素会形成一个块级框,它无法被设置为一个行内元素。你可以对一个元素同时设置以下样式试试效果:
div {
display: inline;
position: absolute;
width: 200px;
height: 200px;
background: red;
}
会发现,给他设置的宽高依旧会生效。这已经说明了问题。
相信一些人可能会在相应的样式类中设置如下属性:
text-align: justify;
但这里的效果是不好的,容易造成单词间间距过大的现象,影响阅读。
我们可以仅仅在相应的样式类中设置如下属性,达到期待中的效果:
hyphens: auto;
它会在末尾进行单词的断层,大大缩短了单词间的过大间距。
我们将借助background这个简写属性来实现它。可先试着写如下代码:
p {
font-size: 30px;
display: inline;
background: linear-gradient(red 0 100%) no-repeat;
background-size: 100% 1px;
background-position: 0 85%;
}
<p>
This is my first paragraph. This is my first paragraph. This is my first paragraph.
</p>
会看到结果如下:
这并不是我们想要的结果。首先它穿过了字形的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揭秘》一书。
来自:https://github.com/luweiWEB/Blog/blob/master/Articles/你可能不知道的一些css小知识.md
DOM结构 ;OM操作; 如何使用事件,以及IE和标准DOM事件模型之间存在的差别;怎样完整地执行一次GET请求、怎样检测错误;严格模式与混杂模式
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式
JavaScript一种直译式脚本语言,一种基于对象和事件驱动并具有安全性的客户端脚本语言;也是一种广泛应用客户端web开发的脚本语言。
Dtae() 和 new Date() 区别,Date() 函数不能带参数,属于静态方法;. 点字符匹配除回车(r)、换行(n) 、行分隔符(u2028)和段分隔符(u2029)以外的所有字符
希望能对你有启发,放心,不会太难读,在知乎上看到一个故事。平时多做复盘,思考并记录「我为什么会这么做?」「我当时的心态是什么?」这样,可以有效地帮你监测自己的思维过程,更好地控制它
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!