你可能不知道的一些css小知识入门教程_知识小白知识

css是一门功能强大、具备完整生态的复杂语言。它拥有很多的技巧, 但是生活工作中我们可能不怎么会接触到,这包括一些实际上挺实用的技巧。在此,特地列举一些css里比较容被忽略的小知识,希望能对你有所帮助。1. 椭圆的实现跟圆形的实现一样,这里也是用到border-radius属性,但是你可能不知道,border-radius是一个简写属性, border-ra

你可能不知道的一些css小知识入门教程

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

你可能不知道的一些css小知识入门教程_知识小白知识

1. 椭圆的实现

跟圆形的实现一样,这里也是用到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;

结果如下:

你可能不知道的一些css小知识入门教程_知识小白知识

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;
}
<div class="parent">
    <div class="child"></div>
</div>

结果如下:

你可能不知道的一些css小知识入门教程_知识小白知识

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

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;
}
<div class="parent">
    <div class="child"></div>
</div>

老规矩,贴结果图:

你可能不知道的一些css小知识入门教程_知识小白知识

4. 运用currentColor

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>

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

你可能不知道的一些css小知识入门教程_知识小白知识

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

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

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

.parent {
    display: flex;       
}
.child {
    margin: auto;
}
<div class="parent">
    <div class="child"></div>
</div>

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

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%;
}
<p>
    This is my first paragraph. This is my first paragraph. This is my first paragraph.
</p>

会看到结果如下:

你可能不知道的一些css小知识入门教程_知识小白知识

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

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

结果如下所示,可看到效果变成了这样:

你可能不知道的一些css小知识入门教程_知识小白知识

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

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;
}

实现的效果如下:

你可能不知道的一些css小知识入门教程_知识小白知识

海计划公众号
(0)
上一篇 2020/03/26 23:32
下一篇 2020/03/26 23:32

