css之Content content內容生成技術

2021-10-02 21:55:10 字數 1464 閱讀 6173

content屬性基本上在::before ::after兩個偽元素中

這裡重點不在於content的值，而是為元素本身。我們會把content的值設定成content:"";

案例1、清除浮動：

.clear:after:
案例2、柱狀圖

.box


.box:before


.box:after


.bar
常見的應用就是配合@font-face規則實現圖示字型效果。

:after
\a \d標示的都是換行，「正在載入中...」的頁面的時候，常常需要後頭的三個點是動態的，也就是「正在載入中.」=>「正在載入中..」=>「正在載入中...」

正在載入中...
css為

dot


dot::before


@keyframes dot


66% 


}
ie8不認識dot所以直接顯示其內容：...

ie9不認識animation所以顯示第一行內容

直接用url功能顯示

div:before
div:before
img:aftrer


.icon:before
counter-reset counter-increment 和乙個方法counter()/counters()

1>、counter-reset 計數器重置，順便告訴你從**開始計數，預設是0

.***
ie 和firefox不能識別小數，如果不識別的數字，就從0開始計算，chrome從向下取整開始計算

可以多個計數器一起實用

.***
2>counter-increment計數器增加
.counter


.counter:before
.counter
.counter
.counter
2>counter()這個是方法不是屬性
我是白王爺1


我是白王爺2


我是白王爺3


我是白王爺4


我是白王爺4的兒子
以下寫法不對



我是白王爺1


我是白王爺2


我是白王爺3


我是白王爺4


我是白王爺4的兒子

前端之css之單位

1.百分比 預設元素高度設定為100 以自身高度為準，如果父元素設定寬度，子元素寬度為父元素寬度。2.rem rem相對於html元素的font size屬性的大小而變化，需要由js 動態控制。3.vh,vw vw 可視區域的寬度，總寬度為100vw vh 可是區域的高度，總高度為100vh4.ca...

CSS之CSS概念記錄1

css的選擇器 1 子選擇器，即大於符號 用於選擇指定標籤元素的第一代子元素 food li 2 包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側 編輯器中的 first span css的繼承 css的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某...

CSS之CSS概念記錄2

元素分類 常用的塊狀元素有 div p h1 h6 ol ul dl table address blockquote form 常用的內聯元素有 a span br i em strong label q var cite code 常用的內聯塊狀元素有 img input 注意 設定displa...