css3
tangchangcai.
做一名正直勇敢的青年
展开
-
一个网页适应多种不同屏幕的H5开发,rem的终极用法
先普及一下知识:html原生单位rem 即font size of the root element(相对于根元素font-size而变化的单位),em是相对于其设置了font-size的父元素(如果直接父元素都没有设置,就一级一级往上找,如果没找到,就会采用默认值,其它都与rem的特性一样)。适用范围:在手机端使用,因为手机中都是applewebkit内核(此时html的fontSi...原创 2017-12-04 12:03:40 · 1272 阅读 · 0 评论 -
保留后台返回的数据中\n 的换行功能
1.html:<p style="white-space:pre-wrap"> {{c_str}}</p>2.vue.jsdata:{ str : "第一行 \n 第二行"},computed:{ c_str(){ return decodeURIComponen...原创 2018-11-02 15:06:01 · 5924 阅读 · 1 评论 -
固定宽的块元素内多行或单行超出内容用省略号...显示,超出规定行数,即显示省略号...
快速使用:.nowrap{display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.nowrap_2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}.now...原创 2018-10-31 11:59:03 · 477 阅读 · 0 评论 -
解决a标签里嵌套img,图片产生间隙的问题
approach one: a和img都加上 display:block;brief summary: 产生的原因是a会给yg等字母预留空间。原创 2018-04-27 10:08:57 · 5437 阅读 · 1 评论 -
ios下使用-webkit-overflow-scrolling:touch带来的bug
reference (请先学习): http://www.cnblogs.com/chris-oil/p/6164966.html其它案例(PS:还没有亲自验证):.panel { width: 100%; display: none; padding-top: 0px; overflow-x: hidden; / overflow-y: auto; /...转载 2018-04-24 11:30:13 · 1308 阅读 · 0 评论 -
display:table-cell 与 vertical-align:middle结合使用,使容器内容垂直居中
以下方法如果不起作用,因为img的父级用了float属性。performance://////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////solve方案1: perform...原创 2018-04-12 23:02:29 · 2777 阅读 · 0 评论 -
css background-attachment:fixed固定背景不随内容一起滚动
兼容性:全兼容,只不过IE滚动时会有一点不流畅。base knowledge:background-attachment:scroll(default)/ fixed(div内容不随内容一起滚动)/inheritbrief summary: 要有比较好的体验,建议让background-image:url(""),background-color:""一起使用。这样无图片时也能有很好...原创 2018-04-17 16:31:28 · 1475 阅读 · 1 评论 -
写高效css选择器原则
原理,browser解析css selector是从右到左的。遵循以下原则:1.优先选择符排序:id---class---element---+(相邻)---->(子选择)----ul li(后代)---*(通配)----type="name"(属性)----:hover(伪类)2.只抓关键选择符,选择符层级能少写则少写div ul li a{} == 视情况写成:div a{}...原创 2018-04-03 16:53:24 · 201 阅读 · 0 评论 -
display:inline-block 与 vertical-align和line-height的关系
主要问题:inline的元素与inline-block的元素在同一行时,总是对不齐(对不齐的原因是inline-block默认值 baseline)vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>...原创 2018-04-10 10:16:56 · 3215 阅读 · 0 评论 -
ul里的多个li强制一行显示
Brief summary:很多轮播图等类似场景都会像这样,给ul设置white-space:nowrap,li设置display:inline-block;原创 2018-04-01 22:53:58 · 6231 阅读 · 0 评论 -
类命名参考
一.part css:原创 2018-03-21 09:30:09 · 166 阅读 · 0 评论 -
jQuery and CSS3实现一框3图滑动轮播特效,内附详细说明
以下所有代码都出自我手,贴出来是用于交流用,大家有更好的方法和改进,欢迎联系我哦。QQ2020108166说明:额外引入的layui.css and layui.all.js都是用来写弹出层用的,如果大家嫌弃,就把弹出框那些干掉就行了,不会影响代码运行的。最终效果:<link rel="stylesheet" href="../lib/layer303/css/layui....原创 2018-01-20 09:49:53 · 1123 阅读 · 0 评论 -
css display 与 opacity 和 visibility的区别
小结如下:1 opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的2 visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件3 display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样转载 2018-02-03 17:38:42 · 1010 阅读 · 0 评论 -
原生table的常用属性,border-collapse:collapse,separate,none;cellspacing="10"
原生的table的常用属性://有!DOCTYPE表格属性border-collapse才能兼容ie8。代码如下 :<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table 的常用属性</t原创 2019-01-07 22:18:07 · 2842 阅读 · 0 评论