目錄

基本概念

樣式屬性

字體樣式屬性font

font-size

font-family

font-weight

font-style

外觀屬性

color

line-height

text-aligh

text-indent

letter-spacing

word-spacing

顏色半透明(CSS3)

文字陰影(CSS3)

CSS背景background

background-color

background-image

background-repeat

background-position

background-attachment

背景透明 (CSS3)

背景縮放 (CSS3)

text-decoration

選擇器

標簽選擇器：?標簽名 {值對}

類選擇器：.類名 {值對}

多類名選擇器

ID選擇器：#ID值 {值對}

通配符選擇器：* {值對}

偽類選擇器： ：{值對}

鏈接偽類選擇器? ?

結構偽類選擇器【存在兼容問題】

目標偽類選擇器

樣式表

內部樣式表

行內樣式表

外部樣式表

標簽的顯示模式Display

塊元素：h,div,p,ul,ol,li等;

行內元素：a,strong,b,em,i,del,s,ins,u,span等；

行內塊元素：img,input,td

復合選擇器

交集選擇器

并集選擇器

后代選擇器

子元素選擇器

屬性選擇器

偽元素選擇器（CSS3）??

CSS書寫規范

空格規范

選擇器規范

屬性規范

三大特性

層疊性

繼承性

優先性

CSS3定位機制

盒子模型（Box Model）

盒子邊框(Border)

內邊距(padding)

外邊距（margin）

浮動(float)

定位

元素的顯示與隱藏

CSS高級技巧

CSS用戶界面樣式

版心和布局流程

清除浮動

2D變形（CSS3）transform

3D變形(CSS3) transform

動畫 animation

伸縮布局（CSS3）

---

基本概念

CSS(Cascading Style Sheets)層疊樣式表/CSS樣式表/級聯樣式表，用于設置HTML頁面中的文本內容，圖片的外形以及版面的布局等外觀樣式；

語法：選擇器 {屬性：值；屬性：值；}

樣式屬性

字體樣式屬性font

font-size

字號大小

相對長度單位	說明
em	相對于當前對象內文本的字體尺寸
px	像素
絕對單位	?
in	英寸
cm	厘米?
mm	毫米
pt	點

font-family

字體，最常用宋體，黑體，微軟雅黑

網頁中普遍使用14px；盡量使用偶數數字字號；

各種字體之間用英文狀態下的逗號隔開；【多種字體備用】

中文字體需要加引號，英文字體一般不需要加引號；

中文和英文同時存在時，中文字體盡量往后放；

包含空格，&，#等字體需要加引號；

Unicode字體 ：例如某些系統不支持微軟雅黑的字體，可以一使用中文代替，二用Unicode代碼來避免；

font-weight

字體加粗

normal:400

bold:700

font-style

normal/italic

綜合設定：選擇器? { font? :? font-style? ?font-weight? ?font-size/line-height? ?font-family }? 【順序不可變；font-size和font-faminly不可省略，其他可省略，取默認值】

外觀屬性

color

文本顏色，一般網頁字體顏色是#3c3c3c

顏色形式：red，blue等；

十六進制：#FF6600,#FF0000等，1-9和A-F組成十六進制；【常用，提倡使用簡寫形式，例如#00FF00簡寫為#0F0】

RGB代碼：rgb(255,0,0);

line-height

行間距（單位：px，em還有%）

【一般情況下，行距比字號大7-8像素】? *小技巧：在一行的盒子內，設定行高等于盒子的高度，就可以使文字垂直居中；

text-aligh

文字水平對齊：left/right/center

text-indent

首行縮進（使用em做單位，1em是一個漢字的寬度）

letter-spacing

字間距

word-spacing

單詞間距（針對于英文，中文無效）

顏色半透明(CSS3)

rgba(r,g,b,a) a是alpha 透明的意思，a的取值范圍0-1

文字陰影(CSS3)

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色；【前兩個參數必寫】

CSS背景background

background-color

背景顏色

background-image

背景圖片? url();

background-repeat

是否平鋪? repeat-x repeat-y repeat no-repeat

background-position

背景位置,默認是左上角

• length：具體的坐標值

• position：top、center、bottom / left、center、right（順序無所謂，誰在前，誰在后都行；只寫一個值，另外一個默認居中）

background-attachment

背景附著? scroll | fixed（默認是scroll）

背景簡寫：background：背景顏色?背景圖片?背景平鋪?背景附著?背景位置

背景透明 (CSS3)

