常用样式积累-scss
/*** author ctj -- 自定义公用样式*/ /*清除浮动*/ .clearfix:after {height: 0;content: '';display: block;clear: both; } .clearfix { /*兼容 IE*/zoom: 1; }/*布局*/ //水平对齐 .flexh {display: -webkit-box;display: -ms-flexbox;display: flex; }//垂直对齐 .flexv {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; }//不扩展自身 .flex0 {-webkit-box-flex: 0;-ms-flex: none;flex: none; } // 尽可能占空余空间 .flex1 {-webkit-box-flex: 1;-ms-flex: 1;flex: 1; }// 两端向中间对齐 .flex-between {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; }// 中间向两端对齐 .flex-around {-ms-flex-pack: distribute;justify-content: space-around; } // 垂直排序 .flex-vstart {align-items: flex-start } // 水平排序 .flex-hstart {justify-content: flex-start }// 多列 水平居中对齐 .flex-vcenter {-webkit-box-align: center;-ms-flex-align: center;align-items: center; }// 多行垂直居中对齐 .flex-hcenter {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; } // 垂直倒序 .flex-vend {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end; } // 水平倒序 .flex-hend {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; } // 自身重定对齐 .flex-self-start {-ms-flex-item-align: start;align-self: flex-start; } .flex-self-center {align-self: center; } .flex-self-end {-ms-flex-item-align: end;align-self: flex-end; }/*flex换行*/ .flex-wrap {-ms-flex-wrap: wrap;flex-wrap: wrap; }/*手形鼠标*/ .cur-pointer {cursor: pointer; }/*阴影*/ .box-shadow {-webkit-box-shadow: 0 0 13px -5px #000;box-shadow: 0 0 13px -5px #000; } // 文本处理 .text-center { text-align: center; } .text-right { text-align: right; } .text-nowrap { white-space: nowrap; } .over-hide { overflow: hidden; } /*文本换行*/ .break-all { word-break: break-all; } /*文本pre显示*/ .content-pro { white-space: pre-wrap; } /*省略号*/ .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }/*美化滚动条*/ .scrollbar {&::-webkit-scrollbar {width: 8px;height: 8px;}&::-webkit-scrollbar-track {background-color: transparent;border-radius: 4px;}&::-webkit-scrollbar-thumb {border-radius: 4px;background-color: #ddd;}&::-webkit-scrollbar-button {display: block;width: 1px;height: 1px;}&.auto-hide::-webkit-scrollbar-thumb {border-radius: 4px;background-color: transparent;}&.auto-hide {&:hover::-webkit-scrollbar-thumb {background-color: #c3c3c3;}&:hover::-webkit-scrollbar {width: 8px;height: 8px;}} } // 颜色class .color-link { color: #459AE9; } .color-grey { color: #8B97A4; } .color-green { color: #4ee49b; }
学习自Flex布局 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
转载于:https://www.cnblogs.com/chentingjun/p/10438919.html
常用样式积累-scss相关推荐
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
- css文字向右对齐_web前端入门到实战:css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- Qt样式表之二:QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
- html常用样式margin、border怎么使用
html常用样式margin.border怎么使用 一.总结 一句话总结:1.margin:auto配合width才能居中:2.border的三个属性依次是边框宽度,边框样式,边框颜色 1.html中 ...
- CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头 实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
- RN style使用以及常用样式总结
React-Native 编写的应用的样式不是靠css来实现的,而是依赖javascript来为你的应用来添加样式 1.声明样式 导入必要文件 import React, { StyleSheet } ...
- 『总结』CSS/CSS3常用样式与web移动端资源
css/css3常用样式 强制文本显示 单行显示语法:white-space:nowrap; 让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下 div{white-sp ...
最新文章
- oracle元字符,oracle中正则表达式的基本元字符
- maven 关于使用 snapshot 的坑
- 易优CMS精美简洁作文范文网站模板源码
- 用eclipse开发android小程序,【转】Eclipse 开发Android小程序遇到的问题总结
- windows + Linux 自定义模板配置 怎么使用自定义规范管理器
- 自行车中的物理知识汇总
- 驱动启动时遇到:打开服务失败(错误码=6):句柄无效 解决方案
- 往届毕业生档案去向查询网_大学毕业档案怎么处理 毕业生档案去向查询
- Usability: Rules and Principle
- 在VS Code中使用Clang-Format
- linux系统中的临时文件
- 经典RPG游戏Crypto Sword Magic
- UG NX 12 组合投影曲线
- C# 中的Event EventArgs和Delegate(转载)
- ucosiii源码注释
- 矩阵模板(矩阵快速幂算法用法)
- HDU 2188 悼念512汶川大地震遇难同胞——选拔志愿者
- Spring框架AOP源码剖析
- JS事件监听手机屏幕触摸事件 Touch
- 全国大学生大数据技能竞赛(Hadoop集群搭建)
热门文章
- Mysql,SqlServer,Oracle主键自动增长的设置
- 2022-2028年中国女式西装行业研究及前瞻分析报告
- 2022-2028年中国氯磺化聚乙烯橡胶行业市场深度分析及未来趋势预测报告
- Go 学习笔记(66)— Go 并发同步原语(sync.Mutex、sync.RWMutex、sync.Once)
- python读取xml文件报错ValueError: multi-byte encodings are not supported
- GeneratorSqlMapCustom(mybatis逆向工程)
- VS Code搭建C/C++开发环境超详细教程
- GOF23设计模式(创建型模式)单例模式
- 编写可调模板并使用自动调谐器
- 激光雷达Lidar Architecture and Lidar Design(上)