随笔分类 -  CSS3

flex-grow: 1 占据父容器剩下的空间
摘要：你想在 flex 布局下让某个子元素占据父容器剩余宽度，可以用 flex-grow 或 flex: 1 来实现。 1️⃣ 基本示例 <div class="container"> <div class="item">固定宽度</div> <div class="item flex-grow">占剩余 阅读全文
posted @ 2026-03-05 11:47 SimoonJia 阅读(5) 评论(0) 推荐(0)
div设置超出文本换行
摘要：最通用安全写法（直接可用） div { width: 200px; /* 必须有宽度限制 */ white-space: normal; /* 允许换行 */ overflow-wrap: break-word; /* 超长内容可断开 */ } 🚀 最保险完整版（推荐记住） div { width 阅读全文
posted @ 2026-03-02 17:52 SimoonJia 阅读(16) 评论(0) 推荐(0)
伪类选择器:focus-within
摘要：:focus-within 它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点，这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。 可以用:focus-within写按钮的点击边线效果： 代码： .label:focus-within { o 阅读全文
posted @ 2023-02-21 10:45 SimoonJia 阅读(44) 评论(0) 推荐(0)
滚动条-伪元素设置
摘要：::-webkit-scrollbar 滚动条整体，相当于包在最外面的父盒子 ::-webkit-scrollbar-thumb 滚动条里面的小方块（可以刺溜刺溜移动的那个） ::-webkit-scrollbar-track 滚动条的轨道（你就理解成父盒子的背景） ::-webkit-scroll 阅读全文
posted @ 2022-08-09 15:03 SimoonJia 阅读(70) 评论(0) 推荐(0)
文字滚动
摘要：//因为需要连续滚动，所以文本必须是两遍 <div class="wrap"> <div class="animate">我是文字</div> <div class="animate">我是文字</div> </div> //不能设置居中样式，会导致 出现空白缺口 .wrap{ display: f 阅读全文
posted @ 2022-07-22 11:23 SimoonJia 阅读(69) 评论(0) 推荐(0)
移动端点击时div或button的背景变化
摘要：-webkit-tap-highlight-color: rgba(0, 0, 0, 0) 阅读全文
posted @ 2022-07-01 10:32 SimoonJia 阅读(82) 评论(0) 推荐(0)
justify-content
摘要：justify-content 属性 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 justify-content 语法如下 justify-content: flex-start | flex-end | center | 阅读全文
posted @ 2022-06-29 13:16 SimoonJia 阅读(410) 评论(0) 推荐(0)
响应式web设计之CSS3 Media Queries
摘要：开始研究响应式web设计，CSS3 Media Queries是入门。 /* 大于1200 */ @media only screen and (min-width: 1024px) {} /* 400-1200 */ @media only screen and (min-width: 400px 阅读全文
posted @ 2022-03-28 19:19 SimoonJia 阅读(54) 评论(0) 推荐(0)