首页 编程语言 css

几个鲜为人知的CSS设置(css column-count)

水平和垂直对齐

第一种方式 ： grid + place-items

 .parent {
   display: grid;
   place-items: center;
 }
 /*注： place-items 是 justify-items 和 align-items 的简写属性 */

效果图如下：

 .parent {
   display: grid;
   place-items: center;
   grid-template-columns:100px auto 100px ;/* 规定网格布局中的列数（和宽度）， 此属性可以一次应用于一个或多个（子）单元格 */
   /*常用的属性值： grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;*/
 }

效果图如下：

第二种方式 ： flex + margin

 .parent {
   display: flex;
 }
 .child {
   margin: auto;
 }

效果图如下：

flex + gap

 .parent {
   display: flex;
   flex-wrap: wrap;
   gap: 1em;/* 设置flex项之间的间隙  */
 }

效果图

::selection 伪元素设置文本选择的样式

 
 p::selection {
   background-color: #fff;
   color: red;
 }

效果图

::marker 伪元素

实现的效果等价于使用 list-style: none 删除列表标记，并使用 ::before 或 ::after 伪元素添加我们自己的标记

 li::marker {
       content: "✔ ";
       color: green;
     }

效果图

attr() 函数 检索所选元素的属性并在样式中使用它

 <p>Some <span tooltip="attr函数">text</span> here</p>
 p {
   margin: 2em;
   font-size: 1.25rem;
 }
 span {
   color: #1266f1;
   border-bottom: 1px dashed;
   position: relative;
   cursor: pointer;
 }
 span::after {
   /*  ---  */
   content: attr(tooltip);
   /*  ---  */
   position: absolute;
   top: -1.25em;
   left: 50%;
   transform: translateX(-50%);
   color: #00b74a;
   font-style: italic;
   opacity: 0;
   transition: 0.2s;
 }
 span:hover::after {
   opacity: 1;
 }

效果

calc（） 函数用于指定使用大小、角度、时间或者数字作为值的属性的计算值

注： 可以进行对不同单位进行计算

 div{
   height: calc(100% - 50px);
 }

caret-color 属性设置插入符号的颜色

 textarea{
   caret-color: red;
 }

效果图

text-overflow 设置

 div {
   text-overflow: ellipsis;
 }

效果：

columns 是复合属性，column-count 和column-width的简写

属性值：

  • column-count: 指定列数
  • column-gap：设置列之间的间隙
  • column-rule：设置列之间垂直线的样式
 <p>
     HTML 参考手册
     HTML ASCII 参考手册
     HTML 语言代码参考手册
     HTML 参考手册
     HTML 参考手册
     HTML ASCII 参考手册
     HTML 语言代码参考手册
     HTML 参考手册
     HTML 5 视频/音频参考手册
     HTML 5 Canvas 参考手册
     CSS 参考手册
     CSS 选择器参考手册
     CSS 听觉参考手册
     CSS 参考手册
     CSS 听觉参考手册
     JavaScript 参考手册
     JavaScript 参考手册
     JavaScript 参考手册
     jQuery 参考手册
     jQuery 参考手册 - 选择器
     jQuery 参考手册 - 事件
     jQuery 参考手册 - 效果
     jQuery 参考手册 - 文档操作
     jQuery 参考手册 - 属性操作
     jQuery 参考手册 - CSS 操作
     jQuery 参考手册 - Ajax
     jQuery 参考手册 - 遍历
     jQuery 参考手册 - 数据
     jQuery 参考手册 - DOM 元素方法
     jQuery 参考手册 - 核心
     jQuery 参考手册 - 属性
     JavaScript 参考手册
     ASP.NET MVC - 参考手册
     XSLT 元素参考手册
     XSLT 函数参考手册
     XSL-FO 参考手册
     XQuery 参考手册
     XLink 参考手册
     XML Schema 参考手册
     XML DOM 参考手册
     XForms 数据类型 参考手册
     WML 参考手册
     WML 参考手册
     RSS 参考手册
     Web 多媒体元素参考手册
     Windows Media Player 参考手册
     MIME 参考手册
     HTML 参考手册
     HTML 参考手册
     HTML 5 视频/音频参考手册
     HTML 5 Canvas 参考手册
     HTML ASCII 参考手册
     HTML 语言代码参考手册
     JavaScript 参考手册
     JavaScript 事件参考手册
     ADO 参考手册
     ASP 参考手册
     ASP.NET 参考手册
     HTML DOM 参考手册
     PHP 参考手册
     jQuery 参考手册 - 队列控制
     JavaScript 参考手册
     CSS 参考手册
     RDF 参考手册
     SMIL 参考手册
     SVG 参考手册
   </p>
 p {
       margin: 1em;
       /* --- */
       column-count: 3;
       column-gap: 2em;
       column-rule: 1px dotted;
       /* --- */
     }

效果图

inline-flex

具有 Flexbox 功能的内联元素

 span{
   display: inline-flex;
 }

background-repeat 设置北京填充指定图片的顺序

属性值：

  • repeat: 图像平铺到整个容器内
  • round:在容器的整个宽度上均匀分布
  • space: 在图像之间添加少量填充

注：亲手做一下效果会更好

    .repeat {
       background-repeat: repeat;
     }
     .round {
       background-repeat: round;
     }
     .space {
       background-repeat: space;
     }

object-fit 属性控制被替换元素的纵横比

例如img 和 viedeo 标签



相关推荐