CSS/C3
关注
分享
扫一扫
文章平均质量分 86
CSS/C3
furfur-jiang
你若盛开，清风自来
公众号:程序江
展开
-
CSS3变形动画transform、过渡延迟transition、帧动画animation
变形操作transform使用 transform 规则控制元素的变形操作，包括控制移动、旋转、倾斜、3D转换等none 定义不进行转换。translate(x,y) 2D 转换。translate3d(x,y,z) 3D 转换。同时控制X/Y/Z轴的移动，三个值必须输入如果某个轴不需要移动时设置为零。translateX(x) 沿X轴移动时正值向右移动、负值向左移动translateY(y) 沿Y轴移动时正值向下移动、负值向上移动translateZ(z) 3D 转换，控制Z轴移动，正数向原创 2021-04-12 21:30:53 · 3512 阅读 · 0 评论 -
将多余的字用省略号表示，只显示一行（n行）
只显示一行（n行）.hideWord{ display: -webkit-box; -webkit-box-orient:vertical; overflow: hidden; -webkit-line-clamp: 1; /*n行*/}原创 2020-04-15 16:58:49 · 381 阅读 · 0 评论 -
牛客 HTML/CSS专项练习题+解析 （收藏）
牛客 HTML专项练习题+解析 （收藏）单选不定HTML5框架bootstrap辅助类单选不定HTML5框架解析：BDE都是前端的属于html框架 A是包括大部分后端模块和前端模块，前端模块又包括前端框架 dubbo是java rpc 框架 最后一个是后端的答案：BDEbootstrap辅助类解析：.text-muted:文字的颜色换成灰色.text-primary:文字的颜色变成蓝色.text-success:文字的颜色变成绿色.text-info:文字的颜色变成暗蓝色.tex原创 2021-02-01 17:55:07 · 668 阅读 · 0 评论 -
前端图片HTTP请求的各种情况分析
CSS控制前端图片HTTP请求的各种情况示例示例一：隐藏图片示例二：重复图片示例三：重复背景示例四：不存在的元素的背景示例五：隐藏元素的背景示例六：多重背景示例七：hover的背景加载示例八：JS里innerHTML中的图片示例九：图片预加载总结CSS控制前端图片HTTP请求的各种情况示例)示例一：隐藏图片<img src="haorooms.jpg" style="display: none" /> <img src="haorooms2.jpg" style="visibi转载 2021-01-31 21:06:50 · 710 阅读 · 0 评论 -
水平垂直居中代码示例8种（直接可用）
flexgridtable-cellmargin + transformabsolute + transformabsolute + -marginabsolute + margin:autoinline-block + vertical-align案例展示：代码：（直接可用）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta.转载 2020-12-18 16:08:02 · 1214 阅读 · 1 评论 -
Grid学习笔记
Grid学习笔记1.简介2.容器属性2.1display: grid 指定一个容器采用网格布局2.2grid-template-columns，grid-template-rows 划分行和列。2.3grid-row-gap，grid-column-gap，grid-gap 设置间距2.4 grid-template-areas 指定"区域"2.5 grid-auto-flow 排列顺序2.6 justify-items，align-items，place-items单元格内容的水平/垂直位置2.7 jus原创 2020-11-15 16:07:44 · 422 阅读 · 0 评论 -
面试基础必问之盒模型（W3C标准盒模型即box-sizing: content-box 及IE怪异盒模型即box-sizing: border-box；）
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：width和height：内容的宽度、高度（不是盒子的宽度、高度）。padding：内边距。border：边框。margin：外边距。CSS3指定盒子模型种类box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。box-sizing: content-box;盒子模型为W3C（标准盒模型）在宽度和高度之外绘制元素的内边距和边框。width 和 height 指的是内容区域的宽度和高度。增加原创 2020-11-14 09:09:42 · 715 阅读 · 1 评论 -
块级标签，行内标签，行内块标签
块级标签，行内标签，行内块标签概况三者转换规则行内元素块标签行内块标签嵌套规则概况块级元素：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！行内块元素：结合的行内和块级的优点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；三者转换规则display:inline; 转换为行内元素display:block; 转换为块状元素display:inline-block; 转换原创 2020-10-13 15:57:40 · 1550 阅读 · 0 评论 -
Scss(Sass)学习笔记
SCSSSass有两套语法1.第一种或更新的语法被称为SCSS。它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了此语法。使用此语法的文件扩展名为.scss。2.第二种或更旧的语法被称为SASS。提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass。任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-con转载 2020-10-09 12:36:53 · 1428 阅读 · 0 评论 -
animation属性一览
animation属性animation-name指定@keyframes描述动画关键帧的规则名称。animation-duration配置动画完成一个周期所需的时间。animation-timing-function配置动画的时间；也就是说，通过建立加速曲线，动画如何在关键帧之间过渡。animation-delay配置元素加载时间与动画序列开始之间的延迟。animation-iteration-count配置动画应重复的次数；您可以指定infinite无限期重复动画。animatio原创 2020-10-04 11:37:46 · 1120 阅读 · 0 评论 -
图片处理：居中放大
图片处理：居中放大<div style="background-image: url('${data.picture}');background-size:cover;height:100px;width:100px;background-repeat: no-repeat; background-attachment: scroll;background-position: center center;"></div></div>...原创 2020-08-09 19:57:57 · 396 阅读 · 0 评论 -
媒体查询的意义及使用（针对不同的屏幕大小显示不同的样式）
媒体查询可以针对不同的屏幕大小显示不同的样式这是css3的新特性语法ps:写在style内@media mediatype and|not|only (media feature){ /*css代码*/}参数详解：mediatype即媒体类型，可以写成以下任一个all 表示所有设备print表示打印机和打印预览screen 电脑屏幕，平板，手机，最...原创 2020-03-27 23:39:01 · 982 阅读 · 0 评论 -
移动端如何获得更清晰的图片（物理像素与开发px关系）
物理像素是真实存在的最小的颗粒，可以成为分辨率电脑的1开发px = 1个物理像素点但是iphone8 1px = 2个物理像素iphone6 Plus 1px = 3个物理像素也就是说，一个图片在电脑端和手机端看到的清晰程度会不同如果是一个1px=2个物理像素也就是说准备的图片需要是手机所需2倍，然后通过手动缩小一倍，可以让移动端的图片更加清晰可以利用ps软件的cutterman多...原创 2020-03-27 22:18:59 · 523 阅读 · 0 评论 -
用after伪元素简单地实现一个小箭头
效果：就是更多右边的小箭头了给按钮btn加一个后伪类原理：一个右边框，一个上边框，旋转45度实现.btn::after { content: ""; position: absolute; top: 20px; right: 26px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2p...原创 2020-03-27 21:54:00 · 1697 阅读 · 0 评论 -
移动端必备的meta标签（理想视口）
meta标签写于head里面，title前面，最为推荐的写法<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">分析：content="width=device-width：表示宽度等...原创 2020-03-27 21:45:05 · 915 阅读 · 0 评论 -
好用的CSS实现上下/左右居中
绝对定位.xxx { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);}原创 2020-03-25 23:02:05 · 725 阅读 · 0 评论 -
css图片与字体对齐（基线对齐）
css图片与字体对齐（基线对齐）.collection image{ width: 13px; height: 13px; vertical-align: middle}.collection text{ font-size: 0.5rem}原创 2020-03-05 17:39:51 · 5600 阅读 · 0 评论 -
CSS3学习笔记大全
此片文章是CSS3CSS3参考手册解读指南：[] 表示可选项| 表示或者|| 表示多选一？ 0个或1个*表示0个或多个{} 表示范围新增选择器属性选择器选取标签带有某些特殊属性的选择器/* 获取到拥有该属性的元素 */div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color: pink...原创 2020-02-04 20:12:57 · 873 阅读 · 0 评论 -
CSS基础入门学习笔记
目录CSS概念浏览器前缀CSS验证工具字体样式选择器普通选择器复台选择器交集选择器并集选择器后代选择器子元素选择器伪类选择器链接伪类选择器:first-child伪类块行元素块级元素(block-leve1)行内元素(inline-leve1)行内块元素(inline-block)CSS三大特性层叠、继承、优先级特殊性(Specifi...原创 2020-02-03 14:56:36 · 804 阅读 · 0 评论