css
关注
分享
扫一扫
css总结
江湖行骗老中医
相信自己！
展开
-
ElementUI中dialog弹出框高度处理
需要在style标签中写上如下的样式，这里使用的less或者scss.abow_dialog { display: flex; justify-content: center; align-items: Center; overflow: hidden; .el-dialog { margin: 0 auto !important; height: 90%; overflow: hidden; .e原创 2021-10-26 10:09:05 · 3239 阅读 · 0 评论 -
ElementUI的表格换行符失效、不换行
后台返回的接口数据 ‘“名称:示例↵ID:717”，在表格种并没有换行，原因是elementUI 在表格样式中写了white-space: normal; （normal空白会被浏览器忽略 \n、↵被忽略了）.el-table .cell { white-space: normal;}解决办法：//方法一 重新定义，覆盖该属性.el-table .cell{ white-space: pre-wrap; //保留空白符序列，但是正常地进行换行。}//方法二 在特定容器下重新定义..原创 2021-09-08 10:02:59 · 1742 阅读 · 0 评论 -
chrome浏览器中自带input样式input:-internal-autofill-selected（修改input背景色）
实现思路1：如果不是想设置为透明色 可直接使用box-shadowinput:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px white inset !important;}实现思路2：关闭自动填充功能 ( 也可实现 不推荐 )<input type="text" autocomplete="off">实现思路3：通过CSS3动画解决input:-webkit-autofill, input:-webk原创 2021-08-15 17:59:13 · 2906 阅读 · 0 评论 -
CSS垂直居中的8种方法
CSS垂直居中的8种方法1、通过verticle-align:middle实现CSS垂直居中。通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。2、通过display:flex实现CSS垂直居中。随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。通过display:f.转载 2021-01-05 11:25:39 · 118 阅读 · 0 评论 -
使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*设为伸缩容器*/ flex-flow:row;/*伸缩项目单行排列*/ } .stable{ width:200px;/*固定宽度*/ .原创 2020-12-20 14:48:49 · 609 阅读 · 0 评论 -
css写特好看边框
html代码：<div class="modal-box"> <!--左上边框--> <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </di...原创 2020-04-08 14:42:32 · 341 阅读 · 0 评论 -
css自定义下拉框样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css自定义下拉框样式</title> <style> body { background:#fff; ...原创 2020-02-09 21:51:18 · 1404 阅读 · 0 评论 -
webstorm配置less解析的方法
前提：已安装node 、 npm 、 全局安装less以下是webstorme中配置：原创 2019-12-04 15:12:01 · 258 阅读 · 0 评论 -
Less(CSS预处理语言)
目录前言CSS的短板预处理语言的诞生选择预处理语言使用 Less 的前奏正文变量嵌套混合方法继承导入函数其他结束语前言CSS的短板作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，...原创 2019-12-04 15:05:41 · 214 阅读 · 0 评论 -
【收藏】20款CSS3动画库，你值得“拥有”
今天逛“市场”看到一些不错的CSS3动画库，感觉很不错，就收藏了，分享给大家拉。帮助开发者在一定的期限内取得有创造性和创新性的成果。1.KiteKite是一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际，易于理解且容易使用。 Kite用法与flexbox相似：justify-content,等等。你可以很轻松地创建复杂的模块。...转载 2019-11-06 17:56:23 · 442 阅读 · 0 评论 -
css实现半圆和圆
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>半圆角</title> <style type="text/css"> div{ width: 100px;...原创 2019-11-06 17:53:54 · 664 阅读 · 0 评论 -
css360度无限循环
.xuanzhuan{ -webkit-animation: rotate 60s linear infinite; -moz-animation: rotate 60s linear infinite; -o-animation: rotate 60s linear infinite; animation: rotate 60s linear infinite;...原创 2019-11-06 17:52:54 · 220 阅读 · 0 评论 -
css疑问框
/*圆角矩形*/.rectangle{ width: 200px; line-height: 50px; height: 50px; text-align: center; border-radius: 15px; position: relative; background-color: red;}/*小三角*/.rectangl...原创 2019-11-06 17:51:43 · 134 阅读 · 0 评论 -
css3定义滚动条样式
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{ width: 16px; height: 16px; border-radius: 10px; background-color: #0B5F9A;} /*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track{ -...原创 2019-11-05 23:00:05 · 89 阅读 · 0 评论 -
纯CSS实现多行文字垂直居中几种方法解析
场景：父元素 高度固定，如何使其中的文字垂直居中？width: 100px;height: 100px; display: table-cell; vertical-align: middletable布局： 利用display:table+display:table-cell的方法<!DOCTYPE html><html lang="en"><...原创 2019-11-05 22:59:18 · 129 阅读 · 0 评论 -
Bootstrap的栅格系统和响应式工具
栅格参数通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C .containe...原创 2019-11-05 22:56:54 · 134 阅读 · 0 评论 -
CSS font-family 各名称一览表
（小米米官网）：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;（京东）： font:12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans...转载 2019-11-05 22:54:40 · 799 阅读 · 0 评论 -
css引入外部字体
css引入外部字体@font-face{ font-family: 'YaHei Consolas Hybrid'; src : url('../fonts/yaheiconsolashybrid.ttf');} body{ font-family: 'YaHei Consolas Hybrid'; font-size: 16px; backgr...原创 2019-11-05 22:53:45 · 131 阅读 · 0 评论 -
css 实现div内显示一行或两行，超出部分用省略号显示
div内显示一行，超出部分用省略号显示white-space: nowrap;overflow: hidden;text-overflow: ellipsis;div内显示两行或三行，超出部分用省略号显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;...原创 2019-11-05 22:52:31 · 298 阅读 · 0 评论 -
css样式初始化
/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }fieldset, img,input,button { border:none; padding:0;margin:0;outline-s...原创 2019-11-05 22:49:25 · 204 阅读 · 0 评论