css
文章平均质量分 91
喜大普奔⁶⁶⁶
做个有思想的程序员,有木有兼职做做啊~啊,缺马内,给我掉下来个赚马内的副业吧
展开
-
父元素设置max-height,子元素高度设置百分比,子元素继承父元素高度失败
小程序里碰到的,最外层page高度 100%,里边第一层盒子高度为 max-height: 60%;第一层盒子里有 title,content,这个 content 高度要随着第一层盒子高度走,最高为第一层盒子的高度减去 title 的高度,如果高度超出第一层盒子高度了需要做滚动处理。利用 flex ,只需要加三行代码即可,甚至如果布局再简单一点,只需要加一行代码就可以。可以看到这个高度是没继承下来的,设置了百分比或者 calc 百分比计算也没用。原创 2023-06-26 15:41:10 · 1431 阅读 · 0 评论 -
html页面禁止用户选中文字,禁止文字被选中,兼容式禁止选中文字效果
记录一下css常用的一个效果,禁止文字的选中:.no-select{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-use...转载 2020-01-09 09:40:01 · 891 阅读 · 0 评论 -
safrai浏览器z-index无效,失效,ios端z-index失效,无效问题解决办法
首先要明白一点,safrai浏览器是把z-index直接忽略了,直接忽略,忽略,不是别的,记住这个再看下面个人傻瓜式理解:谷歌,火狐等浏览器都是直接将一个盒子一个盒子理解成一块一块的,想分层就按照你的z-index高低来区分,而safari不是,safari是将整个浏览器的页面看成一个整体,虽然也是一块一块的,但是他的分层是按照视觉感来分层的,它认为在下面的代码块总比在上面的代码块离人的眼...原创 2020-01-08 19:26:06 · 2604 阅读 · 1 评论 -
transform:rotate失效
项目里面经常用到一些icon图标需要旋转角度,这不,有个向下的箭头直接用的大于号转90度就行了,直接用了个:<span class="angle">></span><style>.angle{ transform:rotateZ(90deg);}</style>如上代码:rotateZ不管用,这不,我就去MDN找答案去了结果在这...原创 2019-12-31 15:37:41 · 5087 阅读 · 2 评论 -
改变input输入框的placeholder样式
input::-webkit-input-placeholder{ color:#a6a6a6;}input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#a6a6a6;}input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#a6a...原创 2019-12-05 10:32:59 · 276 阅读 · 0 评论 -
radial_gradient加前缀和不加前缀兼容式写法,加了前缀失效问题,加了前缀就不管用了
PC 端项目有个背景图,感觉用径向渐变可以实现,这样就不需要多引入一个图片了,而且图片还挺大的~看 UI 图和实现后的效果图:在红线位置可以使用渐变吧实现最终实现效果图:感觉真的差不了太多,然而,用到径向渐变后就出问题了:background-image: radial-gradient(ellipse farthest-corner at 0% 100%, #F7D9CB 0%,#...原创 2019-11-29 18:31:13 · 1230 阅读 · 0 评论 -
微信公众号ios端,滚动条不隐藏解决办法其中之一
vue版本的项目,横着的算是swiper吧,上个图先瞅瞅就是它,在android上一丁点问题没有,滚动条?都不出来,放到ios上就是这么个玩意儿且看解决思路:现在这个样式先不动(称A盒子),在外面再套一层盒子(称B盒子),给外面的overflow设置hidden;然后将 A盒子 给个margin-bottom:100px;将滚动条挤下去,再给个margin-bottom:-100px;利...原创 2019-11-19 18:41:14 · 1009 阅读 · 0 评论 -
网页在移动端滚动不平滑,手指划一下滚一下,手指一离开直接停,就跟用手指划不动一样
在移动端上,在你用overflow-y:scorll属性的时候,你会发现滚动的效果很木,很慢,这时候可以使用-webkit-overflow-scrolling:touch这个属性,让滚动条产生滚动回弹的效果,就像ios原生的滚动条一样流畅。公司项目移动端在安卓手机浏览器上怎么滑动都好使,就是在ios苹果端不好使,滑动的时候一卡一卡的,感觉整个人都魔怔了,无奈解决呗:如果是移动端滑动的话需...原创 2019-11-14 10:44:28 · 1141 阅读 · 0 评论 -
苹果 ios端 position:fixed引起的BUG解决
项目移动端在往下滑动超过一个屏幕要出现返回顶部的按钮,就用fixed固定在屏幕的右下角。用谷歌调试工具,怎样调试都没问题,于是就放到了测试服务器上,用手机端访问。4个安卓手机无论上下怎么滑动都没问题,苹果手机刚开始进去没问题,可是往下滑动着,滑动着,当返回顶部按钮出现之后,整个页面整个变成了白色,就剩下个返回顶部按钮在右下角,往上滑动返回顶部按钮隐藏,页面又出来,往下滑动,返回顶部按钮显示,...原创 2019-11-14 10:05:14 · 3755 阅读 · 0 评论 -
video标签播放视频,视频宽高和播放器宽高不一致处理方法
我们官网首屏的无限循环动画视频,需要不管video标签多宽多高,里面的视频都能覆盖满整个video标签,这时候用到了css3的一个属性:object-fitobject-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。取值:contain被替换的内容将被缩放...原创 2019-11-01 14:46:51 · 6313 阅读 · 1 评论 -
display:flex属性记录
常用:flex-directionrowflex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。row-reverse表现和row相同,但是置换了主轴起点和主轴终点columnflex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同column-reverse表现和column相同,但是置换了主轴起点和主轴终点flex-wrap...原创 2019-10-28 14:20:28 · 605 阅读 · 0 评论 -
css选择器大全
css选择器大全一、常用的选择器元素选择器作用:通过元素选择器可以选则页面中的所有指定元素语法:标签名 { }id选择器作用:通过元素的id属性值选中唯一的一个元素语法:#id属性值 { }类选择器作用:通过元素的class属性值选中一组元素语法:.class属性值{ }并集选择器作用:通过选择器分组可以同时选中多个选择器对应的元素语法:选择器1,选择器2,选择器N...转载 2019-06-18 16:11:50 · 101 阅读 · 0 评论 -
Vue项目img标签图片加载失败/显示不成功,显示默认图片
直接上正确代码,至于别人说的@οnerrοr=“url”,这种方法,亲测~~不可用<img class="avatar" :src="docAvatar">.avatar { width: 40px; height: 40px; position: relative;}.avatar:after { content: ""; displ...原创 2019-06-04 13:57:33 · 6287 阅读 · 1 评论 -
移动端如何让页面强制横屏
跳转原文看下测试页面html结构<body class="webpBack"> <div id="print"> <p>lol</p> </div></body>最终的理想状态是,把lol非常和谐的横过来。好了来看看区分横屏竖屏的css:@media screen转载 2019-01-24 11:59:20 · 745 阅读 · 0 评论 -
好多网站css样式初始化代码,仅自留
腾讯QQ官网body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:1...转载 2019-03-30 09:28:38 · 406 阅读 · 0 评论 -
取消display:inline-block产生间隙最简单办法
方法一:父元素设置font-size:0;产生原因:因为标签不在同一行的回车导致的换行<style> *{ margin:0; padding:0; } .d1{ width:750px; height:90px; font-size:0; } .d2,.d3{...原创 2019-04-10 16:02:50 · 1075 阅读 · 0 评论 -
window.getComputedStyle和elem.currentStyle兼容式写法,原生JS获取元素样式
export function getStyle(el,attr){ if(el.currentStyle){ //IE,OPER return el.currentStyle[attr]; }else{ //chrome、safari、FireFox return window.getComputedStyle(el...原创 2019-04-09 11:22:46 · 469 阅读 · 0 评论 -
window\.onresize自写响应式常用方法
窗口改变触发页面重绘触发该事件window.onresize = () => { this.changeSize()};原创 2019-04-09 11:26:51 · 455 阅读 · 0 评论 -
css3+3D旋转transform最容易忽视的一个错误,你中标了么,附完整例子代码
先上代码:MM的辛酸泪啊<template> <div class="rotate"> <ul class="rotate-box"> <li class="rotate-item" :class="'item-'+(index+1)" ...原创 2019-04-09 17:35:11 · 1179 阅读 · 0 评论 -
原生JS 控制网站内容不让选中,去除右键菜单
直接上代码CSS*{ -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}JSwindow.addEventListener("load",()=>{...原创 2019-05-20 13:55:31 · 192 阅读 · 0 评论 -
margin重叠,margin溢出问题及解决方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况:...转载 2019-05-16 09:35:41 · 3679 阅读 · 1 评论 -
css实现单行、多行文本超出省略号(...)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本...转载 2019-05-27 13:44:39 · 603 阅读 · 0 评论 -
浏览器适配,各大浏览器适配,主流/冷门浏览器适配,css
浏览器适配,各大浏览器适配,主流/冷门浏览器适配flex布局问题flex布局早在2009年就有了,到现在已经有了好几个版本。详细内容可查看这篇文章。flex布局兼容性其中IE10部分支持2012,需要使用-ms-前缀。而IE9不支持flex布局:针对IE9以下的flex布局,git有一些三方js,例如flexibility但是并没有研究出来使用办法,其js会莫名添加一些样式,修改起来很麻...转载 2019-06-19 11:45:59 · 4810 阅读 · 0 评论 -
水平滚动条和垂直滚动条设置
1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)scrollbar-arrow-color上下按钮上三角...转载 2019-01-03 09:52:21 · 5923 阅读 · 0 评论