随笔分类 - # CSS
摘要：一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。 创建一个网格容器 display: grid; 设置列 grid-template-columns: 200px 200px 200px ···; // fr 单位： 占居
阅读全文
摘要：linear-gradient() 线性渐变 /* 渐变轴为 45 度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* t
阅读全文
摘要：绘制图形 绘制三角形 标示 div { width: 0; height: 0; border: 5px solid transparent; border-left-color: red; } 同理可制作直角三角形 绘制 梯形 .div { height: 0; width: 50px; bord
阅读全文
摘要：为什么需要这样的控件 图片等拥有确定比例的控件，仅需要设置长宽中的一项即可控制等比例的缩放。 其他的却不具备此特定，需要同时设置宽高。 但等比例缩放 在自适应中是一个很重要的特性。 此外等比缩放控件可以用于创建轻量的占位内容，防止布局偏移 过去如何实现 <div class="ratio-paren
阅读全文
摘要：图片背景渐隐 通过伪元素 线性渐变背景 遮盖掉一部分内容 div::before { content: ''; position: absolute; bottom: 0; width: 100%; height: 100px； background: linear-gradient(to top,
阅读全文
摘要：MDN CSS transform 只能转换由盒模型定位的元素 translate() / translate3d() 平移 translateX() translateY() translateZ() rotate() / rotate3d() 旋转 rotateX() rotateY() rot
阅读全文
摘要：自适应需要解决的问题 屏幕像素大小不同，统一表现画面比例不同，统一表现浏览器字体最小限制，不可能无限等比缩小 自适应不成功的表现： 画面尤其是图片出现拉伸压缩文字内容显示异常，超出范围，显示不全等画面出现空白区域 自适应方案 方案一：%单位 作为一个css相对单位，其相对计算的对象不固定（并不是所有
阅读全文
摘要：对齐方式 text-align 文本水平对齐方式 vertical-align 属性设置行内元素的垂直对齐基准线 line-height 行高 行高等于height时可垂直居中，不设置height时，默认撑开。 不建议使用单位值赋值line-height 实际效果可能不符合预期 排版 letter-
阅读全文
摘要：命名规范 参考博客 属性顺序 如果包含 content 属性，应放在最前面 顺序分类描述包含属性1Positioning Model布局方式、位置position / top / right / bottom / left / z-index / display / float / …2Box Mo
阅读全文
摘要：类似 word 的分栏操作 样式意义取值column-count分栏数数字column-gap各分栏距离column-rule-style分栏竖线样式dotted 散点column-rule-width分栏竖线宽度column-rule-color分栏竖线颜色column-rule分栏竖线colum
阅读全文
摘要：MDN overflow 当一个元素的内容超出元素范围时的处理方式 overflow-x 和 overflow-y 属性值意义visible默认值 超出内容可见hidden隐藏scroll出现滚轮auto如果需要创建滚轮
阅读全文
摘要：writing-mode 排列方式 tb lr rl 等 write-space 行内元素换行空白的处理
阅读全文
摘要：参考文章 文档流 float或者position:absolute可以让元素脱离文档流 注：float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视) 格式化上下文 “上下文” 指明了CSS中元素所处的环境/区域 常用有BFC、IFC
阅读全文
摘要：{ ··· animation: 动画名称 时长 [过渡函数] [延迟] [播放次数] [播放方向] [样式应用模式]; } @keyframes 动画名 { 0% {}, 100% {} /** from: {}, to: {} */ } @keyframes 应以一段动画，可在不同百分比时间处设
阅读全文
摘要：MDN IFC 特性 垂直的padding、margin 无效行内元素从容器的顶端开始，一个接一个地水平排布一个水平行中的所有 行内元素 组成一个矩形区域行内框(line box)行内框的高度始终容下所有的行内元素 ，高度只与line-height行高有关行内框的宽度受到父容器和浮动元素存在的影响(
阅读全文
摘要：外轮廓 属性与border类似 style、width、color 但可以留空，有默认值 最大的特点是不占据空间，可用于突出 例：input 获得焦点时默认会显示outline 设值 0 none 可取消outline MDN-outline
阅读全文
摘要：在每一层中，下列的值可以出现 0 次或 1 次： <attachment> <bg-image> <position> <bg-size> <repeat-style><bg-size> 只能紧接着 <position> 出现，以"/"分割，如： center/80%.<box> 可能出现 0 次、
阅读全文
摘要：calc() 计算动态长度 calc(xxxx - xxxx) + -, *, / + 和 - 运算符的两边必须要有空白字符。 任何类型数值都可以使用 calc() 函数进行计算，会自动换算，如百分比与像素值 calc 通过 * -1 实现正负值的转化 calc(var(--circle_radiu
阅读全文
摘要：值描述normal默认。设置合理的行间距。跟浏览器有关 （firefox 1.2）number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length设置固定的行间距。%基于当前字体尺寸的百分比行间距。inherit规定应该从父元素继承 line-height 属性的值。 在进行精准的设计时
阅读全文
摘要：当非滚轮触发页面滚动条变化时 决定变化的行为 auto直接跳跃变化 smooth流畅过渡
阅读全文
