1.display 屬性

? ? ? ? display 屬性規(guī)定元素應(yīng)該生成的框的類型。可能的值。比如設(shè)置為block的時(shí)候，它就單獨(dú)成為一行；設(shè)置為inline的時(shí)候，它就與前后的元素保持在一行內(nèi)；設(shè)置為inline-block的時(shí)候，它與前后元素保持在一行內(nèi)，而且是最底部是保持整齊。

值描述

none	此元素不會(huì)被顯示。
block	此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
inline	默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。
inline-block	行內(nèi)塊元素。（CSS2.1 新增的值）
list-item	此元素會(huì)作為列表顯示。
run-in	此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
compact	CSS 中有值 compact，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
table	此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>），表格前后帶有換行符。
inline-table	此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 <table>），表格前后沒(méi)有換行符。
table-row-group	此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tbody>）。
table-header-group	此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <thead>）。
table-footer-group	此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tfoot>）。
table-row	此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）。
table-column-group	此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 <colgroup>）。
table-column	此元素會(huì)作為一個(gè)單元格列顯示（類似 <col>）
table-cell	此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>）
table-caption	此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 <caption>）
inherit	規(guī)定應(yīng)該從父元素繼承 display 屬性的值。

網(wǎng)頁(yè)雖然看起來(lái)是平面的二維結(jié)構(gòu)，但它其實(shí)是有z軸的，z軸的大小由z-index 控制，默認(rèn)情況下，
所有元素都是在z-index: 0 這一層的，這就是文檔流。
設(shè)置position: relative 或 position: absolute會(huì)讓元素浮起來(lái)（就像游戲中的概念-多層圖層），
也就是z-index大于0，它會(huì)改變正常情況下的文檔流。
不同的是position: relative 會(huì)保留自己在z-index:0 層的位置，
但是它的實(shí)際位置可能因?yàn)樵O(shè)置了left、top、right、bottom值而偏離原來(lái)在文檔流中的位置，
但對(duì)其他仍然在z-index:0層的元素位置不會(huì)造成影響。
而position: absolute會(huì)完全脫離文檔流，不再在z-index:0層保留占位符，
其left、top、right、bottom 值是相對(duì)于自己最近的一個(gè)位置–設(shè)置了position: relative 或 position: absolute的祖先元素的，
如果祖先元素都沒(méi)有設(shè)置position: relative 或 position: absolute，那么就相對(duì)于body元素。

不論之前什么類型的元素（display:none除外），
只要設(shè)置了position: absolute 或 float中任意一個(gè)，
都會(huì)讓元素以display:inline-block的方式顯示：可以設(shè)置長(zhǎng)寬，默認(rèn)寬度并不占滿父元素。
就算我們顯式地設(shè)置 display:inline或者display:block，也仍然無(wú)效
值得注意的是，position: relative卻不改變display的類型。

比如div元素，它的默認(rèn)display屬性值為“block”，成為“塊級(jí)”元素(block-level)；
而span元素的默認(rèn)display屬性值為“inline”，稱為“行內(nèi)”元素。

2.-webkit-相關(guān)

? ? ? ??”WebKit” 即指代使用Webkit內(nèi)核的瀏覽器(Safari、Chrome、iPhone、iPad、Android等)，”Gecko“指代采用Gecko內(nèi)核的瀏覽器(Firefox等)。

-webkit-mask讓為一個(gè)元素添加蒙板成為可能，從而你可以創(chuàng)建任意形狀的花樣。

-webkit-text-stroke可以為文字添加邊框。

-webkit-tap-highlight-color這個(gè)屬性只用于iOS (iPhone和iPad)。當(dāng)你點(diǎn)擊一個(gè)鏈接或者通過(guò)Javascript定義的可點(diǎn)擊元素的時(shí)候，它就會(huì)出現(xiàn)一個(gè)半透明的灰色背景。

3.偽元素

：before?偽元素在元素之前添加內(nèi)容。

：after 偽元素?元素之后添加內(nèi)容。

