CSS
关注
分享
扫一扫
css样式相关知识点总结！
绝世唐门三哥
改变世界的程序猿@三哥
展开
-
CSS---序号使用css设置，counter-reset、counter-increment、content配合实现备注文案的序号展示
其中注意如果是全数字的话，不会换行，需要自己修改使用哦！原创 2024-09-13 13:57:18 · 471 阅读 · 0 评论 -
CSS---关于font文本属性设置样式总结
用于指定文本中单词之间的间距，设置固定值为单词间距，如10px。会破坏单词的完整性，可能会影响阅读体验，要谨慎使用。用于设置字间距，设置固定值为字间距，如10px。用于设置文本的装饰线，是下表属性的简写。设置文本在水平或垂直方向的。原创 2023-11-16 13:36:27 · 3283 阅读 · 0 评论 -
CSS---box-reflect镜像复制属性使用
兼容性如下图：（基本上chrome可以，其他的或多或少都不太支持）box-reflect：包括3个值。1. direction 属性取值包括 above 、 below 、 left 、 right2. offset定义反射偏移的距离3. mask-box-image定义遮罩图像举例说明：原创 2022-12-06 16:53:10 · 587 阅读 · 0 评论 -
CSS---足球场的实现，纪念2022世界杯(:root的使用)
首先这里说明下，该博文主要能看到使用的知识点： var()函数说明： box-reflect属性说明足球场——第一种采用 :root效果如下：效果图如下：原创 2022-12-06 14:49:00 · 320 阅读 · 0 评论 -
浏览器---reset.css浏览器默认样式表重置（user agent stylesheet）
当你在浏览器控制台查看对应元素的样式的时候，会发现一些样式标有(user agent stylesheet),同时不能修改，那就表明该样式是浏览器自身对元素的设置样式，即浏览器默认样式表；当然不同浏览器之间的默认样式会有出入，同时相同浏览器的不同版本之间也会有细微差别！一般推荐使用normalize.css，不会初始化掉基础的元素样式！这里附上PC和APP端的相应reset.css样式表。APP端初始化样式表。原创 2022-12-02 15:30:30 · 5907 阅读 · 2 评论 -
CSS3---理解CSS3 max/min-content及fit-content等width值
fill-available （默认值）原创 2022-11-15 17:16:15 · 1524 阅读 · 0 评论 -
CSS---border-image属性的使用心得
注意：IE和火狐都添加了fill，否则背景不会自动填充到元素的content。border-image:根据英译汉显而易见，就是边框背景的意思。一旦使用了单个属性，那么就不能添加前缀，否则不生效。不得不说的border-image坑。原创 2022-10-19 16:06:02 · 1050 阅读 · 0 评论 -
CSS---经常被忽略，但使用广泛的常用CSS样式片段总结
11、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）多行文本溢出显示省略号2、中英文自动换行3、文字阴影text-shadow为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。属性与值的说明如下4、设置placeholder的字体样式5、不固定高宽div垂直居中的方法6、解决IOS页面滑动卡顿7、设置滚动条样式8、实现隐藏滚动条同时又可以滚动9、css绘制三角形注如果想绘制右直角三角，则将左border设置为0；12、移动端软键盘变为搜索方式。...原创 2022-07-29 15:42:28 · 305 阅读 · 0 评论 -
CSS---display：flow-root解决float布局弊端
【代码】CSS---一个CSS属性：flow-root解决float布局弊端。原创 2022-07-23 23:52:43 · 754 阅读 · 0 评论 -
CSS---px、em、rem、vw、百分比的区别
代码】CSS---px、em、rem、vw、百分比的区别。原创 2022-07-23 23:30:12 · 304 阅读 · 0 评论 -
CSS---background组合属性的书写问题简记
background是一个简写属性，可以在一个声明中设置背景颜色、背景位置、背景大小、背景平铺方式、背景图片等样式语法background颜色图片位置/大小平铺方式bg-origin绘制区域bg-attachment;。background简写属性在一个声明中设置所有的背景属性#fff;//指定背景颜色//设置背景图像,可以是真实的图片路径,也可以是创建的渐变背景;center;//设置背景图像的位置cover;//设置背景图像的大小no-repeat;...原创 2022-07-21 14:44:05 · 659 阅读 · 0 评论 -
知识点总结---vue/小程序/web基础知识片段总结
① 一个CSS相关新属性：flow-root说明：这个是display属性中的一个属性值：是解决子元素浮动所造成的内容塌陷的问题即父元素中添加display:flow-root,子元素float浮动兼容性：除了IE外的浏览器基本全都支持~实例：/*该浮动处理等价于下列样式代码*/.box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flo原创 2022-07-12 15:33:29 · 269 阅读 · 0 评论 -
CSS---标准盒模型和IE盒模型
W3C盒模型（content-box)------IE盒模型(border-box) box-sizing的默认属性是content-box!!!原创 2022-06-20 10:59:24 · 480 阅读 · 0 评论 -
CSS------CSS样式集合地，总结小片段有用就拿走
1. 推荐的字体font-family:font-family: Arial, Simhei, "黑体", sans-serif !important;原创 2022-03-17 14:01:01 · 120 阅读 · 0 评论 -
CSS------伪类(:first)和伪元素(::after)汇总以及区别分析
css中伪类和伪元素的区别及用法:伪元素定义：伪元素主要是用来创建一些不存在原有dom结构树种的元素,被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入伪类定义：伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。注意点：CSS3中建议使用::表示伪元素，如：div::before; CSS3中建议使用:表示伪元素，如：a:hover...原创 2021-08-06 11:15:01 · 2586 阅读 · 0 评论 -
CSS---常用CSS代码片段汇总
css中标签实现（>）的代码方式/* 随便一个块元素，加此类名navigator-arrow即可 *//* 要用到PC/APP中记得将rpx改为px */.navigator-arrow { padding-right: 26rpx; position: relative; }.navigator-arrow::after { content: " "; /* 关键的代码，伪元素必须写的，否则无内容出现 */ display: inline-block; /* 将其快状化原创 2021-04-29 14:18:37 · 409 阅读 · 0 评论 -
CSS------利用div手写三角形，上下左右四个方向
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>利用div手写三角形</title> <style> .triangle {原创 2021-01-05 11:03:12 · 411 阅读 · 0 评论 -
CSS---手机端如何实现细、1px、0.5px边框
直接采用0.5px，使用方便，兼容性差。不推荐使用用阴影代替边框，设置阴影box-shadow,基本上可以实现，也可展示圆角。兼容性一般给元素设置伪元素，设置绝对定位，高度为1px,背景图为线性渐变，一般有颜色，一般透明。视觉上宽度只有0.5px。只适合设置一条边框，不能展示圆角给容器内设置伪元素，设置绝对定位，宽、高是200%，边框是1px，然后使用transformscale(0.5);让元素缩小一半，这时候伪元素的边框和容器的边缘重合，视觉上宽度只有0.5px。源地址网址。...原创 2021-01-05 09:50:41 · 1891 阅读 · 0 评论 -
css------关于字体font设置字体单行，多行超出省略号显示
单行： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;原创 2020-12-03 13:12:14 · 342 阅读 · 1 评论 -
UI------采用elementUI的自定义主题，et -i时报错primordials is not defined
原因何在：处理方法的地址很简单，因为node的软件的版本过高，切换对应的低版本node后可执行et -i或者 et -i 文件名它会生成到当前根目录文件夹下安装对应插件# 安装工具npm i element-theme -g# 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。# 从 npmnpm i element-theme-chalk -D# 从 GitHubnpm i https://github.com/ElementUI/theme-chalk -D原创 2020-10-28 13:36:05 · 1133 阅读 · 0 评论 -
Vue------关于 Vue 引用 animate.css 动画 不起作用的问题（animate.css）
Vue 官网引用的是 animate.css 3.5 版本!!!!如果你直接采用npm install animate.css ;在引入：import animated from "animate.css" ;Vue.use(animated);结果就是没有作用!!!原因：两者版本兼容性问题导致动画不起作用！！！处理方法：就是安装对应低版本的动画插件，比如官网引入的3.x的animate.cssnpm install animate.css@3.5.1 --sa原创 2020-10-10 14:53:02 · 3746 阅读 · 6 评论 -
前端知识点------小米官网精灵图书写（两种方式）
图片示例：第一种：采用背景图片的方式<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } div{ width: 234px原创 2020-05-29 17:26:37 · 1255 阅读 · 2 评论 -
css------保证图片容器为正方形的css写法（一看便懂）
直接复制左右代码，看效果就懂了！！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2020-04-22 10:10:19 · 998 阅读 · 0 评论 -
css------比较常用的属性总结
font复合写法p.ex2 { font:italic bold 12px/20px arial,sans-serif; }元素名 { font: font-style font-variant font-weight font-size/line-height font-family } // JavaScript 语法：object.style.font="italic small...原创 2020-04-17 15:56:48 · 203 阅读 · 0 评论