background：rgba(0,0,0,0.3);

背景縮放 (CSS3)

background-size:寬 高；

• 寬高可以設置長度單位(px)或者百分比（將圖片放大或者縮小至原來的百分之多少）；提倡指定寬高其中一個值，防止失真

• cover:等比例縮放，寬高都滿足的縮放，溢出部分會被隱藏

• contain:等比例縮放比例，寬高其中一個和盒子一樣大就不再縮放了，保證圖片完整顯示在背景區域，但是背景會有部分裸露

• 多背景圖片：一個元素是可以設置多背景圖片的，屬性間用逗號隔開，當存在重疊關系時，前面的圖片會覆蓋后面的圖片，為避免背景色把圖片蓋上，背景色通常都定義在最后一組上。

• 一般來說，背景圖片適合做一些小圖標使用；產品展示之類的就用插入圖片。

text-decoration

文本裝飾，通常用于給鏈接修改裝修效果? none | underline | overline | line-through

選擇器

根據特定規則選擇一部分標簽的樣式規則

標簽選擇器：?標簽名 {值對}

類選擇器：.類名 {值對}

多類名選擇器

ID選擇器：#ID值 {值對}

通配符選擇器：* {值對}

偽類選擇器： ：{值對}

鏈接偽類選擇器? ?

【lvha，順序不可顛倒】

• :link? :未訪問的鏈接

• :visited? ：已訪問的鏈接，點擊過一次

• :hover? ：鼠標移動到鏈接上

• :active? ：選定的鏈接，點擊別松開

結構偽類選擇器【存在兼容問題】

• :first-child:第一個孩子

• :last-child:最后一個孩子

• :nth-child(n):從第一個孩子開始數，選擇第n個孩子? ?（even:偶數? odd:奇數?n從0開始 2n是偶數 2n+1奇數）

• :nth-last-child(n):從最后一個孩子開始數

目標偽類選擇器

• :target:當前活動目標元素

樣式表

內部樣式表

一般放head中間

行內樣式表

屬性部分?style=“屬性值對;”

外部樣式表

外鏈式? <link rel="stylesheet" href="" />

標簽的顯示模式Display

HTML標簽一般分為塊標簽和行內標簽兩種類型，它們也稱塊元素和行內元素；

塊元素：h,div,p,ul,ol,li等;

• 默認通欄

• p,h,dt都屬于文字類塊級元素，它里不能放塊級元素

行內元素：a,strong,b,em,i,del,s,ins,u,span等；

• 寬高設置無效；

• 行內元素里面只能放文本和行內元素，不能放塊級元素；（特殊a）

• 鏈接里面不能再次放a；

行內塊元素：img,input,td

• 可以設置寬高

• 類型轉換：

  • 塊標簽模式轉行內模式：display：inline；

  • 行內模式轉塊標簽模式：display：block；

  • 塊、行內模式轉化為行內塊模式：display:inline-block;

復合選擇器

交集選擇器

即..又..，語法：標簽選擇器類選擇器 {值對}（緊跟）

并集選擇器

如果選擇器里面內容完全一樣或者部分一樣，語法：選擇器，選擇器，選擇器{值對}（逗號隔開）

后代選擇器

語法：父 子孫{值對}（空格隔開）

子元素選擇器

語法：父>子{值對}（>隔開）

屬性選擇器

選取某些帶有特殊屬性標簽的選擇器，語法：

[屬性] {值對}	含某屬性
[屬性=值]{值對}	某屬性值等于某值
[屬性*=值]{值對}	某屬性值含有某值
[屬性^=值]{值對}	某屬性值開頭含有某值
[屬性$=值]{值對}	某屬性值結尾含有某值

偽元素選擇器（CSS3）??

• ::first-letter:文本的第一個單詞或字
• ::first-line:文本的第一行
• ::selection:選中文字時候改變的樣式
• ::before/::after:在盒子div的內部前面或者后面插入值， 語法： ::brfore{content:"值";}? 本質上是添加了一個元素（標簽、盒子）只不過是行內元素

CSS書寫規范

空格規范

• 選擇器與{}之間必須包含空格

• 屬性名與：之間不可有空格，：與屬性值之間必須有一個空格

選擇器規范

包含多個選擇器時，每個選擇器聲明必須獨占一行

• 選擇器的嵌套層級應不大于3級，位置靠后的限定條件盡可能精確

屬性規范

• 屬性單獨占一行

• 屬性必須分號結尾

三大特性