::before和::after匹配一個(gè)虛擬元素，主要被用于為當(dāng)前元素增加裝飾性內(nèi)容的。他顯示的內(nèi)容是其自身的“content”屬性，默認(rèn)是內(nèi)聯(lián)元素。這兩個(gè)偽元素允許創(chuàng)作人員在元素內(nèi)容的最前面插入生成內(nèi)容。默認(rèn)地，這個(gè)偽元素是行內(nèi)元素，不過(guò)可以使用屬性 display 改變這一點(diǎn)。

4.content 屬性

content 屬性設(shè)置文本或圖像出現(xiàn)（浮動(dòng)）在另一個(gè)元素中的什么地方。

使用自定義字體圖標(biāo) @font-face {font-family: 'icomoon';src:url('../fonts/icomoon.eot?yrquyl');src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'),url('../fonts/icomoon.woff?yrquyl') format('woff'),url('../fonts/icomoon.ttf?yrquyl') format('truetype'),url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg');font-weight: normal;font-style: normal; } [class^="icon-"], [class*=" icon-"] {font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-home:before {content: "\e600"; }

5.font-familiy屬性

? ? ? ? font-family 規(guī)定元素的字體系列。font-family 可以把多個(gè)字體名稱作為一個(gè)“回退”系統(tǒng)來(lái)保存。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。也就是說(shuō)，font-family 屬性的值是用于某個(gè)元素的字體族名稱或/及類族名稱的一個(gè)優(yōu)先表。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值。? ? ? ??

? ? ? ? 有兩種類型的字體系列名稱：

? ? ? ? 指定的系列名稱：具體字體的名稱，比如："times"、"courier"、"arial"。
? ? ? ? 通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

6.position 屬性

? ? ? ? position屬性有三個(gè)參數(shù)：static absolute relative?

? ? ? ? static : 　無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則
? ? ? ? absolute : 　將對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)css z-index屬性定義。此時(shí)對(duì)象不具有邊距，但仍有補(bǔ)白和邊框
? ? ? ? relative : 　對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置

所以，當(dāng)你發(fā)現(xiàn)某些元素層疊在一起了，可能就是用錯(cuò)了relative定位了。

.pt-triggers {position: absolute;width: 300px;z-index: 999999;top: 12%;left: 50%;margin-top: 130px;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%); transform: translateX(-50%); } .pt-perspective {position: relative;width: 100%;height: 100%;-webkit-perspective: 1200px;-moz-perspective: 1200px;perspective: 1200px; }

7.RGBA屬性

? ? ? ? RGB即紅綠藍(lán)，它們的范圍為0到255之間的整數(shù)或者0%到100%之間的百分?jǐn)?shù)，描述了紅綠藍(lán)三原色在預(yù)期色彩中的量。第四個(gè)值，Alpha值，制定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。? ? ? ??

rgba(255, 255, 255, 0) //完全透明的白色 rgba(0, 0, 0,1 ) //完全不透明度的黑色 rgba(144, 238 ,144, 0.5) //半透明的青蘋果綠 rgba(255,252,153,0.5) //暖黃色

8.border屬性

? ? ? ? border是邊框的意思。border: none代表無(wú)邊框。

9.margin 屬性

? ? ? ? 該屬性設(shè)置一個(gè)元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度
? ? ? ? 該屬性可以有 1 到 4 個(gè)值,分別是上、右、下、左

margin:10px 5px 15px 20px;

10.padding 屬性

? ? ? ? 該屬性在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性
? ? ? ? 該屬性可以有 1 到 4 個(gè)值,分別是上、右、下、左

padding:10px 5px 15px 20px;

margin 和padding的區(qū)別：

? ? ? ? margin是指從自身邊框到另一個(gè)容器邊框之間的距離，就是容器外距離。（外邊距）

? ? ? ? padding是指自身邊框到自身內(nèi)部另一個(gè)容器邊框之間的距離，就是容器內(nèi)距離。（內(nèi)邊距）

11.cursor 屬性

