•   图片等比例自动缩放
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. JS实现windows.open打开窗口并居中

    function openWin() {            var url='Add.aspx';                             //转向网页的地址;           ...

  2. [GO]timer的应用

    package main import ( "time" "fmt" ) func main() { //创建一个定时器,设置时间为2s,2s后,往time.C ...

  3. [GO]json解析到map

    package main import ( "encoding/json" "fmt" ) var str string func main() { m := ...

  4. [GO]结构体的比较和赋值

    package main import "fmt" func main() { type student struct { id int name string sex byte ...

  5. CodeForces 288C Polo the Penguin and XOR operation (位运算,异或)

    题意:给一个数 n,让你求一个排列,使得这个排列与0-n的对应数的异或之最大. 析:既然是异或就得考虑异或的用法,然后想怎么才是最大呢,如果两个数二进制数正好互补,不就最大了么,比如,一个数是100, ...

  6. 什么是 Java 内存模型,最初它是怎样被破坏的?(转载)

    活跃了将近三年的 JSR 133,近期发布了关于如何修复 Java 内存模型(Java Memory Model, JMM)的公开建议.原始 JMM 中有几个严重缺陷,这导致了一些难度高得惊人的概念语 ...

  7. css flex cheat sheet

    .container{ display: -webkit-flex/inline-flex; display: -moz-flex/inline-flex; display: -ms-flex/inl ...

  8. GBK,UTF-8,和ISO8859-1之间的编码与解码

    Unicode.UTF-8 和 ISO8859-1到底有什么区别 将以"中文"两个字为例,经查表可以知道其GB2312编码是"d6d0 cec4",Unicod ...

  9. robot中使用evaluate转化数据格式

    如果你使用robot却没有用过evaluate,那你将永远禁锢在框架中. json对象格式入参可以使用字典格式直接传入,但最近有一个接口测试的入参是一个json数组,在传参时总是提示请求参数不合法, ...

  10. ES_HEAD基本查询操作

    一.基本查询操作   选择索引 设置type查询条件 搜索         操作说明如图:     二.must, must not,should的区别 must 返回的文档必须满足must子句的条件 ...