您可能感兴趣的内容

  • imgcook小白指南_通过设计稿一键智能生成前端视图代码

    imgcook小白指南 官方网址:https://imgcook.taobao.org/ GitHub:https://github.com/taofed/imgcook 简介描述…

    2020/03/10
  • Vue 3.0 的 Composition API 尝鲜教程视频_api小白教程

    前段时间,Vue 官方释出了 Composition API RFC 的文档,我也在收到消息的第一时间上手尝鲜。虽然 Vue 3.0 尚未发布,但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition

    2020/03/26
  • Polaroider菜鸟攻略_拍立得效果生成工具

    Polaroider菜鸟攻略 官方网址:http://polaroider.com/ 简介描述:拍立得效果生成工具 Polaroider是一家专门把照片制作成“拍立得”风格的工具,…

    2020/03/10
  • x-editable菜鸟知识_用于创建可编辑弹出框的插件

    x-editable菜鸟知识 官方网址:http://vitalets.github.io/x-editable GitHub:https://github.com/vitalet…

    2020/03/06
  • Js优化条件判断语句小白攻略_语句入门攻略

    一、简单逻辑常用判断1.if(a为真){a=a
    }else{a=b
    }可写成:a = a || b2.if(a==b){a=c
    }else{a=d
    }可写成:a = (a==b) ? c : d3.fruit: 0 //0=苹果,1=梨子,2=桔子,3=柠檬,4=芒果…var _f = [‘苹果’,’梨子’,’桔子’,’柠檬’,’芒果’];
    shuigu

    2020/03/24
  • Vue组件化开发基础教程_组件基础教程

    学习组件化开发,首先掌握组件化的开发思想,组件的注册方式,组件间的数据交互方式,组件插槽的用法,vue调式工具的用法,组件的方式来实现业务逻辑功能。组件化开发思想,组件注册,组件调式,组件间的数据交互,组件插槽组件化规范,就是多的可能性重用全局组件注册语法Vue.component(组件名称, {data: 组件数据,template: 组件模板内容
    })

    2020/03/20
  • PHP获取类私有属性的几种方式菜鸟教程网_属性小白常识

    今天在推上看到一条获取PHP类私有属性的推文,感觉很有意思:顺着推文联想,还有其他方式吗?经过自己的测试及网上答案,总结出三种方法:1. 反射反射可以获取类的详细信息,要获取私有属性的值,只需将对应属性的 ReflectionProperty 实例设置为可访问再取值即可。示例代码如下:namespace tlanyan;class Foo {private

    2020/03/29
  • js实现交换数组元素位置的方法总汇小白教程_array基础知识入门

    交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式。 第三方变量最基础的方式,创建一个变量作为中转。let temp = array[index1];
    array[index1] = array[index2];
    array[index2] = temp;splice方法splice() 方法用于插入、删除或替换数组的元素。如果是删除时,会返

    2020/04/03
  • javascript是弱类型语言吗?新手入门_语言入门指南

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。什么是强类型定义语言和弱类型定义语言?1)、强类型定义语言:强制数据类型定义的语言。也就是说,一旦一个变量被指定了某个数据类型,如果不

    2020/03/31
  • Node.js之删除文件夹(含递归删除)小白攻略_文件基础教程

    应用场景:比如像Eclipse这样的IDE,右击项目,出现选项,点击选项中的删除,就可以删除这个项目及其下的子目录包含文件(使用electron开发的桌面端项目多少都会用到)。核心代码如下: function deleteFolderRecursive(url) {var files = [];/*** 判断给定的路径是否存在*/if (fs.exists

    2020/03/29
  • 7大笔记应用,让你的代码效率翻7倍菜鸟知识_效率小白知识

    作者:John Lee 译者:Young ,出处:http://www.makeuseof.com/tag/best-note-taking-tools-programmers/编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。但

    2020/04/06
  • Redis中设置了过期时间的Key,那么你还要知道些什么?使用攻略_Redis小白教程

    熟悉Redis的同学应该知道,Redis的每个Key都可以设置一个过期时间,当达到过期时间的时候,这个key就会被自动删除。这就是Redis的过期策略。在为key设置过期时间需要注意的事项1、 DEL/SET/GETSET等命令会清除过期时间在使用 DEL、SET、GETSET 等会覆盖key对应value的命令操作一个设置了过期时间的key的时候,会导致对

    2020/03/24
  • Bug的处理流程零基础入门_bug菜鸟指南

    缺陷的定义软件没有实现产品的说明书所描述的功能软件实现了产品说明书描述不应有的功能软件执行了产品说明书没讲的操作软件没有实现产品说明书没讲但应该实现的功能从软件测试员的角度来看,软件难以理解、不易使用、运行缓慢,或者最终用户认为不对缺陷的等级致命:一招毙命的缺陷,使你的系统无法运行,有造成数据泄漏的安全性问题。严重:可以引起易于纠正的异常情况、可能引起易于修

    2020/03/31
  • 给url加时间戳,骗过浏览器缓存零基础入门_缓存使用帮助

    修改js的时候总是因为浏览器不刷新缓存,导致修改无效。可以添加时间戳的方式骗过浏览器,重新加载 。为什么要加时间戳:URL后面添加随机数通常用于防止客户端(浏览器)缓存页面。 浏览器缓存是基于url进行缓存的,如果页面允许缓存,则在一定时间内(缓存时效时间前)再次访问相同的URL,浏览器就不会再次发送请求到服务器端,而是直接从缓存中获取指定资源。 代码//

    2020/03/29
  • node-crawler入门基础知识一款最好的node.js爬虫工具

    node-crawler使用帮助 官方网址:http://nodecrawler.org GitHub:https://github.com/bda-research/node-c…

    2020/03/06
  • 在5分钟内搭建企业内部私有npm仓库入门指南_npm菜鸟教程下载

    下面通过三种方法来搭建公司私有npm仓库,每种方式都有自己的优势。Node.js >= 6.11.3,我的Node版本:node v8.2.1Linux or OSX,我的系统版本:CentOS Linux release 7.2.1511 (Core)一、安装npm install -g –build-from-source cnpmjs.org cnp

    2020/04/06