CSS
关注
分享
扫一扫
我是梅哥
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
uni-app框架 CSS 实现超过规定字符长度显示“...”
问题刚才在做一个样式，消息内容超过一定长度就用“…"显示，但是在uni-app框架中使用出现了一点小问题部分代码：<view class="bottom"> <text class="uni-lastmsg">{{item.lastMsg}}</text> </view>.bottom {display:flex; .uni-lastmsg { white-space:nowrap; overflow:hid原创 2020-06-05 12:03:25 · 7442 阅读 · 0 评论 -
CSS linear-gradient() 函数
定义linear-gradient() 函数用于创建一个线性渐变的 “图像”。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。CSS语法background-image: linear-gradient(direction, color-stop1, color-stop2, ...);用法...原创 2020-06-06 09:16:51 · 470 阅读 · 0 评论 -
css 使用伪类在div底部画一条线
<div class="div></div>.div { position: relative; }.div::after { content: ''; // 必须 position: absolute; left: 30px; bottom: 0; right: 0; width: 720px; height: 1PX; background-color: #dcdcdc; }提原创 2020-06-05 14:37:05 · 3093 阅读 · 0 评论 -
怎么区分伪类和伪元素？:before和::before又是什么鬼？
字面上区分伪类和伪元素都有一个共同的修饰词“伪”，“伪”是什么意思？就是假的呗。所以伪类就是假的类，伪元素就是假的元素，这就是在字面上区分它们。那么我们再进一步更好的区分一下。伪类伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。（CS3给出的定义，翻译过来）所以我们从上面知道伪类的功能有两个：格式化DOM树以外的信息。比如：<a>标签的：link、：visited等。这些信息都不存在于DOM树中。格式化不能被常规CSS选择器获取到的信原创 2020-05-11 17:07:16 · 1047 阅读 · 0 评论 -
BFC详解,从官方定义到上机实操
官方定义**块级格式化上下文（Block Formatting Context，BFC）**是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程法神高度区域，也是浮动元素与其他元素交互的区域。下列方式之一都可以创建BFC：+ 根元素（<html>)+ 浮动元素（元素的float不是none）+ 绝对定位元素（元素的position为absolute或fixed）+ 行内块元素（元素的 display 为 inline-block）+ 表格单元格（元素的 display为 ta原创 2020-05-11 01:03:23 · 481 阅读 · 0 评论 -
CSS之float属性详解
float官方文档概念float属性指定一个盒子（元素）是否应该浮动，可以设置浮动方向。css语法float：left|right|none|inherit ；属性值：值描述left元素向左浮动right元素向右浮动none默认值。元素不浮动，并会显示在其文本中出现的位置inherit规定应该从父元素继承float属性的值例子(怎样一个浮动法）简单来说就是让块级元素并排在一行当中显示。<!DOCTYPE html><htm原创 2020-05-10 17:52:58 · 2579 阅读 · 0 评论 -
src和href的区别以及link和@import的区别
src和href的区别src是source的缩写，指向外部资源的位置，指向的内部会迁移到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame元素。当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js放到底部而不是头部的原因。当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的原创 2020-05-10 15:49:26 · 1567 阅读 · 0 评论 -
css中的 !important 规则
!important 规则当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。一些经验法则：Always 要优化考虑使用样式规则的优先级来解决问题而不是 !impor...原创 2019-11-29 14:49:47 · 329 阅读 · 0 评论 -
CSS中，relative和absolute的区别，及结合使用
固定定位写法：position：fixed；不会随浏览器窗口的滚动条滚动而变化，总是在视线里的元素（例如两边的广告，这个比较简单就不进行介绍）相对定位写法：position：relative；定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。相对于本身偏移，没有脱离文档流。<div class="box"> <div class...转载 2019-08-25 17:30:29 · 2446 阅读 · 0 评论 -
小白轻松使用swiper插件
swiper插件如何使用lswiper插件写轮播图？1、从swiper官网上下载swiper插件包，在你的项目中引入css js两个文件，swiper.min.css,swiper.min.js这两个文件。（也可以从我的网盘里下载链接：https://pan.baidu.com/s/1i8_Q82HimnasAehZH5QYoA提取码：opyp复制这段内容后打开百度网盘手机App，操作更...原创 2019-08-14 15:58:47 · 559 阅读 · 0 评论 -
css之display:inline-block布局
css之display:inline-block布局1.解释一下display的几个常用的属性值，inline ， block， inline-blockinline（行内元素）:使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.不能更改元素的height，width的值，大小由内容撑开.可以使用padding上下左右都有效，margin只有left和r...转载 2019-08-14 14:07:49 · 375 阅读 · 0 评论 -
css >>> 、 /deep/、::deep 深度选择器
CSS深度选择器简言之scoped的实现原理简言之在做vue项目的过程中，在style样式中加入scoped的实现原理vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译...原创 2019-08-08 16:01:25 · 14040 阅读 · 0 评论 -
CSS中的'+','~','>',空格含义
代码（例子）<p>段落P</p><ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li></ul>p~ul { background:;#fff;}//选中p元素之后出现的所有ul元素，两种元素必须拥有相同的...原创 2019-08-08 14:58:30 · 528 阅读 · 0 评论