Sass 介紹及快速入門
Sass 是由 Ruby 語言編寫的一款 CSS 預處理語言。它是一款強化 CSS 的輔助工具，是對 CSS 的擴展，擴展了嵌套、混合、繼承、導入等高級功能，這些拓展令 CSS 更加強大優雅，可以更好的組織管理樣式文件，從而更高效的開發項目
辰風沐陽 閱讀 834 2023-03-20
CSS overflow 內容溢出時的顯示方式
css 中的 overflow 屬性用于控制內容溢出元素框時的顯示方式。當元素框中的內容溢出時，無非就是兩種情況: 溢出部分隱藏、溢出部分通過滾動條查看。最常見用法是: overflow: hidden; (溢出隱藏) overflow: auto; (內容溢出時顯示滾動條)
辰風沐陽 閱讀 949 2022-08-16
CSS 選擇器詳細分類
CSS 選擇器有很多類型: 通配符選擇器、標簽選擇器、類選擇器、id選擇器、群組選擇器、后代選擇器、子代選擇器、交集選擇器、兄弟選擇器、屬性選擇器、偽類選擇器。使用合適的選擇器可以更好匹配元素，CSS 樣式代碼更加優雅
辰風沐陽 閱讀 705 2022-08-06
CSS font-family 屬性設置字體
font-family 屬性用于給元素指定字體，該屬性的值是一個字體系列，每個值使用逗號隔開，如果字體名名稱包含空格，那么字體名稱必須使用引號包裹，設置的字體是否可用取決于用戶機器上該字體是否可用
辰風沐陽 閱讀 1056 2022-07-28
玩轉 CSS Flexbox 彈性布局
本文記錄 CSS 彈性布局中常用的屬性及其屬性值。創建 flex 塊級容器: display: flex; 創建 flex 行內容器 display: inline-flex。定義主軸方向: flex-direction: row; 水平方向為主軸(默認值) flex-direction: column; 垂直方向為主軸
辰風沐陽 閱讀 733 2022-07-24
CSS 控制內容顯示行數
顯示一行內容，超出部分使用省略號表示（只有塊元素才會生效）overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 顯示兩行或三行，超出部分用省略號顯示，需要使用 -webkit-box-orient: vertical;
辰風沐陽 閱讀 901 2022-07-07
flex 彈性布局常用屬性
flex 是 Flexible Box 的縮寫, 意為彈性布局，又稱為彈性盒布局、伸縮盒布局。用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 Flex 布局。通過給父元素添加 flex 屬性，來控制子盒子的位置和排列方式
辰風沐陽 閱讀 877 2022-01-11
CSS 邊框屬性總結
CSS邊框屬性：1. 基本屬性（border）邊框寬度、邊框樣式、邊框顏色 2. 邊框倒角（border-radius）3. 邊框陰影（box-shadow）4. 輪廓屬性（outline）
辰風沐陽 閱讀 1233 2020-09-10
父元素透明度不影響子元素透明度解決方案
父元素設置opacity：0.5，子元素會受到父元素opacity的影響，也會有0.5的透明度。即使設置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基礎上設置的，因此子元素的opacity還是0.5。
辰風沐陽 閱讀 1432 2020-06-26