•   图片等比例自动缩放
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 学习之路开始了

    python 学习之路开始了.....记录点点滴滴....

  2. mysql的explain用法

    Mysql—explain的参数详解及用法 EXPLAIN 的每个输出行提供一个表的相关信息,并且每个行包括下面的列: 项 说明 id MySQL Query Optimizer 选定的执行计划中查询 ...

  3. 网站配置新的YII2可运行版本

    1. config 中的 gitignore 先将 -local 加入版本库 2. 将 runtime 目录添加写权限 3. 将web目录的asset 添加写的权限 4.

  4. 20169205实验二 Java面向对象程序设计

    20169205实验二 Java面向对象程序设计 实验内容及步骤 (一)单元测试 1.三种代码 伪代码:以简洁的自然语言表明设计步骤: 产品代码:用以实现特定功能的程序或机器语言: 测试代码:用以对产 ...

  5. Mac上修改MySQL默认字符集为utf8

    1.检查默认安装的mysql的字符集 mysql> show variables like '%char%'; +--------------------------+------------- ...

  6. memcached整理の缓存问题

    声明:博客来源http://www.cnblogs.com/AloneSword/p/3931905.html,谢谢他的分享! 缓存穿透与缓存雪崩 缓存系统不得不考虑的另一个问题是缓存穿透与失效时的雪 ...

  7. java-04流程控制语句

    这里先简单介绍几种流程控制语句 包括if/if-else.switch语句 1.三大流程控制结构 所谓流程控制,就是说要控制程序的执行方式,根据不同的情况执行不同的代码,从而得到不同情况下的不同结果. ...

  8. 虚拟化 - VirtualBox

    安装 win10上如果要使用VirtualBox安装64位系统(如Ubuntu),那么就要: CPU.主板支持虚拟化技术 打开主板BIOS上的虚拟化开关(前提是前面说的CPU.主板支持虚拟化技术) 不 ...

  9. SPOJ distinct subtrings

    题目链接:戳我 后缀自动机模板? 求不同的子串数量. 直接\(\sum t[i].len-t[t[i].ff].len\)即可 代码如下: #include<iostream> #incl ...

  10. 【洛谷九月月赛T1】签到题(bsgs)(快速乘)

    说好的签到题呢qwq....怎么我签到题都不会啊qwq 之后看了bsgs才发现貌似不是那么那么难fake!!什么东西... 先贴上部分分做法(也就是枚举1的个数,然后每一步都进行取模(这和最后取模结果 ...