層疊性

多種CSS樣式疊加時候，相同權重選擇器下一個新的屬性會把上面寫的屬性給覆蓋掉

繼承性

子標簽會繼承父標簽的某些樣式【繼承的樣式：text-,font-,line-這些元素開頭的都可以繼承，以及color屬性】

優先性

我們用一個四位數的字符串來表示，值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越；

繼承或者*	0,0,0,0
每個元素	0,0,0,1
每個類	0,0,1,0
每個ID	0,1,0,0
每個行內樣式	1,0,0,0
每個!important	∞無窮大

• 權重疊加：權重相同時候，采取就近原則

ul?li{? /*權重： ul 0,0,0,1 li 0,0,0,1?總權重：0,0,0,2*/

}

li{ /*權重：0,0,0,1*/

}

*{

margin:0;

padding:0;

}

*行內元素只有左右外邊距，是沒有上下外邊距的。內邊距，在ie6等低版本瀏覽器也會有問題。

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。以值大的為準

父子關系，父元素上外邊距和子元素上外邊距發生合并，即使父元素的上邊距為0，也會發生合并，外邊距合并解決的兩個方法：1.給個border?或者padding;2.添加overflow：hidden；

CSS3定位機制

盒子模型（Box Model）

--普通流（標準流/文檔流）

盒子邊框(Border)

• border:border-width|border-style|border-color?

  • ? (上：border-top-（width/color/style）? ?下：border-bottom-（width/color/style）)

  • 簡寫：border/border-top/border-bottom:1px solid red;

  • 表格邊框：border-collapse:collapse;

  • 圓角邊框（CSS3）：radius半徑（距離）語法：border-redius：上下左右?

    • ?*取寬度和高度的一半（寫精確數或者50%），就會變成一個圓形；

    • border-radius:左上角右下角?右上角左下角

    • border-radius:左上角?右上角左下角?右下角

    • border-radius:左上角?右上角?右下角?左下角

內邊距(padding)

• 上：padding-top? 下：padding-bottom?左：padding-left?右：padding-right

• 簡寫：

  • padding:?上下左右；

  • padding:上下?左右；

  • padding:上?左右?下；

  • padding:上?右?下?左

外邊距（margin）

• 簡寫：類似上面padding

• 實現盒子居中對齊*

• 必須是塊級元素

• 盒子必須指定了寬度，左右設置為auto

• 清除內外邊距

• 外邊距合并
• 盒子的計算尺寸

• 空間尺寸：width+border+padding+margin;

• 內盒尺寸：width+border+padding;（元素實際大小）

• *如果一個盒子沒有給定高度/寬度或者繼承父親的寬度/高度，則padding不會影響盒子大小；

  • 盒子模型布局穩定性：width>padding>margin

    • 寬度剩余法

  • CSS3盒模型

    • box-sizing:content-box;? ? 盒子大小為width+border+padding

    • box-sizing:border-box;? ? ? padding和border都不會撐開盒子了，盒子大小為width

  • 盒子陰影：語法：box-shadow：水平位置?垂直位置?模糊距離?陰影尺寸?陰影顏色?內/外陰影（內陰影用inset，外陰影用默認，不可使用outset）前兩個必須寫，其他可省略

浮動(float)

left,right,none（none）浮動脫離標準流，不占位置，會影響標準流，浮動只有左右浮動

• 浮動首先要創建包含塊的概念，也就是說，浮動的元素總是找離他最近的父級元素對齊，但不會超過內邊距的范圍；

• 浮動元素的排列位置與其上一元素有關系，

  • 如果上一元素浮動，此元素不浮動，則此元素與上一元素重疊；

  • 如果上一元素不浮動，此元素浮動，則上一元素為標準流占一行，此元素的頂部與上一元素底部對齊；

  • 如果兩者都浮動，則其頂部與上一元素的頂部對齊；

• 浮動影響盒子的顯示模式：元素加上浮動后，會具有行內塊特性

定位

