•   图片等比例自动缩放
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
  • 多行省略  最后line-clamp设置的是几行
ellipsis() 
overflow : hidden
text-overflow : ellipsis
display : -webkit-box
-webkit-box-orient : vertical
-webkit-line-clamp 3
  • css实现宽高比例一致的图形  (可防止图片抖动)
    width: 100%
height: 0
overflow: hidden
padding-bottom: 26.7%
  • vue中样式穿透 样式穿透用>>>   在组件中scoped只能用自己的样式 不能用子组件的样式  使用>>>可以从父组件中穿透  改变其子组件的样式
.wrapper >>> .swiper-pagination-bullet-active

css一些常用技巧代码的更多相关文章

  1. CSS兼容常用技巧

    请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...

  2. html和css的常用语法代码详解

    前端html html 超文本标记语言.文本,图片,视频,音频. 网页基本信息 一个基础的网页具有的一些信息. <!-- 这是注释--> <!--!DOCTYPE网页约束规范--&g ...

  3. api日常总结:前端常用js函数和CSS常用技巧

    我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...

  4. CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  5. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  6. CSS hack常用方案(摘选)

    邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...

  7. HTML5-移动开发常用技巧与弹性布局的使用

    一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息 1.width=device-width: 设置Viewport视口宽度等于设备宽度 2.initial-scale ...

  8. DIV+CSS一些小小的技巧

    DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...

  9. chrome控制台常用技巧有哪些

    chrome控制台常用技巧有哪些 一.总结 一句话总结:别的里面支持的快捷键,chrome里面几乎都支持,比如sublime中的ctrl+d,其实真是一通百通,都差不多的 1.chrome如何快速切换 ...

随机推荐

  1. python report中文显示乱码

    环境:python2.7 测试框架: nose (1.3.7) nose-html-reporting (0.2.3) 问题:生成测试报告失败的时候,报告会抓取代码中的print,打开后看到的中文是乱 ...

  2. SSH整合案例

    1.Hibernate框架 Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernat ...

  3. ORB_SLAM2应用实践_ROS小强机器人

    http://www.cnblogs.com/2008nmj/p/6166282.html

  4. 编写高质量代码改善C#程序的157个建议——建议71:区分异步和多线程应用场景

    建议71:区分异步和多线程应用场景 初学者有时候会将异步和多线程混为一谈.如果对它们之间的区别不是很清楚,很容易写出下面这样的代码: private void buttonGetPage_Click( ...

  5. C#中的异步调用及异步设计模式(三)——基于事件的异步模式

    四.基于事件的异步模式(设计层面) 基于事件的C#异步编程模式是比IAsyncResult模式更高级的一种异步编程模式,也被用在更多的场合.该异步模式具有以下优点: ·                 ...

  6. linux help

    linux提供了极为详细的帮助工具及文档,一定要养成查找帮助文档的习惯,可以大大减少需要记住的东西,并提高效率. 几乎所有命令都可以使用-h或--help参数获取使用方法,参数信息等. man man ...

  7. Java网络编程のOSI

    我们可以把客户机和远程服务器理解为主机A和主机B,用户和主机A可以通过主机A中的应用程序进行交互,主机A与主机B之间交互则是通过计算机网络通信进行的. 网络中每台机器称为节点.大多数节点是计算机,此外 ...

  8. redis内部数据结构

    redis内部数据结构,是指redis在自身的构建中,基于这些特定的内部数据结构进行的. 简单动态字符串:Simple Dynamic String 双端链表 字典:Dictonary 跳跃表:ski ...

  9. [LeetCode 题解]: Merge k Sorted Lists

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 题 ...

  10. mvc4验证码&输出图像的处理方式

    /// <summary> /// 绘制验证码 /// </summary> /// <returns></returns> public Action ...