CSS
CSS集锦
qing_小诺
这个作者很懒,什么都没留下…
展开
-
【CSS】解决height = line-height 文字不垂直居中(偏上、偏下)的问题
查看 font-family 属性,确认是否是因为字体而导致的不垂直居中问题。line-height 属性设置的行高也就是定义的两行文字基线之间的距离!基线就是小写x字母的下边缘(线) 就是我们常说的。原创 2024-01-15 15:47:03 · 941 阅读 · 0 评论 -
【CSS】设置0.5px的边框宽度
直接写border:0.5px solid #ccc;总结:目前推荐的是伪元素+tranform缩放的方法,相对灵活一点,可以针对不同元素进行设置。原创 2024-01-04 09:27:05 · 829 阅读 · 0 评论 -
【CSS】修改滚动条样式
原生的滚动条有点儿丑,如下代码实现简单的滚动条:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2019-09-23 10:07:46 · 192 阅读 · 0 评论 -
【CSS、JS】修改单选框样式,监听单选框
懒了懒了,废话不多说,直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-09-20 18:04:14 · 1162 阅读 · 0 评论 -
【CSS】一个div宽度或高度固定,另一个div铺满剩余空间
如果我们想实现下图的效果(一行中放两个div,左边的一个div宽度固定,右边的div横向铺满):首先我们先写三个div:父div包裹两个div。<body> <div class="content"> <div class="left">left</div> <div class="righ...原创 2019-08-30 16:33:08 · 13482 阅读 · 0 评论 -
【CSS】让div在另一个div中垂直居中
垂直居中是布局中十分常见的效果之一,如果我们想实现下图的效果:首先我们写两个div:(下面的介绍中,我们称外层div为父div,里面的div为子div)。<body> <div class="content"> <div>我是需要垂直居中的div</div> </div></b...原创 2019-08-27 15:02:44 · 7808 阅读 · 0 评论 -
【CSS】修改input中默认placeholder的样式
默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下:<input type='text' placeholder='请留下您的联系方式' class='input-phone'/> ::-webkit-input-placeholder { /* Chrome/Opera/Safa...原创 2019-03-26 10:50:23 · 8847 阅读 · 0 评论 -
【CSS】解决div设置height高度为100%未生效的办法
1、问题的发现:div设置height高度为100%却未生效<head> <meta charset="UTF-8"> <title>Title</title> <style> .contentDiv { width: 100%; height:...原创 2019-03-21 17:05:14 · 7539 阅读 · 3 评论 -
【CSS】设置按钮disabled时的样式
还原一下写此文的场景:微信小程序中,点击button,设置disabled的值为true时,button样式就变灰了:button标签:<button class='bottomBtn' bindtap="doWorkBtn" disabled="{{btnDisabled}}">btn</button>button样式:.bottomBtn { w...原创 2019-03-12 13:47:28 · 30929 阅读 · 1 评论 -
【CSS】清除浮动的几种方法
清除浮动是每一个web前端必须掌握的技能,下面就来看看有哪些方法吧。以下面的场景为例,给大家展示一下不清除浮动带来的“车祸现场”。例子中有两个div,一个div1,一个div2,div1中包含一个向左浮动的div和一个向右浮动的div,为方便观察,给他们都添加了背景颜色,代码如下:css:<style type="text/css"> .div1{backg...原创 2019-02-01 14:45:40 · 2084 阅读 · 0 评论 -
【CSS】控制文本溢出显示省略号
<p>css文本溢出显示省略号css文本溢出显示省略号css文本溢出显示省略号css文本溢出显示省略号css文本溢出显示省略号</p>1、单行文本溢出,添加以下样式: p { background-color: #ccffcc; width: 300px; overflow: h...原创 2019-01-31 12:15:25 · 317 阅读 · 0 评论 -
【CSS】div和img之间有间隙的原因及解决办法
原因:由于img标签是行内标签,display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行符/空格间隙问题”。如果inline-block元素间有空格或是换行产......原创 2019-01-25 14:33:39 · 5842 阅读 · 1 评论 -
【CSS】input输入框如何去掉点击后出现的边框
开发过程中,input在点击输入时,有下图所示的默认边框出现: 下面就来说说解决办法:方法一:直接给input添加样式:input { outline: none;} 方法二: 控制聚焦时不出现边框,添加下面样式: input:focus{ outline: none;} ...原创 2019-01-25 14:04:31 · 42146 阅读 · 0 评论 -
【CSS】图片居中剪裁,避免图片变形
不管是在pc端还是在移动端,页面都必不可少的会出现很多图片,正常情况下,我们让图片100%自适应显示的话,如图下:在这里可以看到,图片有大有小,但是有时候我们需要图片显示的大小是一样,而且不能变形,那么我们需要给图片加入以下样式代码:【主要是object-fit: cover;属性】.panorama li img{ display: block; width:1...原创 2019-01-18 14:16:09 · 1878 阅读 · 0 评论 -
【CSS】解决父元素display:flex布局下的子元素宽度无效问题
因为设置了display: flex; 导致block布局变成了flex布局, 所以如果想要在已经设置了flex布局的基础上,再进行子元素宽度的设置,可以应用下面的样式:(在该子元素上设置)flex-shrink: 0;width: 100rpx;这样就可以啦~快去试试吧~...原创 2018-12-03 16:00:34 · 13994 阅读 · 0 评论 -
【CSS】同一行文字,字体大小不同,实现垂直居中
话不多说,先来看一下默认情况下,字体大小不同的同一行文字是如何展示的,以下实例中添加了背景颜色,用于分辨:<body><div class="row"> <span class="zongjia">总价</span><span class="price">200万</span&am原创 2018-11-16 13:07:32 · 21359 阅读 · 4 评论 -
【CSS】行内元素换行造成的默认间隙问题
用并列几个行内元素时,经常的遇到默认间隙问题,现在来看一下遇到的场景:遇到间隙的场景:<style> span {background-color: red;}</style><body><div> <span>行内元素</span> <span>行内元素</原创 2018-11-16 10:33:02 · 2702 阅读 · 0 评论 -
【CSS、JS】HTML使用小技巧
现整理一下经常用到的一些属性啥的,以便后期直接copy,哈哈~1、让html支持手机浏览器:在网页<head></head>中加入以下代码,就可以正常显示了:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-sca...原创 2017-11-21 16:48:39 · 594 阅读 · 0 评论