CSS
关注
分享
扫一扫
css
Jookerone
这个作者很懒，什么都没留下…
展开
-
随机图片api
https://picsum.photos/360/460?random=1原创 2021-06-26 20:08:26 · 779 阅读 · 0 评论 -
并排的文字图片垂直居中
包裹文字的span和包裹图片的span分别设置样式vertical-align:top; 然后包裹文字的span设置line-height为图片的高度原创 2021-05-18 23:23:33 · 177 阅读 · 0 评论 -
span 垂直居中对齐
给span添加样式：display:inline-blockvertical-align :top原创 2021-05-16 15:58:27 · 1767 阅读 · 0 评论 -
padding-top:100% 图片加载时，高度变化不会影响下方的元素
padding-top的值相当于父盒子宽度的100%.image-header position :relative width:100% padding-top:100% img position:absolute top:0 left:0 width:100% height:100%原创 2021-05-14 21:21:41 · 378 阅读 · 0 评论 -
背景模糊 filter blur
background-color:rgba(7,17,27,.6)backdrop-filter :blur(10px)另外如果要实现效果：透明背景颜色(rgba)放在背景图片的上面因为background-color的优先级小于background-image，所以可以单独把背景图片放在image标签里< div>< img src="…">< /div>然后设置该div的样式为：position: absolute; z-index: -1; left:原创 2021-05-14 12:56:05 · 513 阅读 · 0 评论 -
多行文字垂直居中
父元素：display:table;table-layout:fixed;包裹文字的子元素：display:table-cell; vertical-align:middle;原创 2021-05-12 12:09:02 · 71 阅读 · 0 评论 -
css sticky footer
实现效果：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送实现思路：我们需要在页头和页脚设置高度，但其内容的高度自动伸缩的来适配剩余空间 html布局<body> <header></header> <main></main> <footer></footer></body> style样式body { display: flex; flex-fl转载 2021-05-11 11:30:37 · 108 阅读 · 0 评论 -
css的reset img a
a{-webkit-tap-highlight-color: transparent;}img{vertical-align: top;border:none;}原创 2021-05-11 11:13:56 · 180 阅读 · 1 评论 -
容器水平垂直居中
position: absolute; /*父容器要定位，fixed或者relative*//* 移动父容器的50%宽度 */left: 50%;/* 移动父容器的50%高度 */top: 50%;/* 移动自身宽度或高度的50% */transform: translate(-50%,-50%);position:absolute;会有display:inline-block的效果，就是width没有指定时，由内容撑开；多行文本居中：flex布局display: flex; justi原创 2021-05-06 10:22:08 · 92 阅读 · 0 评论 -
1px像素
设计师傅给出的设计稿是按iphone6的物理像素来设计的，注意iphone6的devicePixelRatio为2，即2个物理像素就是咱们代码中的1个CSS像素当有一个边框从设计稿来看是要求1px，其实这个1px就是1物理像素，那么如果我们写border:1px solid #000;在iphone6上看就是2像素，所以要利用transform:scale(0.5)缩放代码如下：先利用after画一条1px的边框bottom-border-1px($color) position: rela原创 2021-05-06 00:35:36 · 344 阅读 · 0 评论 -
字符串，数组，对象使用for..in和for..of循环
//字符串，数组都可以用for..of和for..in遍历//对象只可以用for..in遍历const str = "zjh";for(let k in str){ console.log(k,str[k]) // 0 'z'}for(let k of str){ console.log(k) // 'z'}const arr = ['a','b','c'];for(let k of arr){ console.log(k); // 'a'}for(let k in ar原创 2021-04-11 17:32:56 · 606 阅读 · 0 评论 -
拖拽事件中出现移动太快而导致拖拽失效的问题
解决方案：添加mouseleave，只要拖拽脱离了dom元素区域就停止<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal原创 2021-04-10 13:16:27 · 1839 阅读 · 1 评论 -
offsetLeft,offsetWidth,offsetX,
1.offsetLeft:离最近一个带定位父盒子的left距离，通过offsetParent可查看该定位父盒子，如果没有的话，就默认是body2.offsetWidth: 水平方向 width + 左右padding + 左右border3.鼠标事件当中的offsetX: 比如在一个dom元素中的某个位置点击之后，这个位置距离当前dom的左边距离...原创 2021-04-10 12:32:12 · 385 阅读 · 0 评论 -
hammer.js
1.hammer事件常用的属性：panmove的deltaX:表示手指按下到抬起的x距离，从右往左是负值deltaY:表示按下到抬起的y距离，从下往上是负值deltaTime:表示手指按下到抬起的时间原创 2021-04-10 12:27:01 · 223 阅读 · 0 评论 -
单指移动
const backTopDom = document.getElementById("backTop");backTopDom.addEventListener("touchstart", handleStart, false);backTopDom.addEventListener("touchmove", handleMove, false);backTopDom.addEventListener("touchend", handleEnd, false);const startPoint =原创 2021-04-08 20:41:07 · 73 阅读 · 0 评论 -
css float img
1.div设置了float之后默认的占满一行的宽度属性就失效了，只有手动设置width宽度才行2.img 下边会和父容器有空间，可以使用vertical-align:top;或者display:block;解决3.flex-basis是除去了padding之后的盒子宽度...原创 2021-04-08 17:13:20 · 381 阅读 · 0 评论 -
css 选择器 匹配以某些字符开头或结尾或包含的class或id
^ 匹配开头div[class^=“col”]div[id^=“col”]$ 匹配结尾原创 2021-04-07 17:04:03 · 8973 阅读 · 1 评论 -
1px边框问题
(function () { const maxWidth = 540; //不考虑缩放和dpr const minWidth = 320; let dpr = window.devicePixelRatio || 1; //dpr可能是小数，要化为整数 dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1); function setRem() { //获取html的dom元素 const domEl = document.doc原创 2021-04-06 16:59:48 · 136 阅读 · 0 评论 -
放大和缩小
缩放改变的css像素的大小，物理像素是硬件的，不可改变的放大：一个css像素占据的物理像素就更多了缩小：一个物理像素能够展现的css像素更多了原创 2021-04-06 14:09:44 · 90 阅读 · 0 评论 -
移动端常用单位
em： 自身元素font-size的n倍，如果自身元素没有设置font-size，就从父元素继承过来pc端的font-size最小是12px,但移动端就不是了em常用于text-indent:2em; 段落缩进，因为2em就表示2个字体大小2，主流：rem375px -> 1rem = 20pxheight = 50(50是某个div的高度) / 20 = 2.5rem750px -> 1rem = 40pxheight = 100 / 40 = 2.5rem?(视口宽度) -.原创 2021-04-05 23:27:03 · 419 阅读 · 0 评论 -
媒体查询
1.逻辑与（and）或（，）非（not）/* not 对and整体取反 即非600~800px区间的才有效*/ @media not screen and (min-width:600px) and (max-width:800px){ html{ background: red; } }/* not 对单个或取反，这里只对逗号前面的min-width:1000px取反 */ @media not screen and (min-width:1000px), (原创 2021-04-05 21:01:04 · 68 阅读 · 0 评论 -
flex
容器的属性：flex-wrap: wrap; 表示当父盒子宽度不够时会换行 ，不会进行压缩justify-content:定义了item在主轴上的对齐方式align-items：定义了item在交叉轴上的对齐方式align-items:stretch(默认属性值):如果项目未设置高度或设为auto，将占满整个容器的高度align-content:定义了多根轴线（多行）在交叉轴上的对齐方式，如果项目只有一根轴向（一行），该属性不起作用项目的属性：1.order属性定义项目的排列顺序，数值越小，原创 2021-04-05 18:26:13 · 95 阅读 · 0 评论 -
css class类名同级选择
<style> //如果中间有空格就变成了.icon 下面的.special了 .icon.special{ font-weight: 700; color:blue; } //less的写法.icon{ width: 100px; height: 100px; background-color: pink; &.decrease{ font-weight: 700; color:blue; }}原创 2021-04-01 20:34:46 · 3481 阅读 · 0 评论 -
jquery 动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/jque原创 2021-01-14 16:16:48 · 68 阅读 · 1 评论 -
css 旋转木马
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转木马</title> <style> body { /* 看到立体透视效果 */原创 2021-01-12 13:43:18 · 131 阅读 · 0 评论 -
3D 导航栏 css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D导航栏</title> <style> * { margin: 0; paddi原创 2021-01-12 12:43:42 · 113 阅读 · 0 评论 -
css 两面翻转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>两面翻转</title> <style> div{ width: 200px; hei原创 2021-01-11 22:48:46 · 784 阅读 · 4 评论 -
html+css
align 在table标签中，作用是让表格在浏览器居中cellspacing 在table标签中，作用是让表格的单元格之间没有空白dl 只能包含dt 和dd， dt和 dd里面可以放任何标签让文字垂直居中：line-height等于盒子的height行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下页面元素可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色控制背景图片在元素的位置，方位名词和顺序没关系，也就是和下面的两行.原创 2021-01-04 16:13:53 · 136 阅读 · 0 评论 -
rem
1.em是相对于父元素的字体大小来说的，比如父元素的font-size是12px,当子元素的width是10em时，就是120px2.rem是相对于html元素的字体大小3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小进行整体控制...原创 2020-12-04 18:06:21 · 112 阅读 · 0 评论 -
flex
1.flex-direction:column 把主轴设置为y轴，那么x轴就成了侧轴2.flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面3.align-items设置侧轴上的子元素排列方式（单行使用）4.align-content设置侧轴上的子元素排列方式（多行使用，换行时），在当行下没有效果5.flex-flow：column wrap 把设置主轴方向和是否换行（换列） 简写...原创 2020-12-03 21:38:31 · 85 阅读 · 0 评论 -
float
对div1设置float 之后下面的div2会覆盖div1，如果div2中有文字则文字部分会环绕div1，其他(background , image)覆盖div2如果给div2加上float:right，则div2会在div1的右边，要是右边没有足够的空间，则换行注意：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...原创 2020-05-14 21:03:24 · 283 阅读 · 0 评论