• 元素的定位屬性

  • 邊偏移：top、bottom、left、right

  • 定位模式(定位的分類)position:?

    • static:靜態定位，默認，對于邊偏移無效；一般用來清除定位的，一個原來有定位的盒子，不想加定位了，用此；

    • relative：相對定位，可以通過偏移量來移動位置，但是原來所占的位置，繼續保留；移動的位置，是以自己的左上角為基點移動?

    • absolute：決對定位，是完全脫標的，不占有位置；

      • 父親無定位，則以瀏覽器為基準

      • 父親有定位，則以最近的父親為基準（父親為固定，相對，絕對）

      • 子絕父相

      • 加了絕對定位的盒子，margin左右auto進行居中失效

      • 絕對定位盒子水平/垂直居中

      • 首先left設為50%，先走父盒子的一半

      • 然后走自己外邊距負的一半值就行了margin-left

    • fixed：固定定位，以瀏覽器窗口作為參照物來定義網頁元素，完全脫標，不占有位置

  • 疊放次序：z-index；數字越大越居上，取值相同，后來居上，只有相對定位，絕對定位，固定定位有此屬性，其余標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性；

  • 元素添加了絕對定位和固定定位之后，元素模式也會發生轉換，都轉換為行內塊模式，因此添加了絕對定位或者固定定位或者浮動后，可以不用轉換模式，直接給高度和寬度就可以了。

元素的顯示與隱藏

• display:none;隱藏元素，不保留位置? ?display：block；顯示元素

• visibility：hidden;隱藏元素，保留位置? visibility:visible；顯示元素

• overflow：是否溢出

  • visible：默認

  • auto：自動，超出部分會顯示滾動條，不超出不顯示

  • scroll：一直顯示滾動條

  • hidden：溢出隱藏

CSS高級技巧

CSS用戶界面樣式

• 鼠標樣式cursor：default?小白 | pointer?小手 | move?移動 |?text?文本

• 輪廓線outline：賦值類似border，一般都是去掉的，outline：0/none；

• 防止拖拽文本域resize：none；

• vertical-align：不影響塊級元素的內容對齊，只針對行內元素或者行內塊元素的對齊，通常用來控制圖片/表單與文字的對齊；圖片和文字默認的是基線對齊

?

• 去除圖片底側空白縫隙：圖片或者表單等行內塊元素，底線會和父級盒子的基線對齊，解決方法：將行內塊元素轉化為塊級元素；或者將?vertical-align改為top或者middle；

• 自動換行word-break：break-all（允許單詞內換行）|?keep-all（不允許拆開單詞顯示，半角空格和連字符特殊an-dy）【針對英文】

• white-space：normal（正常）|nowrap（強制一行顯示），直到文本結束或者br標簽才會換行

• 文字溢出text-overflow:clip（不顯示省略標記，簡單的裁剪）|ellipsis（文本溢出時，顯示省略標記）【一定要強制一行內顯示，再和overflow屬性搭配】

• 精靈技術sprite：為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）；

  • 本質：簡單地說，CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的零星背景圖像都集中到一張大圖上去，將大圖應用于網頁，當用戶訪問該頁面時，只需向服務器發送一次請求，圖像即可全部展示出來，下次取緩存即可。由多個很小的背景圖像合成的大圖被稱為精靈圖。

  • 使用：通過設置CSS的background-image、background-repeat和background-position屬性來進行背景定位，最關鍵的是通過background-position屬性精確地定位；

• 字體圖標iconfont：

  • 優點：本質是文字，可以隨意的改變顏色、產生陰影、透明效果等，也可以做跟圖片一樣的事情，改變透明度，旋轉等；體積小，信息并沒有削減；幾乎所有瀏覽器都支持，移動端設備必備良藥...

  • 流程：

  • UL設計字體圖標效果圖（svg）；

  • 前端人員上傳生成兼容性字體文件包；【推薦網址：(國外)http://icomoon.io,(國內)http://www.iconfont.cn】

  • 前端人員下載兼容性字體文件包到本地；

  • 把字體文件包引入到HTML頁面中；

  • 聲明字體；

  • 給盒子使用字體；

  • 盒子里面添加結構；

  • 替換新圖標：導入selection.json,追加重新下載；

• 滑動門：使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。最常見于各種導航欄的滑動門；

  • 核心技術：精靈技術+padding撐開寬度

  • a>span

• 過渡（CSS3）:使用transition來實現補間動畫，實現平滑的過渡，一般搭配hover使用；

  • 語法：transition：要過渡的屬性?花費時間?運動曲線?何時開始；(寫到元素樣式內，不要寫到hover內)；誰做動畫，誰加過渡

  • transition-property：要過渡的屬性 （多屬性用逗號隔開：例如：transition:width 0.6s ease 0s , height 1s ease-in 1s;） （所有屬性都變化，使用all就可以了）

  • transition-duration：花費時間，單位是s

  • transition-timing-function：運動曲線，默認值是ease

  • transition-delay：何時開始

