![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 69
abiao1981
80后老码农了,跟上时代的浪潮,苦逼学习中。。
展开
-
css实现动画效果 animation: showLayer 0.2s linear both
css实现动画效果 animation: showLayer 0.2s linear both原创 2024-03-07 14:16:22 · 693 阅读 · 0 评论 -
vue绑定背景颜色或背景图片 和 nuxtjs动态设置background-image:
1.运营成本不足 2.品牌曝光度低 3.品牌曝光度低 4.用户活跃度低原创 2024-01-03 16:09:41 · 846 阅读 · 0 评论 -
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
* 设置伸缩盒子对象的子元素的排列方式 */-webkit-line-clamp: 2;/* 限制在一个块元素中显示文本的行数 *//* 文本超出的部分用省略号代替 *//* 给文本设置不换行在一行中显示 */display: -webkit-box;/* white-space的默认值是normal 自动换行 *//* 文本超出的部分隐藏 *//* 文本超出的部分隐藏 *//* 设置宽度 *//* 设置宽高 *//* 单行情况下 */原创 2024-01-03 16:03:56 · 1185 阅读 · 0 评论 -
判断浏览器类型,CSS兼容不同浏览器的写法,CSS自适应不同设备宽度的写法
可以根据各浏览器的特性来判断浏览器类型,我们把对IE的判断放在第一,因为IE的用户最多,其次是判断Firefox。以前判断是否IE浏览器用的是window.navigator.userAgent,跟踪这个信息,发现在开发环境,识别为IE10,但访问服务器则识别为IE11,但IE11的userAgent里是没有MSIE标志的,所以原来的判断方式就判断不出IE11。ie10及以上不支持ie浏览器的判断了,因为ie11已经不支持document.all了,下面是支持ie11的版本的,当然ie6-8也是支持的。原创 2023-12-27 17:35:44 · 1604 阅读 · 0 评论 -
CSS尺寸单位详解(rpx、px、pt、em、rem、%、vh、vw的区别)
子元素的 padding/margin 如果设置百分比,不论是垂直方向或者水平方向,都相对于直接父亲元素的padding/margin,与父元素的height有关。所以移动端不用px。: 无论视口高度多少,都将视口高均分为100份,每一小份就是1vh,所以,也是相对单位,可随视口大小变化而自动变化。:无论视口宽度多少,都将视口宽均分100份,每一小份就是1vw,所以也是相对单位,可随视口大小变化而自动变化。: 通常认为子元素的百分比完全相对于直接父元素,但是,不总是相对于父元素的对应属性值。原创 2023-12-27 17:27:49 · 1655 阅读 · 0 评论 -
vue实现鼠标经过显示悬浮框效果,使用Vue的v-show指令和CSS的:hover伪类,利用Vue的数据绑定
在上面的代码中,我们在组件的data选项中定义了一个名为showTip的数据属性,并将它的初始值设置为false,表示悬浮框默认是不显示的。在模板中,我们使用@mouseover和@mouseleave监听鼠标经过和离开事件,然后修改showTip的值来控制悬浮框的显示和隐藏。利用Vue的数据绑定,实现鼠标悬浮时显示悬浮框,鼠标移开时隐藏悬浮框的效果。如果需要实现多个鼠标悬浮框效果,可以在组件中添加多个showTip属性,并使用不同的名称来控制各自的悬浮框显示和隐藏。步骤二:为悬浮框添加样式。原创 2023-11-13 17:19:08 · 4674 阅读 · 0 评论 -
css中的hover用法示例(可以在vue中制作鼠标悬停显示摸个按钮的效果)
css中hover属性,鼠标移到上面的时候可以激活,它可以实现悬浮元素上改变样式,改变子元素的样式,改变同级的样式以及改变就近元素的样式等。“:hover”必须位于“:link”和“:visited”之后(如果存在的话),这样样式才能生效。这个表示的是:当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为绿色。这个是最普通的用法,只是通过a改变了style。hover选择器用于选择鼠标指针浮动在上面的元素,它适用于所有元素,可以用来实现类似于js的一些功能。2. ‘+’ 控制同级元素(兄弟元素);原创 2023-11-13 17:16:35 · 3886 阅读 · 0 评论 -
CSS media属性的使用-兼容不同设备不同屏幕宽度的写法
为了兼容不同设备排版问题,使用media属性对不同屏幕宽度的设备赋予不同的css值原创 2022-11-18 15:24:17 · 1833 阅读 · 0 评论 -
CSS排版DIV的“margin”属性常见布局技巧垂直居中对齐,左上角,左下角,右下角,右上角对齐方式的实现
margin的值类型有:auto | length | percentagepercentage:百分比是由被应用box的containing blockmargin的默认值为0,并且margin支持负值。margin可以用来同时指定box的四边外边距。如果属性margin有四个值,那么值将按照上-右-下-左的顺序作用于四边,按顺时针的顺序围绕元素。表达式如下:margin:top right bottom left;四个数值中间以空格分隔。效果等同于: margin...原创 2021-10-24 17:36:27 · 10489 阅读 · 0 评论