随笔分类 - CSS
【CSS】写一个原生的透明 input 标签输入框
摘要： ```html ``` ```css .search { height: 32px; width: 204px; dis
【CSS】项目初始化 css 设置推荐
摘要：1.初始化 css body { height: 100%; margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
【CSS】div 宽度根据文本自适应
摘要：width: fit-content; width: -webkit-fit-content; width: -moz-fit-content;
【CSS】css video 背景全屏视频
摘要：效果 实现 <video autoplay muted loop> <source src="@/assets/res-kg/video-kg.mp4" type="video/mp4" /> </video> video { position: absolute; top: 0; left: 0;
【CSS】BFC 是什么？
摘要：是什么 块级格式化上下文（一句话完事）。 怎么做 MDN BFC 触发条件。常用我们只需要知道下面五个： 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（inline block） overflow 值不为 visible 的块元素 弹性元素（displa
【CSS】flex 布局 justify-content：space-between；解决最后一排数量不够自动向两端排列问题
摘要：问题描述 flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况。 解决方法 先做个记录，待学习更新... 参考文章 flex布局 justify-content：space-between； 解决最后一排数量不够自动向两端排列问题，附录grid栅格布局完美解决
【CSS】:nth-of-type 选择器为什么不起作用？
摘要：发现问题 今天工作才发现的，原来我一直就理解错了！！ MDN官网对这个选择器的的定义是： :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 /* 在每组兄弟元素中选择第四个 元素 */ p:nth-of-type(4n) { co
【CSS】如何一行CSS代码查看整个页面布局？
摘要：* { outline: 1px solid #0000ff; } 通过全局设置outline样式查看所有样式边框，非常方便！！！ outline属性详细介绍
【CSS】设置指定行数文本隐藏
摘要：display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; // 第几行出现... 效果
【CSS】文本不换行并且对溢出文本进行处理（常用但经常搞忘的）
摘要：当我们的文本过多的时候，会导致文字换行，页面布局不是很美观，这时候需要我们进行不换行，只显示一行，并且对文字进行处理。 ###解决方法 使用 white-space 、text-overflow 和 overflow: hidden 属性配合 /* 文本不会换行 */ white-space: no
