css3
idomyway
这个作者很懒,什么都没留下…
展开
-
CSS3 background属性使背景图不再拉伸,变形,随窗口变化而变化
前言 在div设置背景图时,背景图经常会随浏览器的拖拽大小的变化而变化,造成形变解决方法设置background-size属性background-size: cover;原创 2020-12-16 22:06:59 · 9702 阅读 · 0 评论 -
CSS-防止双击选中html选中文字
前言 HTML页中经常出现双击选中html中文字情况解决方法给span或其他的元素加上这个属性:onselectstart="return false"原创 2020-12-15 21:16:16 · 960 阅读 · 0 评论 -
CSS3 微信小程序和web端适用让图片居中不变形
前言 图片的宽高比和外层容器的宽高比不同是,设置充满的时候回发生形变。 参考链接:https://www.cnblogs.com/web1/p/9327635.htmlweb端.img{vertical-align:middle;object-fit: cover;} object-fit: cover的效果和background-size:cover;的效果转载 2020-08-25 20:44:45 · 564 阅读 · 0 评论 -
CSS3 - :first-child,:nth-child(1) 失效
html<h1>logo</h1><article>article1</article><article>article2</article><article>article3</article>cssarticle:first-child { color: red;artic...转载 2019-07-22 22:52:26 · 5214 阅读 · 1 评论 -
CSS3- Stylus使用
选择器 传统css写法body { color: #fff;} stylus写法body color white父级引用 字符&指向父选择器input color #A7A7A7 &:hover col...转载 2019-07-22 22:44:35 · 1232 阅读 · 0 评论 -
CSS3 - :nth-child()选择前几个元素
/* 选择第n个,n位数字 */:nth-child(n)选择列表中的偶数标签:nth-child(2n)选择列表中的奇数标签:nth-child(2n-1)选择前几个元素/*【负方向范围】选择第1个到第6个 */:nth-child(-n+6){}从第几个开始选择/*【正方向范围】选择从第6个开始的,直到最后 */:nth-child(n+6){}两者结合使...原创 2019-06-27 22:35:52 · 30524 阅读 · 4 评论 -
CSS3 - flex属性
前言 CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性,用来设置flex-growflex-shrinkflex-basis flex-grow 属性:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 &n...转载 2019-06-02 22:08:05 · 1507 阅读 · 0 评论 -
CSS3 - Less中calc计算属性
前言 在写普通的CSS样式时,计算属性的写法如下:.box { widhth: 100%; height: calc(100% - 50px);}Less中的写法.box { width: 100%; height: calc(~"100% - 30px"); // 效果相同 height: ~"calc(100% - 60px...原创 2019-06-18 18:32:10 · 3756 阅读 · 0 评论 -
css 小程序单位rpx及rem
rpx 微信小程序单位 规定屏幕宽度为750rpxrpx和px的转换 如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。rem和px关系 ...原创 2019-05-23 22:48:06 · 1219 阅读 · 0 评论 -
CSS 自适应布局视口单位 vw、vh
什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域; 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 视口单位中的“视口”,桌面...原创 2019-05-23 22:43:03 · 642 阅读 · 0 评论 -
CSS 伪类选择器中的: 和 ::(冒号区别)
在平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的,所以两者到底有什么区别呢,我们先来看下W3C关于CSS3选择器的规范中有一段描述: A pseudo-element is made of two colons (::)followed by the name of the pseudo...转载 2019-04-22 22:09:33 · 8654 阅读 · 1 评论 -
CSS 实现隐藏滚动条滚动
需求:当页面元素溢出的时候会产生滚动条,这个时候需要页面样式优化:CSS实现隐藏滚动条但是可以滚动。css伪类元素控制body::-webkit-scrollbar { display: none;}demo<head> <meta charset="UTF-8"> <title></title> &l...转载 2019-04-22 22:00:10 · 998 阅读 · 1 评论 -
input checkbox 复选框大小修改
前言 checkbox的大小是不能通过宽高是设定的,而且在调checkbox的样式的同时,很可能会调乱同行的其他样式。解决方法 设置zoom属性(放大) 利用style:<input type="checkbox" name=&quo原创 2018-12-17 23:37:59 · 12802 阅读 · 0 评论 -
JavaScript 改变canvas的大小
前言 canvas直接设置样式改变的只是canvas的大小,但是像素点并没有因此而改变,所以style 会拉升canvas的长宽, 只有直接设置attribute的属性 ,像素点的数量才会增加,canvas变化的同时,不会拉升图形1.直接设置style,document.getElemntById(...原创 2018-11-02 16:07:29 · 6491 阅读 · 2 评论 -
CSS 标签居中
前言 在不知道div或者其他标签宽度的时候,在完成在父级元素中居中.CSS样式position:absolute;left:50%;width:fit-content;height:100%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-trans...原创 2018-10-23 11:02:37 · 2079 阅读 · 0 评论 -
css3—calc()函数 —自适应情况下预留宽度
语法:calc() = calc(四则运算)说明:用于动态计算长度值。需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算;calc()函数支持 “+”, “-“, “*”, “/” 运算;calc()函数使用标准的数学运算优先级规则;兼容性:实例<!DOCTYPE html><html lang=原创 2018-01-24 18:09:19 · 1651 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号(…)
需求HTML中文字超限时用省略号结尾…单行文本以省略号结尾要加宽度width属来兼容部分浏览。代码overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果多行文本以省略号结尾代码display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;o原创 2017-11-25 11:42:25 · 11841 阅读 · 0 评论