解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

.wrap {display: inline-block;overflow: hiddenvertical-align: bottom
}

超出部分显示省略号

// 单行文本
.wrap {overflow:hidden;/*超出部分隐藏*/text-overflow:ellipsis;/*超出部分显示省略号*/white-space:nowrap;/*规定段落中的文本不进行换行 */
}
// 多行文本
.wrap {width: 100%;overflow: hidden;display: -webkit-box;   //将对象作为弹性伸缩盒子模型显示  *必须结合的属性*-webkit-box-orient: vertical;   //设置伸缩盒对象的子元素的排列方式  *必须结合的属性*-webkit-line-clamp: 3;   //用来限制在一个块元素中显示的文本的行数word-break: break-all;   //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
}

css实现不换行、自动换行、强制换行

//不换行
.box{white-space:nowrap;
}
//自动换行
.box{word-wrap: break-word;word-break: normal;
}
//强制换行
.box{word-break:break-all;
}

CSS实现文本两端对齐

.box{text-align: justify;text-justify: distribute-all-lines;  //ie6-8text-align-last: justify;  //一个块或行的最后一行对齐方式-moz-text-align-last: justify;-webkit-text-align-last: justify;
}

实现文字竖向排版

// 单列展示时
.box{width: 25px;line-height: 18px;height: auto;font-size: 12px;padding: 8px 5px;word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
}
// 多列展示时
.box{height: 210px;line-height: 30px;text-align: justify;writing-mode: vertical-lr;  //从左向右    writing-mode: tb-lr;        //IE从左向右//writing-mode: vertical-rl;  -- 从右向左//writing-mode: tb-rl;        -- 从右向左
}

使元素鼠标事件失效

.box{pointer-events: none;cursor: default;
}

禁止用户选择

.box{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}

cursor属性

.box{cursor：pointer; //小手指；cursor：help; //箭头加问号；cursor：wait; //转圈圈；cursor：move; //移动光标；cursor：crosshair; //十字光标
}

使用硬件加速

.box{transform: translateZ(0);
}

图片宽度自适应

img {max-width: 100%}

Text-transform和Font Variant

p {text-transform: uppercase}  // 将所有字母变成大写字母
p {text-transform: lowercase}  // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps}   // 将字体变成小型的大写字母

将一个容器设为透明

.box{ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
}

消除transtration闪屏

.box{-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-perspective: 1000;
}

自定义滚动条

overflow-y: scroll;
整个滚动条
::-webkit-scrollbar {width: 5px;
}滚动条的轨道
::-webkit-scrollbar-track {background-color: #ffa336;border-radius: 5px;
}滚动条的滑块
::-webkit-scorllbar-thumb {background-color: #ffc076;border-radius: 5px;
}

让 HTML 识别 string 里的 ‘\n’ 并换行

body {white-space: pre-line;
}

实现一个三角形

.box{ border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px;
}

移除被点链接的边框

a {outline: none}
a {outline: 0}

使用CSS显示链接之后的URL

a:after{content:" (" attr(href) ") ";}

select内容居中显示、下拉内容右对齐

select{text-align: center;text-align-last: center;
}
select option {direction: rtl;
}

修改input输入框中光标的颜色不改变字体的颜色

input{color:  #fff;caret-color: red;
}

修改input 输入框中 placeholder 默认字体样式

//webkit内核的浏览器
input::-webkit-input-placeholder {color: #c2c6ce;
}
//Firefox版本4-18
input:-moz-placeholder {color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {color: #c2c6ce;
}
//IE浏览器
input:-ms-input-placeholder {color: #c2c6ce;
}

子元素固定宽度 父元素宽度被撑开

// 父元素下的子元素是行内元素
.box{white-space: nowrap;
}
// 若父元素下的子元素是块级元素
.box{white-space: nowrap;  // 子元素不被换行display: inline-block;
}

让div里的图片和文字同时上下居中

.box{height: 100,line-height: 100
}
img {vertival-align：middle
}
// vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素
// vertical-align：baseline/top/middle/bottom/sub/text-top;

实现宽高等比例自适应矩形

.scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative;
}.item {position: absolute; width: 100%;height: 100%;background-color: 499e56;
}
<div class="scale"><div class="item">这里是所有子元素的容器</div>
</div>

transfrom的rotate属性在span标签下失效

span {display: inline-block
}

边框字体同色

.box{width: 200px;height: 200px;color: #000;font-size: 30px;border: 50px solid currentColor;// border: 50px solid; // 实现二
}

页面滚动条样式修改


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {width: 10px;height: 16px;background-color: #e5e5e5;border-radius: 4px;
}/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 5px;background-color: #F5F5F5;
}/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {border-radius: 5px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #555;
}

隐藏滚动条

::-webkit-scrollbar{display:none;
}ie隐藏滚动条样式代码：
html {/*隐藏滚动条，当IE下溢出，仍然可以滚动*/-ms-overflow-style:none;/*火狐下隐藏滚动条*/overflow:-moz-scrollbars-none;
}
/*Chrome下隐藏滚动条，溢出可以透明滚动*/html::-webkit-scrollbar{width:0px}

修改iframe样式

