CSS相关知识点记录
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è)值,分別是上、右、下、左
10.padding 屬性
? ? ? ? 該屬性在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性
 ? ? ? ? 該屬性可以有 1 到 4 個(gè)值,分別是上、右、下、左
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)題。
 
                            
                        - 上一篇: Django--在线相册管理系统(2)
- 下一篇: 网络相册管理系统java,基于JAVA的
