當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

我的 CSS3 笔记

發(fā)布時(shí)間：2025/3/20 CSS 24 豆豆

生活随笔收集整理的這篇文章主要介紹了我的 CSS3 笔记小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. CSS3 選擇器

2. CSS3屬性

1、position屬性

定義和用法：position 屬性規(guī)定元素的定位類型。

說明：這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對或固定元素會(huì)生成一個(gè)塊級框，而不論該元素本身是什么類型。相對定位元素會(huì)相對于它在正常流中的默認(rèn)位置偏移。

可能的值：

瀏覽器支持：所有主流瀏覽器都支持 position 屬性。

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

2.css的z-index屬性

定義和用法：z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。

注釋：元素可擁有負(fù)的 z-index 屬性值。

注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

說明：該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。

可能的值：

瀏覽器支持：所有主流瀏覽器都支持 z-index 屬性。

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

2、box-shadow 屬性

box-shadow 屬性向框添加一個(gè)或多個(gè)陰影。

語法：box-shadow: h-shadow v-shadow blur spread color inset;

3、pointer-events

pointer-events屬性值詳解

auto——效果和沒有定義pointer-events屬性相同，鼠標(biāo)不會(huì)穿透當(dāng)前層。在SVG中，該值和visiblePainted的效果相同。
none——元素不再是鼠標(biāo)事件的目標(biāo)，鼠標(biāo)不再監(jiān)聽當(dāng)前層而去監(jiān)聽下面的層中的元素。但是如果它的子元素設(shè)置了pointer-events為其它值，比如auto，鼠標(biāo)還是會(huì)監(jiān)聽這個(gè)子元素的。
其它屬性值為SVG專用，這里不再多介紹了。

pointer-events: none;

可以讓某個(gè)元素實(shí)現(xiàn)類似于海市蜃樓的效果，具體理解為，你可以看的到某個(gè)元素，但是你無法摸的著。而 display：none; 是你摸不著，也看不見。

pointer-events: none；摸不著，但是看得見。

如果把某個(gè)元素再加上opacity：0；則可以很容易實(shí)現(xiàn)類似display:none；的效果（摸不著，看不見）。

更多用法請查看 pointer-events: none; 忽略某一層的存在

3. C33 的 2D和3D 轉(zhuǎn)換

2D 轉(zhuǎn)換包括：平移，旋轉(zhuǎn)，縮放，偏轉(zhuǎn)

? 瀏覽器兼容性的處理，比如：

? -webkit-transform，-moz-transform，-ms-transform，-o-transform

?CSS3 的 3D 轉(zhuǎn)換

4. CSS3 的過渡動(dòng)畫

如果有第四個(gè)值，表示先變化一個(gè)屬性，延遲一定時(shí)間，再變化另一個(gè)屬性，兩個(gè)屬性之間用逗號隔開

linear,規(guī)定以相同速度開始至結(jié)束的過渡效果（等于cubic-bezier(0,0,1,1)）

ease，規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（等于cubicbezier(0.25,1,0.25,1)）

ease-in，規(guī)定以慢速開始的過渡效果，（等于cubic-bezier(0.42,0,1,1)）

ease-out，規(guī)定以慢速結(jié)束的過渡結(jié)果（等于cubic-bezier(0,0,0.58,1)）

ease-in-out，規(guī)定以慢速開始和結(jié)束的過渡效果，（等于cubic-bezier(0.42,0,0.58,1)）

必須要有： 1.起始屬性? 2.終止屬性?

?CSS3 過渡使用?

?1.需要具有層級關(guān)系?

?2.必須是 hover 可以做到的?

?3.需要考慮是否有動(dòng)態(tài)數(shù)據(jù)的添加，沒有動(dòng)態(tài)就可以用，動(dòng)態(tài)數(shù)據(jù)用jQuery來寫，用回調(diào)來接收動(dòng)態(tài)數(shù)據(jù)?

5. object-fit ( image，video ) 自適應(yīng)

（1）替換元素

