![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS-成长之路
坏丶毛病
一只努力学习的web前端小菜鸟,欢迎大家一起学习进步。
展开
-
“浮空“滚动条
前端界面布局中,滚动条是我们必不可少的东西,当我们容器不足以呈下所有内容时,需要滚动条来支撑我们查看完整的数据。当然了,简单的属性我们就不介绍了,想必大家都很了解和熟悉,我们来看个特殊的属性。场景一:定宽高的容器,不足以放下所有内容时就需要滚动条来进行扩展查看场景二:初始时容器足够放下所有内容,但是点击展开后内容过多无法呈现的情况(例如表格的扩展)这时我们会采取文本溢出呈现滚动条的情况(如纵向的滚动条:overflow-y:auto),但是滚动条出现后会挤压宽度,毕竟它自己占一部分宽度,这就会导致我原创 2020-08-06 13:09:28 · 1533 阅读 · 1 评论 -
vue动态样式绑定改变伪元素等特殊样式(css var函数)
改变样式是我们实际开发中最常做的事情。诸如在css中,我们添加鼠标滑入滑出效果添加不同的样式。诸如在js中,我们根据某个条件,或者触发某个方法,去动态改变某个样式。那么,在vue中,我们更能很轻松的达到这点。看下常见的几种情景:情景一:我们需要根据某个变量是否存在(触发),去动态添加样式描述:当我们点击按钮触发了某个条件,我们需要给对应的元素添加激活效果<div ...原创 2020-01-21 11:24:49 · 21942 阅读 · 8 评论 -
css实现一个容器多背景图效果
特殊需求:在日常开发中,有些时候往往只需要一张特别大的图片作为背景图即可,但一些特殊情况下,我们不得不用一些小图凑成一张特别的大背景图别问我为什么,业务需要。那么如何去实现呢?有些人可能会使用一堆空的容器,然后分别放每个背景,然后定位或是怎样,然后把它凑到一起。不不不,太low了。完全可以一个容器添加多个背景图请看:.box{ height: 1...原创 2019-04-25 09:43:13 · 2627 阅读 · 1 评论 -
纯css实现上左固定,中间切换效果
接触过vue的童鞋都知道路由跳转,配置子路由实现tab选项卡效果。而常见的头部固定,左侧边栏固定,只是右侧内容变化的这种布局方式又是我们所必须的。那么脱离框架,怎么基于简单的css实现这种布局效果呢?一起来看看吧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...原创 2019-04-23 09:59:02 · 756 阅读 · 0 评论 -
原生JS实现不固定行和列的表格
之前有个需求,就是需要一个不固定行和列的表格,第一行的所有列的标题内容,用来表示数据对象中的key,而表格中的其他行,分别显示对应key的value。起始显示一行一列的表格th,然后根据用户是否输入值,动态增加行和列,每次根据倒数第二行是否有值,以此来判断是否要新增行,每次根据倒是第二列是否有值,以此来判断是否要新增列,然后根据行和列的值是否清空,以此来判断是否要删除行和列。代码部分:...原创 2019-04-01 09:44:25 · 2092 阅读 · 2 评论 -
常见布局—弹性布局
在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex它分为主轴和交叉轴两个方向,没有固定的方向,默认主轴是X轴,交叉轴是Y轴,也可以通过属性 flex-direction: column来设置主轴为Y轴主轴是X轴,意味着它会把子元素横向排列,所有子元素都到一行,Y轴也...原创 2019-03-27 09:52:13 · 10484 阅读 · 0 评论 -
CSS实现三角形
三角形是我们在开发中常用的,比如点击展开某个树状菜单,右边本来是向右的小箭头,然后变为向下,类似的 场景很多。那么怎么简单的用css实现一个三角形呢?话不多说,上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Documen...原创 2019-04-04 09:55:54 · 16662 阅读 · 3 评论 -
阿里字体小图标的使用
在项目开发中,我们难免会用到一些图片之类的样式,但是图片本身体积大,而且更改样式和其他标签融合布局相对麻烦,那么有没有更好的办法呢?字体小图标解决了我们这个问题。我们这次就说说常见的阿里字体小图标的使用官网地址:阿里字体小图标官网使用步骤:进入阿里字体小图标官网,注册登录(推荐使用微博登录,懒得注册) 搜索自己想要的图标加入购物车 在右上角的购物车图标那一栏可以看见自...原创 2019-03-26 10:04:22 · 7131 阅读 · 0 评论 -
控制台打印带样式的文字
今天给大家分享个好玩的。大家想必平时都会在控制台打印东西,用来测试一些东西。但是大家直达怎样在控制台打印出我们想要的带样式的文字嘛?带大家来看看。console.log('%c 何以解忧,唯有暴富!!!','color:white;font-size:50px;text-shadow: 0px 0px 5px green;');注:必须带 %c然后在第二个引号中写上对应的...原创 2019-03-19 09:24:35 · 1649 阅读 · 0 评论 -
伪类复选框改变样式
大家在开发的过程中,肯定都用过复选框,那么大家有没有为了改变样式而烦恼过?这里给大家介绍特别简单的一种方式。话不多说,上代码。<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"></head><style typ...原创 2019-03-22 10:07:59 · 583 阅读 · 0 评论 -
css之“计算属性“
no,no,no,这和vue的计算属性没有一点关系,所以这次介绍的也和vue无关。相信大家和我一样,在开发中,也遇到过这样的问题:我设计样式,多用百分比布局,这样在不同分辨率就不会出现特别大的偏差,但是也不能避免不适用px等固定单位,所以当我们父元素分为2部分,头部使用了像素px,但是底部需要剩下所有的大小怎么办?弹性盒也确实能解决,但真的没有更好的方法了吗?再比如说,当我一个元素需要...原创 2019-03-20 09:23:45 · 13368 阅读 · 1 评论 -
浅析deep深度选择器
之前在开发中遇到一个问题,vue项目结合element ui使用。但是element ui的样式不一定符合我们的需求,这时我们就需要改变它的样式。比如博主使用到了element ui的表格,但是表格有默认的背景色,鼠标滑过还有默认的高亮颜色。我想要改变这个鼠标滑过的样式,所以我需要在页面中审查元素找到对应的标签。但是当我找到并且复制,然后试图去改变它的样式时,怎么都没办法改变。...原创 2019-03-14 09:44:53 · 14280 阅读 · 7 评论