首页 > Web开发 > 详细

CSS一些很实用的技巧。

时间:2018-11-19 18:42:28      阅读:200      评论:0      收藏:0      [点我收藏+]

1.background-color:rgba

相信三基色大家都知道 rgb分别代表红,绿,蓝 a呢代表透明度 取值在0~1之间 0代表全透明 1代表全不透明

这是background的新属性,在配合qq截图来取色简直是绝配

 

技术分享图片

我们可以轻而易举的拿到rbg 这是我们只要在将对应的rgb 填入就行

技术分享图片

效果图如下

 

 技术分享图片

2.引入背景图片时候background-size 可以在url中直接写

这里我们在一个盒子填充一个背景

技术分享图片

我们使用 cover 属性等比例放大进行填充

 

技术分享图片

我们也可以直接在url 中写 cover,只要在position后面 加/cover 即可

 

 技术分享图片

 

 注意 cover 必须写在 position后面

 3. 给 body 添加行高 

 你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

技术分享图片

 

 4. 使用负的 nth-child 选择项目 

在CSS中使用负的 nth-child 选择项目1到项目n。

技术分享图片

 

还可以指定选择范围元素

这里就表示获取了第四到第五

技术分享图片

 

 

 5. 伪元素实现换行,替代换行标签

 

 技术分享图片

6. 单行文本溢出显示省略号

技术分享图片

 

 

7. 背景可以多重化

还在使用的用多个盒子用div定位么

懂得这个好技巧可以省去很多不必要的麻烦

技术分享图片

 

技术分享图片

8. 伪元素清除浮动

原理:利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。

技术分享图片

 

CSS一些很实用的技巧。

原文:https://www.cnblogs.com/Irelia/p/9984502.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!