随笔分类 -  CSS

linear-gradient()
摘要：linear-gradient() mask-image mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent); 阅读全文
posted @ 2024-06-24 10:49 躺尸的大笨鸟 阅读(11) 评论(0) 推荐(0)
:is :not :has :where 选择器优先级
摘要：id 1 0 0 class :require :nth-of-type :root :hover :focus ... [type=text] 0 1 0 p ::before ::placeholder 两个字符 :: 0 0 1 :where +, >, ~, " ", and || no v 阅读全文
posted @ 2024-02-21 11:55 躺尸的大笨鸟 阅读(19) 评论(0) 推荐(0)
css 右边滚动条隐藏
摘要：::-webkit-scrollbar { width: 0; height: 0; } 阅读全文
posted @ 2024-01-24 15:05 躺尸的大笨鸟 阅读(22) 评论(0) 推荐(0)
MouseLeave MouseOut MouseEnter MouseOver
摘要：mouseenter 事件的作用与 CSS 伪类 :hover 非常相似。 MouseLeave: MouseEnter: 当鼠标在一个元素本身或者其子元素上移动时，mouseover 事件在该元素上触发。 MouseOut: MouseOver: https://developer.mozilla 阅读全文
posted @ 2023-12-06 10:37 躺尸的大笨鸟 阅读(15) 评论(0) 推荐(0)
包含块
摘要：确定包含块 一般情况：元素的包含块是最近的祖先块元素的内容区域 特殊情况：元素的包含块完全由这个元素的position属性确定 positon: relative、static、sticky 包含块可能是它的最近的祖先块元素的内容区的边缘组成（inline-block, block 或 list-i 阅读全文
posted @ 2023-10-17 11:58 躺尸的大笨鸟 阅读(20) 评论(0) 推荐(0)
img图片置灰， checkbox背景色变色
摘要：图片置灰 .pizza.sold-out img { filter: grayscale(); opacity: 0.8; } 强调色 accent-color: red 阅读全文
posted @ 2023-09-08 17:15 躺尸的大笨鸟 阅读(47) 评论(0) 推荐(0)
Grid布局
摘要：> https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout 阅读全文
posted @ 2023-09-06 11:20 躺尸的大笨鸟 阅读(19) 评论(0) 推荐(0)
flex布局
摘要：主轴方向： flex-direction 初始化值： 元素不会在主维度方向拉伸，但是可以缩小 元素被拉伸来填充交叉轴大小 flex: initial; justify-content: flex-start; align-items: stretch flex: 0 1 auto flex: aut 阅读全文
posted @ 2023-09-06 10:30 躺尸的大笨鸟 阅读(23) 评论(0) 推荐(0)
flex下的sticky失效
摘要：sticky加上 align-self: flex-start; 原因： 暂保留 阅读全文
posted @ 2023-09-05 14:42 躺尸的大笨鸟 阅读(180) 评论(0) 推荐(0)
element-table高度撑开外部div
摘要：<div class="page"> <div class="tableWrapper"> <el-table style="width: 100%; height: calc(100% - 72px);"> </el-table> </div> </div> .page { display: fl 阅读全文
posted @ 2023-09-05 14:20 躺尸的大笨鸟 阅读(305) 评论(0) 推荐(0)
像素，移动端适配基础
摘要：- 物理像素： - 物理分辨率： - 逻辑分辨率: 显示器分辨率等价于浏览器宽度 ![image](https://img2023.cnblogs.com/blog/2456011/202308/2456011-20230804134523521-895671854.png) - 逻辑像素：水平垂直 阅读全文
posted @ 2023-08-04 15:52 躺尸的大笨鸟 阅读(42) 评论(0) 推荐(0)
100dayscss.com的学习总结
摘要：1. ![image](https://img2023.cnblogs.com/blog/2456011/202307/2456011-20230724151721326-381573227.png) ![image](https://img2023.cnblogs.com/blog/2456011 阅读全文
posted @ 2023-07-24 15:22 躺尸的大笨鸟 阅读(24) 评论(0) 推荐(0)
echarts超出外部div
摘要：![image](https://img2023.cnblogs.com/blog/2456011/202306/2456011-20230629141317864-1270703604.png) 问题产生：先渲染dom 后渲染数据 解决方法： 1 可以延时渲染 2 监听resize事件 ``` t 阅读全文
posted @ 2023-06-29 14:22 躺尸的大笨鸟 阅读(276) 评论(0) 推荐(0)
父元素设置min-height ,子元素 height:100%无效
摘要：<div id="div1"> <span id="sp1">aaa</span> </div> 原因： 相对包含块 需要明确高度，子元素百分比才有效, 现在的div1没有明确的高度 什么是相对包含块？ https://developer.mozilla.org/zh-CN/docs/Web/CSS 阅读全文
posted @ 2023-06-18 11:11 躺尸的大笨鸟 阅读(75) 评论(0) 推荐(0)
sass样式穿透，深度作用选择器, 父选择器
摘要：scss .el-input-number { ::v-deep #inputNumber { text-align: left; } } css .el-input-number >>> #inputNumber { text-align: left; } & a { font-weight: b 阅读全文
posted @ 2023-04-23 11:59 躺尸的大笨鸟 阅读(245) 评论(0) 推荐(0)
css clear + bfc
摘要：1. clear 属性：清除浮动影响 当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关的浮动元素外边界的下方 <div style="float: left;">浮动内容</div> <div style="clear:both"></div> 相关浮动元素指的是在相同块级格式化上下文中的位 阅读全文
posted @ 2023-04-21 21:17 躺尸的大笨鸟 阅读(28) 评论(0) 推荐(0)