? ? ? ? 該屬性定義了鼠標(biāo)指針?lè)旁谝粋€(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀

值描述

url	需使用的自定義光標(biāo)的 URL。 注釋：請(qǐng)?jiān)诖肆斜淼哪┒耸冀K定義一種普通的光標(biāo)，以防沒(méi)有由 URL 定義的可用光標(biāo)。
default	默認(rèn)光標(biāo)（通常是一個(gè)箭頭）
auto	默認(rèn)。瀏覽器設(shè)置的光標(biāo)。
crosshair	光標(biāo)呈現(xiàn)為十字線。
pointer	光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）
move	此光標(biāo)指示某對(duì)象可被移動(dòng)。
e-resize	此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)。
ne-resize	此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）。
nw-resize	此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）。
n-resize	此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)。
se-resize	此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）。
sw-resize	此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）。
s-resize	此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）。
w-resize	此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）。
text	此光標(biāo)指示文本。
wait	此光標(biāo)指示程序正忙（通常是一只表或沙漏）。
help	此光標(biāo)指示可用的幫助（通常是一個(gè)問(wèn)號(hào)或一個(gè)氣球）。

12.animation（動(dòng)畫）和transition（過(guò)渡）屬性

? ? ? ? animation（動(dòng)畫）、transition（過(guò)渡）是CSS3中的兩種動(dòng)畫屬性。
? ? ? ? animation強(qiáng)調(diào)流程與控制，對(duì)元素的一個(gè)或多個(gè)屬性的變化進(jìn)行控制，可以有多個(gè)關(guān)鍵幀（animation 和@ keyframes結(jié)合使用；

? ? ? ? transform(變形)是CSS3中的元素的屬性，translate（移動(dòng)）是transform的一個(gè)屬性值；transform是transition（過(guò)渡動(dòng)畫）的transition-property的一個(gè)屬性值。
? ? ? ? transition強(qiáng)調(diào)過(guò)渡，是元素的一個(gè)或多個(gè)屬性發(fā)生變化時(shí)產(chǎn)生的過(guò)渡效果，同一個(gè)元素通過(guò)兩個(gè)不同的途徑獲取樣式，而第二個(gè)途徑當(dāng)某種改變發(fā)生（例如hover）時(shí)才能獲取樣式，這樣就會(huì)產(chǎn)生過(guò)渡動(dòng)畫。可以認(rèn)為它有兩個(gè)關(guān)鍵幀（Transition ＋ Transform ＝ 兩個(gè)關(guān)鍵幀的Animation）。

13.rem單位

? ? ? ? rem是CSS3里面的內(nèi)容，rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位，它就是一個(gè)相對(duì)單位。
? ? ? ? 另外，還有一個(gè)em單位，em（font size of the element）是指相對(duì)于父元素的字體大小的單位。
? ? ? ? 它們之間很相似，rem計(jì)算的規(guī)則是依賴根元素，em是依賴父元素計(jì)算。

? ? ? ? 根元素就是html標(biāo)簽，如下所示：

html{font-size:20px; } .btn {width: 6rem;height: 3rem;line-height: 3rem;font-size: 1.2rem;display: inline-block;background: #06c;color: #fff;border-radius: .5rem;text-decoration: none;text-align: center; }

html的font-size是20px，那么.btn的width=6*20=120px

14.box-size屬性

? ? ? ? 設(shè)置CSS的box-sizing屬性值為“border-box”，這樣就會(huì)把borders和padding全都包含在定義的寬高里面。這就意味著一個(gè)帶有2px邊框的200px的div仍然寬度是200px。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。

? ? ? ?一般設(shè)置為：box-sizing: border-box;那么，這個(gè)div不會(huì)因?yàn)閎order: 2px solid black; 有了2px的border而變大。對(duì)外看來(lái)，div還是一個(gè)固定的大小。

15.clear 屬性

? ? ? ? clear屬性定元素的哪一側(cè)不允許其他浮動(dòng)元素

clear:left; ---左邊不允許有浮動(dòng)元素 clear:right; ---右邊不允許有浮動(dòng)元素 clear:both; ---左右兩邊不允許有浮動(dòng)元素

?

?

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的CSS相关知识点记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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