css
waillyer
码云地址:https://gitee.com/waillyer
展开
-
css弹性盒子-------桃园三兄弟之:flex-grow、flex-shrink、flex-basis详解
首先是 flex-basis ,basis英文意思是<主要成分>,所以他和width放在一起时,肯定把width干掉,basis遇到width时就会说我才是最主要的成分,你是次要成分,所以见到我的时候你要靠边站。其次是 flex-grow,grow英文意思是<扩大,扩展,增加>,这就代表当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,这时,flex-grow就会说我要成长,我要长大,怎么样才能成长呢,当然是分享父元素的空间了。见下面第二个属性的内容最后是.转载 2021-05-08 08:59:40 · 81 阅读 · 0 评论 -
鼠标悬浮放大盒子
效果代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- saved from url=(0123)https://www.17sucai.com/preview/171388/2014-09-11/%E6%94%BE%E5%A4%A7%E7%9A%84%E6%8C%89%E9%92原创 2021-02-04 19:44:42 · 826 阅读 · 0 评论 -
CSS3 transform 中的 matrix
CSS3 中使用 transform 可以对元素进行变换。其中包含:位移、旋转、偏移、缩放。 transform 可以使用 translate/rotate/skew/scale 的方式来控制元素变换,也可以使用 matrix 的方式来控制元素变换。.box { width: 100px; height: 100px; background: #00C487; transform: translate(10px, 20px) rotate(30deg) scale(1.5,原创 2020-12-10 19:00:43 · 114 阅读 · 1 评论 -
CSS3自定义滚动条样式
自定义滚动条实现此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下:滚动条组成部分::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。::-webkit原创 2020-12-07 17:24:22 · 136 阅读 · 0 评论 -
img标签中alt属性与title属性
img标签中alt属性与title属性alt属性1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候,图片的替换文字。2、alt属性值得长度必须少于100个英文字符3、alt属性是img标签的必须属性,如果没有特别意义的图片,可以写alt=""4、alt属性是搜索引擎判断图片与文字是否相关的重要依据,alt属性添加到img主要的目的才是为了SEOtitle属性1、title属性并不是必须的。2、title属性原创 2020-12-05 10:14:52 · 13377 阅读 · 0 评论 -
目前网页最小字体以及字体压缩
由于第一代网页基本都是为800x600的15’CRT显示器开发的,所以大多数网页都是以9pt或12px为标准的网页字体大小。目前随着大尺寸和高分辨率显示器的普及,过小的网页字体已经让我在浏览网页时出离的郁闷了。谷歌浏览器上显示字体最小为12px,css设置font-size:10px,显示的时候还是12px大小可以利用css中的transform属性来缩小:transform:scale(0.5,1)第一个参数是X轴比例,第二个参数是Y轴比例,第二个参数可省略,若缺省则等于第一个参数。缩小方向:原创 2020-12-01 19:37:39 · 2736 阅读 · 0 评论 -
css实现图片和文字水平居中对齐
方式一、vertical-align:middle通过vertical-align:middle实现现图片与文字水平对齐,需要区分html是行内元素,还是块状元素;例如:标签img、span是行内元素;标签p是块状元素则需要将标签p通过diaplay:inline-block;转化为行内元素;方式二、通过flex布局实现图片与文字水平对齐只需要在父级元素中css添加:display:flex;flex-direction:row;align-items:center;子级元素则不需要像上面那样原创 2020-12-01 18:55:52 · 22775 阅读 · 0 评论 -
鼠标经过弹出遮罩层,但会一直闪烁
问题:鼠标经过弹出遮罩层,但会一直闪烁解决:在弹出遮罩层的 CSS 里加上 pointer-events: none; <div class="noPeopleStatusCtlBox" @mouseenter="noPeopleStatusCtlonMouseoverEnvDelBtn()" @mouseleave="noPeopleStatusCtlonMouseleaveEnvDelBtn()">原创 2020-09-21 10:25:11 · 496 阅读 · 3 评论 -
vue聊天功能模块(三)聊天消息气泡
需求:左右聊天气泡聊天气泡分为矩形和三角形例如微信气泡使用伪元素,设置三角形<div class="chatBox chatBox-left"> 你好</div> .chatBox{ position: relative; margin:12px; padding:5px 8px; word-break: break-all; background: #ffffff;原创 2020-09-09 20:27:10 · 4204 阅读 · 2 评论 -
vue覆盖elementui样式的几种方式
使用/deep/ 或者 >>> 深度作用选择器<style scoped> /* >>>.el-checkbox__input > .el-checkbox__inner { display: none; } >>> .is-leaf +.el-checkbox .el-checkbox__inner { display: inline-block; }*/ /d原创 2020-09-03 16:07:21 · 4806 阅读 · 0 评论 -
vue聊天功能模块(五)pre标签使得消息表情换行
需求:消息有文本和表情图片let emojiList = [ '[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]', '[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]', '[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '原创 2020-09-02 11:44:22 · 497 阅读 · 1 评论 -
JavaScript获取完整当前域名
window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.net window.location.host; //返回url 的主机部分,例如:mp.csdn.net window.location.hostname; //返回mp.csdn.net window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏) window.locatio..原创 2020-08-20 16:01:26 · 1314 阅读 · 0 评论 -
input设置圆角边框自定义图标
input设置了border-radius,去掉直角边框outline: none;缩进 text-indent: 20px;引入背景图片利用定位,设置图片位置 .icon-search{ position: absolute; top: 62%; right: 1%; z-index:1000; transform: translateY(-50%); background-image: url('../assets/ic..原创 2020-06-22 19:05:57 · 1278 阅读 · 0 评论 -
数组对象的遍历
遍历数组方法定义遍历数组方法 function forArray(array){ var len = array.length; for (var i = 0; i <=len ; i++) { return array[(len-1)]; } }定义遍历对象方法,判断对象中所有值是否有一项为空function objectKeyIsEmpty(obj) { let empty = null; for (const key in obj)原创 2020-06-17 10:32:47 · 3818 阅读 · 0 评论 -
html中引入公共的html页面几种方法
一、使用jQuery的load函数<body> <div id="header1"></div> <script> $("#header1").load("page/header1.html"); </script></body>注意:header1中不需要把整个代码写全,以为一个html中只能存在一个body标签,去掉所有的标签二、include标签`{include原创 2020-06-06 14:29:14 · 5872 阅读 · 1 评论