1.display 屬性

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

值描述

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

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

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

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

2.-webkit-相關

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

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

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

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

3.偽元素

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

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

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

4.content 屬性

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

使用自定義字體圖標 @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 可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用于某個元素的字體族名稱或/及類族名稱的一個優(yōu)先表。瀏覽器會使用它可識別的第一個值。? ? ? ??

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

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

6.position 屬性

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

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

所以，當你發(fā)現(xiàn)某些元素層疊在一起了，可能就是用錯了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即紅綠藍，它們的范圍為0到255之間的整數(shù)或者0%到100%之間的百分數(shù)，描述了紅綠藍三原色在預期色彩中的量。第四個值，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代表無邊框。

9.margin 屬性

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

margin:10px 5px 15px 20px;

10.padding 屬性

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

padding:10px 5px 15px 20px;

margin 和padding的區(qū)別：

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

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

11.cursor 屬性

? ? ? ? 該屬性定義了鼠標指針放在一個元素邊界范圍內(nèi)時所用的光標形狀

值描述

url	需使用的自定義光標的 URL。 注釋：請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。
default	默認光標（通常是一個箭頭）
auto	默認。瀏覽器設置的光標。
crosshair	光標呈現(xiàn)為十字線。
pointer	光標呈現(xiàn)為指示鏈接的指針（一只手）
move	此光標指示某對象可被移動。
e-resize	此光標指示矩形框的邊緣可被向右（東）移動。
ne-resize	此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
nw-resize	此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
n-resize	此光標指示矩形框的邊緣可被向上（北）移動。
se-resize	此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
sw-resize	此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
s-resize	此光標指示矩形框的邊緣可被向下移動（南）。
w-resize	此光標指示矩形框的邊緣可被向左移動（西）。
text	此光標指示文本。
wait	此光標指示程序正忙（通常是一只表或沙漏）。
help	此光標指示可用的幫助（通常是一個問號或一個氣球）。

12.animation（動畫）和transition（過渡）屬性

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

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

13.rem單位

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

? ? ? ? 根元素就是html標簽，如下所示：

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屬性

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

? ? ? ?一般設置為：box-sizing: border-box;那么，這個div不會因為border: 2px solid black; 有了2px的border而變大。對外看來，div還是一個固定的大小。

15.clear 屬性

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

clear:left; ---左邊不允許有浮動元素 clear:right; ---右邊不允許有浮動元素 clear:both; ---左右兩邊不允許有浮動元素

?

?

?

?

?

?

?

?

總結(jié)

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

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