? 其內(nèi)容不受CSS視覺格式化模型（中文釋義參見這里）控制的元素，比如image, 嵌入的文檔(iframe之類)或者applet。比如，img元素的內(nèi)容通常會(huì)被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸：一個(gè)固有的寬度，一個(gè)固有的高度和一個(gè)固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度，從而也有固有的寬高比率。另一方面，其他文檔也可能沒有固有的尺寸，比如一個(gè)空白的html文檔。 CSS渲染模型不考慮替換元素內(nèi)容的渲染。這些替換元素的展現(xiàn)獨(dú)立于CSS。object, video, textarea, input也是替換元素，audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。

（2）為何需要object-position/object-fit?

?適配響應(yīng)式布局

（3）object-fit理解

.fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }復(fù)制代碼

每個(gè)屬性值的具體含義如下：

fill : 中文釋義“填充”。默認(rèn)值。替換內(nèi)容拉伸填滿整個(gè)content box, 不保證保持原有的比例。?

contain : 中文釋義“包含”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定可以在容器里面放得下。因此，此參數(shù)可能會(huì)在容器內(nèi)留下空白。?

cover : 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸，寬度和高度至少有一個(gè)和容器一致。因此，此參數(shù)可能會(huì)讓替換內(nèi)容（如圖片）部分區(qū)域不可見。 none : 中文釋義“無”。保持原有尺寸比例。同時(shí)保持替換內(nèi)容原始尺寸大小。?

scale-down : 中文釋義“降低”。就好像依次設(shè)置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個(gè)。

6.? 同向邊距的重合問題（overflow : hidden 三個(gè)作用）

? ?overflow : hidden??

（1）給父級加 overflow : hidden 可以清除子級浮動(dòng)對父級的影響

（2）給父級加 overflow : hidden 可以使子級超出部分隱藏（比如：制作輪播圖時(shí)）

（3）給父級加 overflow : hidden。解決同向邊距的重合問題；

HTML: <div id="box"><p>中華人民共和國</p> </div CSS: <style>*{padding: 0;margin: 0;}#box{width: 300px;height: 300px;background-color: aquamarine;/* padding-top: 30px; */}#box p{background-color: brown;margin-top: 30px;} </style> 復(fù)制代碼

子集元素加入margin:top 的同時(shí)，父級元素沒有margin:top，那么子集元素的margin：top 會(huì)加到父級上，導(dǎo)致整體的div全部下降，解決思路：給父級加 overflow:hidden 屬性?

案例

案例 1：盾牌制作：

案例 2：撲克牌

案例3. 鐘表的翻轉(zhuǎn)

案例4. 正反面的翻頁效果

案例5. 正方體的制作

style>body{perspective: 800px;}div{width: 300px;height: 300px;border: 1px solid #ccc;}.box{margin: 400px auto;position: relative;transform-style: preserve-3d;-webkit-transform:rotateY(24deg) rotateX(35deg);transition: transform 6s linear;}.box:hover{-webkit-transform:rotateY(360deg) rotateX(360deg);}.box div{position: absolute;line-height: 300px;text-align: center;font-size: 100px;color: #ccc;}.box div:first-child{background-color: red;transform-origin: right;-webkit-transform:rotateY(90deg); }.box div:nth-child(2){background-color: orange;transform-origin: left;-webkit-transform:rotateY(270deg); }.box div:nth-child(3){background-color: yellow;-webkit-transform:rotateX(90deg) translateY(150px) translateZ(150px);}.box div:nth-child(4){background-color: green;transform-origin: left;-webkit-transform:rotateX(270deg) translateY(-150px) translateZ(150px); }.box div:nth-child(5){background-color: blue;-webkit-transform:translateZ(300px)}.box div:nth-child(6){background-color: purple;-webkit-transform:rotateY(180deg); }</style> </head> <body><div class="box"><div class="up">上</div><div class="down">下</div><div class="left">左</div><div class="right">右</div><div class="front">前</div><div class="rear">后</div></div> </body>復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的我的 CSS3 笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

笔记