版心和布局流程

• 版心是指網頁中主題內容所在的區域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px，980px，1000px，1200px等。

• 布局流程

• 確定版心；

• 分析頁面中的行模塊，以及每個行模塊中的列模塊；

• 制作HTML結構；

• CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。

• 一列固定寬度且居中

• 兩列左窄右寬型

• 通欄平均分布型

清除浮動

• 清除浮動的本質：清除浮動造成的影響；為了解決子級浮動造成的父級元素內部高度為0的問題；

• 很多情況下父級盒子不方便給高度，考慮孩子高度會變

• 語法：選擇器{clear:屬性;}? 屬性：left/right/both

• 額外標簽法：在浮動盒子后面添加一個空盒子：<div? style="clear:both"></div>（不推薦）

• 父級添加overflow屬性，通過觸發BFC的方式清除浮動效果，屬性值：hidden|auto|scroll

• after偽元素清除浮動：

• .clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}(兼容性)

• ie6.7需要另外添加.clearfix{ *zoom:1;? /*? ?*代表ie6.7能識別的特殊符號? ，zoom是ie6.7清除浮動的方法? */}

• 使用before和after雙偽元素清除浮動

• .clearfix:before,.clearfix:after{content:"";display:table;/*觸發bfc?防止外邊距合并*/}

• .clearfix:after{clear:both;}

• .clearfix{*zoom:1;}

2D變形（CSS3）transform

• transform可以實現元素的位移、旋轉、傾斜、縮放，甚至支持矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現的效果。

• 功能：

  • 移動translate(x,y)：xy取值是以px為單位

    • transform：translate(x,y);? //xy同時移動

    • transform：translate(x); //x移動

    • transform：translate(0，y); //y移動

    • transform：translateX(x); //x移動

    • transform：translateY(y); //y移動

    • transform：translate(50%); //走盒子自身寬度的50%? %不以父級寬度為準，以自身寬度為準

    • 升級版定位的盒子居中對齊

      • position：absolute；

      • left:50%

      • transform:translate(-50%);

  • 縮放scale(x,y)： xy取值為倍數之意

    • scale(x,y);? //x，y默認取值為1，取值在0.01-0.99之間是縮小的倍數，在大于等于1.01是放大的倍數

    • scale(x); //寬高等比例縮放

    • scaleX(x);

    • scaleY(y);

  • 旋轉rotate(deg):正值是順時針，負值是逆時針；

    • rotateX(deg);? //繞著X軸旋轉

    • rotateY(deg);? //繞著Y軸旋轉

    • rotateZ(deg);? //繞著Z軸旋轉

    • transform-origin：可以調整元素轉換變形的原點；

  • 傾斜skew(deg,deg)

3D變形(CSS3) transform

• 透視perspective：視距表示視點距離屏幕的長短，透視使得圖像更具有立體感；透視原理是近大遠小；寫到父級里面；視距越大效果越不明顯，視距越小，效果越明顯

• 透視是眼鏡到屏幕的距離，translateZ是物體到屏幕的距離；Z軸是來控制物體近大遠小的具體情況；translateZ越大，我們看到的物體越近，物體越大；

• transform:translate3d(x,y,z);? ?//x和y可以是px，也可以是%；z只能是px；

• backface-visibility：定義當元素不面向屏幕時是否可見；

• 如果有多組變形，都屬于transform，那用空格隔開就好了；

動畫 animation

• 引用動畫語法：animation：動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向；

• 定義動畫語法：

  • @keyframes 動畫名稱 {from {} to {}}?

  • @keyframes 動畫名稱 {0%{} 50% {} 100%{}}? ?//百分比

  • infinite:無限循環

伸縮布局（CSS3）

• 伸縮布局模式：display:fix;? 在盒子里按照給予的fix:1；按照份數比例分配

• min-width：最小寬度值

• max-width：最大寬度值

• flex-direction：row/column;調整主軸方向。加在父級盒子里

• justify-content：調整主軸對齊；

• align-items:調整側軸對齊（垂直對齊）；（單行）

• flex-wrap：控制是否換行；

• align-content；（多行）（必須對父級使用display:flex;和flex-flow:row wrap;不用不起效果）

• flex-flow：是flex-direction、flex-wrap的簡寫形式；

• order：用css來控制盒子的前后順序；數值小的排在前面，可以為負值，默認值為0；

總結

以上是生活随笔為你收集整理的CSS基础知识点大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。