CSS
CSS
alokka
前端劝退师
展开
-
CSS 文本 \n 解析换行
message: '爱你的每个瞬间\n像飞驰而过的地铁'<h1 className='message'>{message}</h1>显示为爱你的每个瞬间 像飞驰而过的地铁而不是换行加个样式.message{ white-space: pre-wrap; }// pre-wrap 保留空白符序列,但是正常地进行换行。显示为爱你的每个瞬间像飞驰而过的地铁...原创 2022-03-16 16:45:32 · 9536 阅读 · 2 评论 -
CSS .style 和 getComputedStyle 和 currentStyle 区别
三个方法都能获取元素的样式,不过他们之间还是有差别1. .style.style 只能获取元素行内样式2. getComputedStyle (chrome、火狐)它可以访问所有样式,即既可以是行内样式,也可以是内嵌或链式样式。它对所有标准浏览器都可用,但 IE6、IE7 和 IE8 不支持该方法。3. .currentStyle该属性只对 IE 浏览器有效,对 Chrome 和 FF 浏览器不可用,其主要是用于兼容 IE6、IE7 和 IE8。兼容写法const sty = d.cur.原创 2022-02-05 02:02:40 · 355 阅读 · 0 评论 -
element-ui el-input type=“number“ 清除上下箭头
在全局 css 加上input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"]{ -moz-appearance: textfield;}原创 2022-01-27 19:38:31 · 771 阅读 · 0 评论 -
CSS table表格 表头head固定 内容tbody滚动
核心思想:首先是给tbody设置 display:block; 把行内变成块元素,然后给 tbody 一个固定高度 和 overflow-y:scroll;,确保tbody多余的内容可以滑动。给 thead 和 tbody tr 设置 display:table;,主要是 table-layout:fixed;,每个单元格均匀分配为了 thead 和 tbody 对齐,给 thead 宽...原创 2020-02-21 18:04:49 · 1305 阅读 · 2 评论 -
css中input与button高度不一致的原因及解决方法
首先说下input和button高度不一致的原因之前在学习react项目,写todolist的时候遇到了这样的小问题,查阅了一些资料 发现网上说什么的都有,五花八门,经过我查阅资料,发现对不齐是因为行内元素的基线是不同的,所以会导致高低不同。解决办法也很简单给每个元素加上 ↓ 就可以了。 vertical-align:middle;.target { vertical-a...原创 2019-05-07 16:02:57 · 4635 阅读 · 1 评论 -
CSS font-family 中的苹方字体
苹方提供了六个字重,font-family 定义如下:苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;苹方-简 极细体font-family: PingFangSC-Ultralight, sans-serif;苹方-简 细体font-family: PingFangSC-Light, sans-serif;苹方-简 纤细体f...原创 2018-10-26 13:32:29 · 33337 阅读 · 0 评论 -
CSS3-tooltip提示框 动画提示框
代码复制到本地可以直接看到效果效果在这: html>head lang="en"> meta charset="UTF-8"> title>title>head>style> /*清除默认样式*/ html, body, h1, h2, h3, h4, h5, h6, form, fieldset,div,dl,dt,dd,ul,ol,li,inp原创 2018-01-25 14:20:28 · 1316 阅读 · 0 评论 -
CSS 绘制三角形小箭头
经常浏览网页或者写页面的同学 肯定见过网页中导航栏或者二维码提示中出现的三角形小箭头(图片来源网络 侵删)这种三角形箭头不需要在用图片来实现了 今天就教大家用纯 css 实现三角形小箭头 为了能看清 三角形颜色用黑色代替 大家可以任意更改颜色下三角<!DOCTYPE html><html><head><meta charset="utf-...原创 2019-09-27 17:04:44 · 645 阅读 · 0 评论