随笔分类 -  CSS

文字下滑线渐变效果(有hover效果)
摘要：文字下滑线渐变效果(有hover效果) 利用线性渐变，先设置background-size款为0，搞为3px,transition设置过过渡时间，hover时，把background-size宽度设为100%，高度还是3px <p> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 阅读全文
posted @ 2024-08-22 16:20 芬-mi 阅读(32) 评论(0) 推荐(0)
因为子元素的浮动，导致父元素的边框变成一条线
摘要：因为子元素的浮动，导致父元素的边框变成一条线，如下： <style> .container{ width: 500px; border: 1px solid #ccc; } p{ float: left; } </style> <body> <div class="container"> <p>11 阅读全文
posted @ 2023-08-01 10:46 芬-mi 阅读(24) 评论(0) 推荐(0)
使用css在元素的前面或者后面添加内容
摘要：:before 在元素前面添加内容 :after 在元素的后面添加内容 <!DOCTYPE html> <html> <style> h1:after { content: '前面的内容'; } h1:before{ content:'后面的内容'; } </style> <body> <h1>** 阅读全文
posted @ 2023-04-14 12:33 芬-mi 阅读(479) 评论(0) 推荐(0)
user-select属性
摘要：user-select:none;禁止用户选中文字 防止选取 <div> 元素的文本： div { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10+ and Edge */ user-select: no 阅读全文
posted @ 2023-03-15 15:56 芬-mi 阅读(263) 评论(0) 推荐(0)
前端对于后端返回连续空格的展示问题
摘要：问题：后端接口返回的字符串中存在连续性空格，前端没有完全展示出空格 原因：html标签在浏览器中会将多个连续性空格合并为一个空格 解决方案： 使用CSS white-space 属性 由于我的需求是既要保留空格的个数，又要正常换行，所以用到了pre-wrap属性值。 【 white-space:pr 阅读全文
posted @ 2023-03-13 17:12 芬-mi 阅读(325) 评论(0) 推荐(0)
CSS选择器优先级 && CSS选择器效率
摘要：mportant>行内样式>id选择器>类选择器|伪类|属性选择器>标签>通配符>继承>浏览器默认样式 !important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器 关于CSS的执行效率 样式系统从右向左匹配规则。只要当前选 阅读全文
posted @ 2023-02-10 16:50 芬-mi 阅读(33) 评论(0) 推荐(0)
overflow滚动条的样式设置和隐藏
摘要：一、样式设置 1）-webkit-scrollbar：设置水平滚动条的高度，垂直滚动的宽度 2）-webkit-scrollbar-thumb：设置滚动条里面的滑块样式 3）-webkit-scrollbar-track：设置滚动条的轨道背景样式 4）本文默认使用chrome浏览器查看运行效果 <! 阅读全文
posted @ 2023-02-10 16:20 芬-mi 阅读(200) 评论(0) 推荐(0)
页面导入样式时，使用link和@import有什么区别？
摘要：1.从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后 阅读全文
posted @ 2023-02-10 12:13 芬-mi 阅读(91) 评论(0) 推荐(0)
flex属性
摘要：父元素属性 1.display:flex;（定义了一个flex容器） 2.flex-direction（决定主轴的方向） row（默认值，水平从左到右）colunm（垂直从上到下）row-reverse（水平从右到左）column-reverse（垂直从下到上） 3.flex-wrap（定义如何换行 阅读全文
posted @ 2023-02-10 10:34 芬-mi 阅读(30) 评论(0) 推荐(0)