水平和垂直對齊

第一種方式 ： 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 標簽