css以及css3
css3知识
小仙女de成长
啊麻利麻利哄
展开
-
div不定宽高,文字垂直居中
div不定宽高,文字垂直居中原创 2023-03-01 08:42:55 · 165 阅读 · 0 评论 -
如何不设置宽高的div垂直居中
如何不设置宽高的div垂直居中原创 2023-02-28 16:48:31 · 107 阅读 · 0 评论 -
css多行文字垂直居中
css多行文字垂直居中转载 2022-06-25 08:19:18 · 190 阅读 · 0 评论 -
flex实现左右对齐布局
flex实现左右对齐布局原创 2022-06-23 11:45:56 · 1133 阅读 · 0 评论 -
清明节网站都变灰了,你知道是怎么做的么?
一般遇到清明节这种,各种APP,网站,都会变灰。比如可以看到,这些网站的全站内容都变成灰色的了,包括按钮、图片、文字等信息。不知道大家有没有对他们是如何变灰的产生问号,反正我是产生了。我第一个反应是重写了 css 样式,图片做了替换。先不说我上面这个想法好不好使哈,我上面想到的这个方案,肯定替换成本是相当高的,万一哪里没写对,再搞点幺蛾子出来,这个事情就有点玩大了。所以带着这个问题,我按下了键盘上神圣的 F12 去寻找答案。果然,这个答案就简单的躺在浏览器的调试...转载 2022-01-07 21:41:02 · 1448 阅读 · 4 评论 -
CSS Flexbox 布局最容易理解完全教程
1.父元素身上添加display:flex属性2.分别使用justify-content(横向)和align-items(竖向)控制对齐方式 横向 justify-content:flex-end右对齐/center居中对齐/space-evenly平分空间/space-between两端对齐;竖向 align-item:flex-end靠下对齐/center居中对齐;改变轴模式 flex-direction:column; flex:1; flex:2;flex:1;调整块的宽度..转载 2021-06-23 10:22:47 · 165 阅读 · 0 评论 -
关于wow.js在vue项目中的使用及遇到的坑(css3效果)
在vue项目中的使用1. 安装npm install wowjs --save(animate.css会被自动安装,但是这里有坑)2. 在main.js中引入animate.css引入时需要注意看是引入的哪个animate.css文件,在后面有详细讲解。3. 引入wow.js并初始化这里方法有二方法1在main.js中添加importwowfrom'wowjs'Vue.prototype.$wow=wow在组件中mounted () ...转载 2021-04-14 09:52:33 · 836 阅读 · 2 评论 -
wow.min.js 支持css3多种动画的效果!(适用于官网等企业网站居多)
1、加入animate.css<linkhref="http://www.bbsxiaomi.com/case/css/animate.min.css"rel="stylesheet">2、加入wow.js。<scriptsrc="http://www.bbsxiaomi.com/js/wow.min.js"></script>3.初始化<script> new WOW().init(); </script&...原创 2021-04-13 14:40:10 · 1415 阅读 · 0 评论 -
火狐浏览器滚动条如何隐藏,但是有滚动效果
overflow-y: scroll; scrollbar-color: transparent transparent; scrollbar-track-color: transparent; -ms-scrollbar-track-color: transparent;转载 2021-03-12 11:17:23 · 718 阅读 · 0 评论 -
火狐浏览器滚动条的样式问题
基于webkit的浏览器:/* 滚动条样式 */ ::-webkit-scrollbar{ width: 4px; height: 6px; } ::-webkit-scrollbar-thumb{ border-radius: 1em; background-color: rgba(50,50,50,.3); } ::-webkit-scrollbar-track{ border-radius: 1em; background-co原创 2021-03-03 10:50:32 · 436 阅读 · 0 评论 -
计算属性calc
calc() 函数用于动态计算长度值。需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);空格!!空格!!!空格!!!原创 2020-12-18 14:44:28 · 234 阅读 · 0 评论 -
flex布局导致文字溢出隐藏没有效果
解决:flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突解决:flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>/*下面文字使用了弹性布局绝对居中,所以中间的文字转载 2020-12-16 21:33:57 · 1876 阅读 · 0 评论 -
如何进行纯css控制切换主题色或一键更换背景色(更换主题色)
下面说的是vue+less项目中利用纯css控制方法: 1.在你项目的common样式表里(应该有通用样式表吧?要不reset样式表?)写一句话: body { --themeColor: #0ff; } 这句话的作用是设置你的默认主题色。--themeColor是自定义的名字,大家随意。 2.js调用setProperty进行颜色值的控制,我觉得核心就是这句话: document.body.style.setPr...转载 2020-11-23 20:25:03 · 1898 阅读 · 0 评论 -
移动端placeholder不能垂直居中解决方案
width: 100%; font-size: .34rem; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: .1rem; text-indent: .4rem; color: #33...转载 2020-08-04 21:42:03 · 493 阅读 · 0 评论 -
如何隐藏overflow: scroll的滚动条,但是滚动功能还在(保留滚动功能)
::-webkit-scrollbar {/*隐藏滚轮*/display: none;}转载 2020-07-21 10:54:01 · 13060 阅读 · 3 评论 -
input的radio实现点击文字,后面的框框也选中的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p span{font-size:10px;-webkit-transform:scale(0.8);display:block;} </style></head>...原创 2020-05-26 10:22:33 · 1513 阅读 · 0 评论 -
怎么让Chrome支持小于12px的文字?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p span{font-size:10px;-webkit-transform:scale(0.8);display:block;} </style></head>&.原创 2020-05-26 10:04:32 · 261 阅读 · 0 评论 -
css两行文字两端对齐
效果如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> span{ display:inline-block; ...转载 2020-03-25 09:12:40 · 532 阅读 · 0 评论 -
css设置遮罩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .aaa::before { content: ""; ...转载 2020-03-18 14:38:25 · 249 阅读 · 0 评论 -
css-子div设置margin-top后,父div与子div一起下移
这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。再说白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己上级(父元素,祖先元素)。只要给上级设置个有效的 border或者padding就可...转载 2020-03-12 09:57:22 · 499 阅读 · 0 评论 -
使用CSS3 ::selection伪元素改变选中的背景颜色
windows默认的文字选择时,背景为蓝色,前景色为白色。Firefox、Safari、Chrome以及Opera浏览器都支持文本选择属性,如果浏览器不支持该属性,会直接忽略它。所以不会产生任何不良影响 <style> ::selection{ background:blue; color:#ccc; } ...转载 2020-01-31 11:43:35 · 587 阅读 · 0 评论 -
css3做个文字旋转的效果
想做个文字旋转的效果代码: .test{ -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); display: block; position: absolute; ...转载 2019-12-27 17:13:24 · 871 阅读 · 0 评论 -
围着长方形的跑马灯
效果如图这个效果是用的障眼法,用四条线在同一个方向运动。代码如下:<style type="text/css"> *{ margin: 0; padding: 0; } .big{ margin: 150px auto; ba...转载 2019-12-27 09:31:01 · 271 阅读 · 0 评论 -
旋转的走马灯
效果如图直接拷贝代码吧,就能看到效果啦~~~~~<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Animation Test</title> <style> *{marg...转载 2019-12-27 09:32:54 · 300 阅读 · 0 评论 -
css之模糊文本的效果
效果如图:鼠标放上去是可以看到模糊之前的文字的老规矩:代码如下:<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="ht...原创 2019-11-18 16:47:45 · 1258 阅读 · 1 评论 -
表示跟随,背景会随着滚动条的拉动而滚动;
大背景,推荐使用这个代码:body{background:url(" ") repeat scroll!important;}表示惭愧,这个居然以前都不知道==原创 2019-06-24 17:22:44 · 1652 阅读 · 0 评论 -
ios端兼容input光标高度处理
在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样。造成的原因就是给父盒子添加了height和line-height当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从...转载 2019-07-09 16:24:55 · 800 阅读 · 0 评论 -
<pre>会撑开父辈<fieldset>的宽度,怎么能让pre的宽度随filedset的宽度
更新:对pre的机制说明更新更新2:给出解决方案更新3:两年以后,终于找到了stackoverflow的处理方案……第一个问题,fieldset的设置宽度以后,为何会被撑宽。fieldset在没有内部元素时,是以block方式解析的,即外部100%宽度自适应;但设置width以后,本应当维持这个宽度了,为何会被撑宽呢?因为它的min-width属性,在CSS的属性的权重中,min-wid...转载 2018-10-10 15:56:50 · 1245 阅读 · 0 评论 -
CSS3实现图片循环旋转
CSS3实现图片循环旋转转载 2017-12-16 18:25:19 · 2277 阅读 · 0 评论 -
怎样使网页页面CSS样式不随浏览器大小的变化而变化呢?
网页中每个标签的style的width,height设置为具体数值,不要用百分比!例如:错误:<body style="width:100%;height:100%">(F)正确:<body style="width:1376px;height:768px">(T)感谢分享https://blog.csdn.net/huangshulang1234/a...转载 2019-06-27 10:23:33 · 10831 阅读 · 3 评论 -
苹果手机click事件失效
我是平时没事就搜集各种工作中有用的博客,哈哈感谢分享https://blog.csdn.net/yydd199706/article/details/84954668用一个div当做了一个按钮来使用。<div class="button"> <div class=" next_button button_left btn_red" style="width:...转载 2019-06-20 16:23:53 · 1148 阅读 · 0 评论 -
自定义input[type="radio"]的样式
女 男*{margin: 0px;padding: 0px;} input[type="radio"] + label::before { content: "\a0"; /*不换行空格*/ display: inline-block; vertical-align: middle; font-size: 18px;原创 2018-01-18 08:51:05 · 1602 阅读 · 0 评论 -
用localStorage来存储数据的一些经验
localStorage:是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览器),属于本地持久层储存sessionStorage:用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。 localStorage与sessionStorage具有相同的API,以下方法都可以用于sessionSto转载 2018-01-11 13:24:08 · 474 阅读 · 0 评论 -
面向属性的CSS命名
面向属性的CSS命名阅读目录命名方法应用实践注意事项本文总结自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名。这个问题主要体现在:第一,有的内容你压根想不出用什么名字来给它命名,因为一般命名总是考虑语义化,好让其他人看到这个css类的名字就知道它是作用于哪一个转载 2017-12-25 10:11:18 · 606 阅读 · 0 评论 -
响应式图像--图片自适应大小
之前在做图片自适应的时候想到的办法是把图片作为背景然后添加background-size:100%;让图片填满整个盒子的方式来实现,但这样图片会根据盒子的大小拉伸,导致显示变形,bootstrap中有很好的解决方法:响应式图像 src="..." class="img-responsive" alt="响应式图像">通过添加 img-responsive cla转载 2017-12-25 09:49:48 · 1012 阅读 · 0 评论 -
css初始化样式以及常见css问题解决方法
文字居textarea的中:给textarea的css属性加上vertical-align:middle原创 2017-10-18 14:56:51 · 593 阅读 · 0 评论 -
文字图片行内垂直居中对齐方法
1.align="absmiddle" 我是文字 2.vertical-align:middle; 您可能说IE6下这个属性无效,但在下面情况下经检测在IE6+,FF,chrome下完美一致。 我是一长串文字 对的,将要对齐的文本和图片(这里是为span设置背景图片)都添加样式vertica转载 2017-10-27 09:38:25 · 4555 阅读 · 0 评论 -
一个圆圈两个边框怎么写?
一个圆圈两个边框怎么写?原创 2017-08-29 15:19:07 · 711 阅读 · 0 评论 -
css3鼠标移动图片上去会变大
css3鼠标移动图片上去会变大原创 2017-08-08 17:35:00 · 683 阅读 · 0 评论 -
css3动画机制原理和实战
此文为转载也就是说 @keyframes是定义定画的(定义动画的样式),比如:@keyframes mymove{}animation是写在class里面的,比如:animation:mymove 5s infinite;首先了解@keyframes 规则(说白了就是css3做动画的一个规定命名)定义和用法通过 @keyframes 规则,您能够创建动画。转载 2017-08-08 13:58:22 · 1370 阅读 · 0 评论