var iframe = document.querySelector('iframe')
iframe.onload = function() {iframe.contentWindow.document.styleSheets[0].addRule('body::-webkit-scrollbar', 'display: none')// iframe.contentWindow.document.styleSheets[0].insertRule('body::-webkit-scrollbar {width:0px}', 0)iframe.contentWindow.document.querySelector('body').style.width = 0
}

圆周运动实现

<div class="class_ball"></div>
.class_ball{width:8px;height:8px;background:#000;border-radius:4px;box-shadow:0 0 7px #222;left:200px;top:200px;position:absolute;animation:action 2s linear infinite;
}
@keyframes action {from {transform: rotate(0deg) translate(58px) rotate(0deg);}to {transform: rotate(360deg) translate(58px) rotate(-360deg);}
}

CSS使用小操作(隐藏滚动,实现三角行等...)相关推荐

  1. 【干货#011】小程序页面滚动实现广告条隐藏

    缘起 小程序需要在手机狭小的屏幕中放入尽量多的内容,而老板想在在页面放个广告条,由于挤占了不然就不大的页面控件,对程序的功能操作又有较大的影响.如何兼顾两者的需求? 下面介绍一种默认显示页面首部广告条 ...

  2. 详情小三角css,CSS实现小三角

    CSS实现小三角三角的颜色可以根据需要设置,白色的三角只需要把 border-left.border-right设置为transparent,然后border-bottom设置为#fff就可以了 更加 ...

  3. css补充（1）：css实现小三角，精灵图，字体图标

    文章目录 一.css实现小三角 1.1 三角形实现 二.精灵图的使用 三.字体图标 一.css实现小三角 1.1 三角形实现 html: <div class="sanjiao&quo ...

  4. CSS内容超出元素高度滚动，并且滚动条隐藏

    CSS内容超出元素高度滚动,并且滚动条隐藏 给父元素设置宽度,溢出隐藏,子元素设置 // html <div class="box"><div class=&qu ...

  5. CSS基础小总结，随手过来翻一翻

    white-space:nowrap 文字强制一行内显示 本文目录: HTML标签 1.普通标签 1.文本格式化标签 2.图像标签 3.特殊(转义)字符 4.表格标签 5.列表标签 无序列表:< ...

  6. 基于HTML+CSS+JavaScript “小味鲜“餐厅网页设计

    基于HTML+CSS+JavaScript "小味鲜"餐厅网页设计 每博一文案 师父说"生活中的负能大多来于圈子里的抱怨",有时候,你不想做别人情绪的垃圾桶. ...

  7. CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号

    [CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...

  8. css实现小气泡样式和模拟京东快递单号放大效果

    css实现小气泡样式:border-color: #fff transparent transparent; transparent表示透明,第一个代表上三角,第二个代表左右三角,第三个代表下三角 & ...

  9. 【CSS】小妙招，各种问题总结方法处理

    1.实现div文字溢出自动省略号截取 overflow:hidden; /*超过部分不显示*/ text-overflow:ellipsis; /*超过部分用点点表示*/ white-space:no ...

最新文章

  1. 【BZOJ2797】[Poi2012]Squarks 暴力乱搞
  2. Blazor带我重玩前端(六)
  3. flutter TabBar 底部导航栏
  4. OpenShift 4 - 使用Debezium实现MySQL的CDC变化数据捕获
  5. 看咒语，知情节？他们用《哈利·波特》让AI学习剧透
  6. Entity Resolution（实体解析）
  7. GIS案例练习-----------第十天
  8. Layui 表格渲染
  9. qq同步android 2.2,支持手机号注册！Android QQ同步助手2.1发布
  10. MTK平台Camera图片的Exif信息
  11. 免开发打造智能咖啡机，让您省时又省力
  12. 按键截屏功能源码流程讲解
  13. 制作论坛发帖页面（操作节点的方式）（JavaScript）
  14. Android中夜间模式的三种实现方式
  15. 运行出现：Trying to start MapKit location updates without prompting for location authorization.
  16. 微信获取nickname mysql乱码_微信nickname乱码（emoji）及mysql编码格式设置（utf8mb4）解决的过程...
  17. 怎么在GIF动图中添加文字？一个方法教你快速完成GIF加字
  18. 真c++ 从二叉树到红黑树（4）之二叉平衡搜索树AVL
  19. ifconfig查看网络丢包
  20. STM8L HSE时钟配置

热门文章

  1. 唯品会密码JS解密与python模拟登录
  2. VMware 安装Mac os 10.11 苹果系统
  3. 食品科学与工程考研可以考计算机吗,食品科学与工程女汉子，对于考研比较迷茫，有几个问题麻烦各位前辈指点迷津，谢谢 。 - 考研 - 小木虫 - 学术 科研 互动社区...
  4. Oracle 12c之Oracle 12c与云计算
  5. COleDateTime SYSTEMTIME CTime
  6. 从招式与内功谈起——设计模式概述(三)
  7. 原生js+css3实现点击图片正方体旋转展现图片
  8. node 拦截器拦截请求下载电子书以及等待前端渲染操作、浏览器操作
  9. linux symlink 函数,详解C语言中symlink()函数和readlink()函数的使用
  10. 小程序转uni-app——onLoad语法转换