CSS
夜跑者
目前从事web前端,小程序开发。熟悉vue框架,uni-app跨端框架。
展开
-
浮动元素导致被遮住元素单击事件不响应
2)给浮动元素设置pointer-events 属性为none, 表示该元素永远不会成为鼠标事件的 target。具体含义可在网上看看。有时候浮动元素会遮住下面元素,并导致下面元素click事件不响应。点击被红色遮住部分click事件没有响应。1) 设置被遮住元素z-index。原创 2023-09-06 17:52:50 · 594 阅读 · 0 评论 -
uview 中的u-sticky u-tabs 修改成员间隔
在使用uview 中的u-sticky u-tabs组件时,可能需要修改成员之间的间隔。但是u-tabs并没有提供修改成员间隔属性,所以需要穿透样式实现。共享工位 ,预定详情 ,固定工位 三者之间的间隔有点小,怎么变大呢?原创 2022-09-15 13:48:40 · 2635 阅读 · 0 评论 -
flex-shrink: 0 来固定元素不被挤压
看下代码:<html> <head> <style type="text/css"> .div-wrapper { width: 600px; background-color: grey; display: flex; justify-content: space-between; } .input-cls{ widt原创 2021-06-28 17:13:16 · 9577 阅读 · 0 评论 -
box-sizing content-box border-box
大家先看个例子:<html> <head> <style type="text/css"> .div-wrapper{ width: 200px; height: 600px; background-color: grey; } .list-wrapper{ width: 100%; padding: 0 30px;原创 2021-04-13 20:09:18 · 137 阅读 · 0 评论 -
margin-left: auto 右对齐
假如有3个div元素,两个放在左边,一个放在右边,怎么做呢?用flex布局。把放在左边的2个div元素再包裹一个div,然后设置flex布局,并设置justify-content: space-between; 代码如下:<html> <head> <style type="text/css"> .div-wrapper{ width: 900px; height: 100px; bac..原创 2021-02-24 09:00:20 · 1037 阅读 · 2 评论 -
iconfont字体图标的使用方法--超简单!
文章转自:https://www.cnblogs.com/hjvsdr/p/6639649.htmliconfont字体图标的使用方法--超简单!我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;step 1:百度iconfont,找到阿转载 2021-02-08 13:53:40 · 293 阅读 · 0 评论 -
vertical-align 调整行内元素对齐
在电商项目中,经常会搞活动,标上价格后,后面再跟个活动名称,例如:代码如下:<html> <head> <style type="text/css"> .cls{ width: 60px; height: 40px; background-color: red; text-align: center; line-height: 40px;原创 2020-12-30 21:57:14 · 185 阅读 · 0 评论 -
html del标签
一般在电商项目中,会有原价,活动价。如果搞活动的话,会把原价加个删除线,类似这样的。css 有个text-decoration 属性,设置为line-through 就会实现这个效果,其实html 有个del标签,不用加css。代码如下:<html> <head> <style type="text/css"> </style> </head> <body> <div>原创 2020-12-29 19:28:10 · 441 阅读 · 1 评论 -
利用伪元素after实现垂直分隔符
以上需求比较常见,实现方法也有很多种,感觉用伪元素after实现挺好的,代码如下: <style type="text/css"> .bg{ width: 500px; height: 200px; background-color: gray; margin: 0 auto; text-overflow: ellipsis; overflow: hidden; ..原创 2020-11-29 21:58:52 · 628 阅读 · 0 评论 -
两段文字在一行显示,第二段文字超出后另起一行显示,但不占用第一段文字
要实现这么一个需求:备注: 后面的值有可能超出一行,产品不让在一行省略号显示,而是要在下一行显示,而第二行的内容要和第一行垂直方向对齐。用flex布局就可以很容易搞定这个需求。代码如下: <style type="text/css"> .bg{ width: 300px; height: 200px; background-color: gray; margin: 0 auto;原创 2020-11-29 21:10:48 · 715 阅读 · 0 评论 -
flex 垂直方向 两端对齐
有这么一个需求,flex 容器高度固定,其中的2个子项在垂直方向上两端对齐,代码如下: <div class="bg"> <div style="width: 100%;"> <span>aaaaaaaaa</span> </div> <div style="width: 100%;"> <div>bbbbb</div> ..原创 2020-11-28 14:04:24 · 8015 阅读 · 0 评论 -
深入理解css中的margin属性
文章转自:https://www.cnblogs.com/yuer20180726/p/11091095.html深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分:margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margi.转载 2020-11-21 11:53:57 · 652 阅读 · 2 评论 -
flex-grow、flex-shrink、flex-basis三个属性的作用
文章转自:https://blog.csdn.net/m0_37058714/article/details/80765562flex-grow、flex-shrink、flex-basis三个属性的作用:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素空间的。(注意:这三个属性都是在子元素上设置的,下面小编要讲的是父元素,指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性:首先是 flex-basis ,basis英文意思是...转载 2020-11-19 13:45:55 · 3903 阅读 · 0 评论 -
用flex布局实现左右两边对齐
有这样的需求,文字左对齐,button右对齐。我们就可以用flex布局很好的实现此需求。代码如下:<html><head> <style type="text/css"> .wrapper{ width: 600px; border: 2px solid green; display: flex; flex-wrap: wrap;原创 2020-07-26 15:56:05 · 12541 阅读 · 0 评论 -
font-size:0的作用
文章转自:https://www.cnblogs.com/guagnxu/p/6382163.html看别人的代码看到过font-size:0这个设置,不明白为何这样操作,后来研究一下才明白:这是像素级还原设计稿很有用的设置,因为元素节点有文本节点,在缩进代码时会占据宽度,这么说不好理解,演示如下:html:<div class="box"> <div>...转载 2020-05-08 08:08:17 · 378 阅读 · 0 评论 -
原生JS获取div元素的宽度
最近在做一个进度条组件,需要获取div元素的宽度。例如:<div id="myDiv" style="width: 200px; height: 200px; background-color: gray"> </div>获取myDiv元素的宽度:var divWidth = document.getElementById("myDiv").st...原创 2020-04-06 10:44:13 · 12854 阅读 · 0 评论 -
white-space
在项目中由于用的浏览器不支持input标签,采用了div模拟了一个,测试发现输入多个空格时只会显示一个空格。看到另外同事用white-space解决了此问题。white-space : pre就OK了...原创 2018-07-23 17:06:53 · 580 阅读 · 0 评论 -
单一DIV下既有背景色又有渐变色
项目中有个需求,焦点样式改为渐变色。当DIV中的内容为文字时,设置文字颜色,和DIV的背景色就可以了,如下:color: rgba(255, 255, 255, 0.9);background: linear-gradient(to right, #05BDE5, #10DAB4);但DIV中的内容是个icon图片时,如下:background: url(./abc.pn...原创 2018-12-17 08:48:30 · 507 阅读 · 0 评论 -
position属性设置为absolute 的跟随性
有这么个需求:在一个容器的右上角放置一个图标,当这个容器的宽度改变时,图标始终在容器的右上角。如下图所示:第一幅图片width为200px, 第二幅图片width为600px我们一步步实现此效果。1)容器和图标显示在一行 用inline-block就可以了,代码如下:<!doctype html><html><head&g...原创 2020-02-03 16:06:55 · 974 阅读 · 0 评论 -
浅谈css的伪元素::after和::before
文章转自:https://www.cnblogs.com/liAnran/p/9714040.htmlcss中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验。一、概念:...转载 2020-02-02 21:17:26 · 356 阅读 · 0 评论 -
清除浮动元素影响的两种方法
在前一篇文章(https://blog.csdn.net/liubangbo/article/details/104129203)中,我们分析了由于父元素没有设置高度,子元素进行了浮动,所以实现了文字环绕效果(父元素高度塌陷)。这篇文章我们分析一下怎么清除浮动产生的影响(父元素高度塌陷)。方法1:在子元素后边添加一个空div元素,并设置clear属性<html> <...原创 2020-02-01 12:42:01 · 815 阅读 · 0 评论 -
经验分享:CSS浮动(float,clear)通俗讲解
文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html写的挺好,通俗易懂,谢谢作者分享。很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。写在前面的话:...转载 2020-02-01 10:38:02 · 237 阅读 · 0 评论 -
CSS 清理浮动 clear属性
文章转自:https://blog.csdn.net/ixygj197875/article/details/79344498虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用。浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置。首先,看看父元素的高度塌陷。假设有一个容器,其中两个子元素,一个子元素向左浮动,一个子元素向右浮动。代码如下:.wrapper {...转载 2020-01-31 23:30:32 · 932 阅读 · 0 评论 -
float属性是如何实现文字环绕效果的
我们一步步来看看float属性是如何实现文字环绕效果的。先看看子元素不设置float属性:<html> <head><style type="text/css">.div1{ width: 200px; outline: 2px red solid;}.div2{ width: 100px; height: 2...原创 2020-01-31 22:53:20 · 1615 阅读 · 0 评论 -
为什么float属性可以使文字环绕图片
我们知道float属性可以使文字环绕图片。例子如下:<html> <head><style type="text/css">.div1{ width: 50%; height: 200px; background-color: dimgrey; float: left;}</style><...原创 2020-01-30 21:23:41 · 678 阅读 · 0 评论 -
CSS自适应布局总结
文章转自:https://cloud.tencent.com/developer/news/274454所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局,inlin...转载 2020-01-30 16:30:59 · 210 阅读 · 0 评论 -
margin: 0 auto 水平居中原理
文章转自:https://blog.csdn.net/Napoleonxxx/article/details/95510680前言在块级元素设定 width 值 的情况下,设置其 margin: 0 auto 可以在父级元素中达到水平居中。在 CSS 居中布局界,这可以说是一个烂梗了。但如果继续追问其原理,很多人就语焉不详了。网络中很多文章有两个问题:描述不全面或者延伸太广,难以聚焦,时...转载 2020-01-30 11:47:14 · 1001 阅读 · 0 评论 -
用flex布局实现骰子
实现6个骰子,如下图所示:代码如下:<html> <head><style type="text/css">#bg{ height: 200px; outline: red dotted thin; display: inline-flex; /*不用定义此容器的宽度,宽度根据容器元素进行自适应*/}....原创 2020-01-28 16:21:51 · 2544 阅读 · 0 评论 -
用flex布局实现软键盘
软键盘用来模拟真实键盘,我们知道键盘中一些特殊符号键的大小和普通字符键的大小是不一样的,例如空格键。但一般各个键间距是一样的,这样的一种布局适合用flex布局来实现。我们实现一个简单的例子:我们实现上述图片布局。代码如下:<html> <head><style type="text/css">#app{ width: 800p...原创 2020-01-27 12:37:02 · 601 阅读 · 0 评论 -
flex布局实现水平垂直居中
把容器设置为flex布局,justify-content属性可以实现水平居中,align-items属性可以实现垂直居中。通过一个简单例子一看就明白了。<html> <head><style type="text/css">#app{ width: 600px; height: 600px; outline: red do...原创 2020-01-26 20:21:50 · 877 阅读 · 0 评论 -
图片充满整个Div
今天在画一个页面时,图片老是渲染的不对,排查代码看着也没啥问题。原来div容器尺寸比较大,而图片尺寸比较小。我们模拟一下这个现象。真是图片如下(450px 237px):设置div容器大小为600px 600px。代码如下:<html> <head><style type="text/css">#icon{ width: 6...原创 2020-01-19 22:31:05 · 3073 阅读 · 0 评论 -
CSS 之overflow:hidden 用来清除浮动
在网上有很多关于用overflow:hidden来清除浮动的文章,这种说法是不对的。这里来更正一下,overflow:hidden清除不了浮动,其实它隐藏了浮动元素的一部分。我们用一个例子来说明:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> ...原创 2019-12-24 17:41:52 · 425 阅读 · 0 评论 -
CSS 之float 属性
文章转自:https://blog.csdn.net/qq_36595013/article/details/81810219很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。写在前面的话:<span style="color:#000000"><cod...转载 2019-12-24 16:13:19 · 534 阅读 · 0 评论 -
用border属性来画三角形
在微信公众号上看到一篇用border属性来画三角形的文章,今天来试验一下,果然好使。需求:画一个等腰三角形,底边长200,腰长100。我们一步一步来实现此需求。1) 实现一个200宽度的正方形,使其水平垂直居中<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"...原创 2019-12-01 15:36:04 · 272 阅读 · 0 评论 -
CSS - line-height 属性
line-height 属性可以设置一段文字的行高,如果想设置两行文字间隔比较大的话,就可以用这个属性来设置,当然我们也可以用margin-top, margin-bottom来设置。我们先看一个例子:<html><head><style type="text/css">p.big {line-height: 105px; mar...原创 2019-11-03 12:07:36 · 326 阅读 · 0 评论 -
background-image 属性改变时 会出现闪烁现象,以及解决办法
在做一个新需求,音乐播控button 焦点样式和非焦点样式是两幅小图片。 想着用background-image 来实现。 移动焦点时切换background-image属性就可以了。做出来demo后才发现 当第一次切换属性 时 会出现闪烁现象,非第一次就不会出现闪烁现象。从显示看应该非第一次用到了图片缓存问题,所以就不会出现闪烁现象了。demo如下:.div1_default{...原创 2019-07-04 10:31:23 · 5150 阅读 · 0 评论 -
CSS3 nth-of-type 属性
昨天修改bug看到同事用到了nth-of-type属性,刚看到时不知是何物,百度了一下才知道。 感觉这个属性还挺实用。实验一下, #div1 { width: 500px; height: 200px; padding: 0 20px 0 20px; border: 5px solid; border-color: #ff5f38; m...原创 2019-01-03 09:32:24 · 251 阅读 · 0 评论 -
CSS中的padding border margin
Css的盒子模型是比较重要的一个概念,在画页面布局时是基础,下面就通过一个小例子看下这个概念。#div1 { width: 300px; height: 200px; background: #4cb6ff; padding: 0 80px 0 20px; border: 5px solid; border-color: #ff5f38;...原创 2019-01-03 09:16:13 · 237 阅读 · 0 评论 -
CSS3 opacity
设置 div 元素的不透明级别,规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。<div id="backGID"> <div id="foreGID"> see background color </div></div>#backGID{ width: 500px; h...原创 2018-11-25 17:03:24 · 277 阅读 · 0 评论 -
CSS text-decoration 属性
一个新需求要给字符后面加下划线,不知道咋弄。原来有text-decoration属性#decoration{ text-decoration : underline;}<div id="decoration">liubangbo test decoration</div>好使。不过有的浏览器不支持这个属性,例如cobalt浏览器。那么还可以用b...原创 2018-11-16 19:24:23 · 825 阅读 · 0 评论