DIV CSS學習筆記

想學好前端的可以來我們晚上的課堂聽課，每天晚上都會講一個小案例或小項目或分析前端面試以及工作和發展，更多的是談一些學習路線和方法，零基礎和原生JavaScript都有，可以加裙六二三九六六八零六（這些都是免費的，每天都有）給你課堂地址和往期錄製好的視頻

第二部分 CSS

第八章 css基礎知識

css

基礎知識：

css

樣式表的定義

css

：（Cascading Style Sheets）層疊樣式表；

分類及位置：內部樣式

-head

區域

style

標籤裡面

外部樣式-

link

調用

內聯樣式-標籤元素裡面

css

內的注釋：/

*

注釋內容

*

/

css

樣式表的語法

用顏色名表示

aqua

,

black

,

blue

,

fuchsia

,

gray

,

green

,

lime

,

maroon

,

navy

,

olive

,

orange,

purple

,

red

,

silver

,

teal

,

white

, and

yellow

有17個預先確定的顏色，它們是

CSS

規則由兩個主要的部分構成：要添加樣式的盒子名或者標籤名、和要添加的樣式。

盒子名或者標籤名

CSS中幾種顏色的表示方法

- **用十六進位的顏色值表示(紅、綠、藍)**

- `#FF0000`或者`#F00 ` - **用rgb(r,g,b)函數表示**

- 如：`rgb(255,255,0)`- **用hsl(Hue,Saturation,Lightness)函數表示（色調、飽和度、亮度)**

- 如：`hsl(120,100%,100%)`,色調0代表紅色，`120`代表綠色，`240`代表

藍色

- **用`rgba(r,g,b,a)`函數表示 **

- 其中`a`表示的是改顏色的透明度，取值範圍是`0~1`，其中`0`代表完全透明- **用hsla(Hue,Saturation,Lightness,alpha)函數表示**

- 色調、飽和度、亮度、透明度

例子

background-color:gray

background-color:#F00

background-color:#ffff00

background-color:rgb(255,0,255)

background-color:hsl(120,80%,50%)

background-color:rgba(255,0,255,0.5)

background-color:hsla(120,80%,50%,0.5)

內部樣式表

當單個頁面需要設置樣式時，就應該使用內部樣式表。

使用

標籤在文檔

裡面定義內部樣式表

從外部引入到樣式分為兩種：（注意寫在

head

標籤裡面）

當樣式需要應用於很多頁面時，就需要用到外部樣式表，首先需要創建一個

css

文件，然後引用到我們的頁面中。

Link

樣式表式：

Html

式：

內聯樣式表（優先順序高）

寫在標籤裡面的樣式

如：

表示給

p

標籤裡面的文字顏色設置為紅色

區別：外鏈樣式與導入樣式

link

標籤是屬於

xhtml

範疇，而

@import

則是

css2.1

中特有的。

link

標籤除了可以載入

CSS

外，還可以做很多其它的事情，比如定義

RSS

，定義

rel

連接屬性等，

@import

就只能載入

CSS

了。

載入的順序的區別，

link

載入的

css

時，是一種並行(沒有嘗試是否是這樣)載入

CSS

方式，而

@impor

則在整個頁面載入完成後才載入。

兼容性的區別，因

@import

`CSS2.1

才特有的，所以對於不兼容

CSS2.1`的瀏覽器來說，無效。

在樣式控制上(比如動態改變網頁的布局時,使用

javascript

操作

DOM

)的區別，此時

@import

就無能為力了。

樣式的優先順序補充

內聯樣式表（標籤內部）

嵌入樣式表（當前文件中）

外部樣式表（外部文件中）

相同權值情況下，

CSS

樣式的優先順序總結來說，就是——就近原則（離被設置元素越近優先順序別越高）：

權值不同時，瀏覽器是根據權值來判斷使用哪種

css

樣式的，哪種樣式權值高就使用哪種樣式

層疊優先順序是:

瀏覽器預設

外部樣式表

內部樣式表

內聯樣式

其中樣式表又有:

類選擇器

類派生選擇器

ID選擇器

ID派生選擇器

派生選擇器以前叫上下文選擇器，所以完整的層疊優先順序是:

瀏覽器預設

外部樣式表

外部樣式表類選擇器

外部樣式表類派生選擇器

外部樣式表ID選擇器

外部樣式表ID派生選擇器

內部樣式表

內部樣式表類選擇器

內部樣式表類派生選擇器

內部樣式表ID選擇器

內部樣式表ID派生選擇器

內聯樣式

...共

12

個優先順序

另外，如果同一個元素在沒有其他樣式的作用影響下，其

Class

定義了多個並以空格分開，其優先順序順序為：

一個元素同時應用多個

class

，後定義的優先（即近者優先），加上

!important

者最優先！

第九章 css選擇器(上)

css

選擇器：

class

類選擇器可以重複利用

id

選擇器唯一

標籤選擇器

什麼是選擇器：css選擇器就是要改變樣式的對象

選擇器

標籤選擇器：頁面中所有的標籤都是一個選擇器

p

ID

選擇器

選擇

id

命名的元素 以

#

開頭

#p1

類選擇器

class

選擇器，選擇

clas

命名的元素 以

.

開頭

.first

css

代碼寫完後上線前要經過壓縮處理

本地和伺服器分兩個

css

版本（備份）

壓縮後注釋都清除，空間體積減少

群組選擇器

選擇多個元素,以逗號隔開

#main,.first,span,a,h1

包含選擇器

span

選擇某元素的後代元素，也稱後代選擇器，父類與子類間以空格隔開

p

屬性選擇器

選擇包含某一屬性的元素

a[title]

選擇包含

title

的

a

標籤

a[title][href]

選擇包含

title

和

href

的

a

標籤

+

選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當於包含元素）

相鄰兄弟選擇器：只選擇後面的相鄰兄弟元素

p + span

第十章 css選擇器(下)

偽類選擇器

偽類選擇器的排序很重要，

a:link

a:visited

a:hover

a:active

，記作

lvha

a:link

/ 未訪問的鏈接 / （只用於a標籤）

a:visited

/ 已訪問的鏈接 / （只用於a標籤）

a:hover

/* 滑鼠移動到鏈接上

*/

（可和其他標籤結合一起用）

a:active

/ 選定的鏈接 /

注意

輸入偽類選擇器（針對錶單）

input:focus

/ 鍵盤輸入焦點 /

其他偽類選擇器

p:first-child

/

* 第一個p *

/

:before

在元素之前添加內容。

:after

在元素之後添加內容。

css

優先規則

內聯樣式表->

ID

選擇器—>

Class

類選擇器->標籤選擇器

第十一章 背景屬性

背景屬性：

背景圖片是否隨著內容的滾動而滾動由

background-attachment

設置

background-attachment:fixed;

固定，不隨內容的滾動而滾動

background-attachment:scroll;

滾動，隨內容的滾動而滾動

background-size:x% y%;

背景圖片的大小可以通過屬性

background-size

來設置

的取值可為數值和百分值。

background-position:x% y%;

背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性

background-position

來實現

的取值可為英文單詞或者數值和百分值。

background-positon

的英文單詞取值

top left

top center

top right

center left

center center

center right

bottom left

bottom center

ottom right

不平鋪：

background-repeat:no-repeat;

水平方向平鋪：

background-repeat:repeat-x;

垂直方向平鋪：

background-repeat:repeat-y;

完全平鋪：默認為完全平鋪

background:url(「images/1.jpg」);

backgronnd-image:url(「images/1.jpg」);

background:red;

backgronnd-color:red;

背景的添加 ：

背景顏色的添加:

背景圖片的添加：

背景的平鋪

什麼是平鋪？平鋪就是圖片是否重複出現

背景圖片的定位

background-positon

的數值取值

positon

的百分值取值

背景圖片的大小

background-size

的數值取值

的數值取值

背景圖片的滾動

第十二章 文字文本屬性

css

文字文本屬性：

text-align:center;

文本對齊(

right

/

left

/

center

)

line-height:10px;

行間距(可通過它實現文本的垂直居中)

text-indent:20px;

首行縮進

text-decoration:none;

letter-spacing

: 字間距

文本線(

none

/

underline

/

overline

/

line-through

)

color:red;

文字顏色

font-size:12px

; 文字大小

font-weight:「bold」

文字粗細(

bold/normal

)

font-family:「宋體」

文字字體

font-variant:small-caps

小寫字母以大寫字母顯示

文字屬性

文本屬性

第十三章 盒子模型

盒子模型

盒子模型就是一個有高度和寬度的矩形區域

所有

html

標籤都是盒子模型

div

標籤自定義盒子模型

所有的標籤都是盒子模型

class

和

id

的主要差別是：

class

用於元素組（類似的元素，或者可以理解為某一類元素），而

id

用於標識單獨的唯一的元素。

盒子模型的組成

自身內容：

width

、h

eight

寬高

內邊距：

padding

盒子邊框：

border

邊框線

與其他盒子距離：

margin

外邊距

內容+內邊距+邊框+外邊距=面積

盒子模型組成部分：

border

邊框

常見寫法

border:1px solid #f00;

單獨屬性：

dotted

點狀虛線

dashed

（虛線）

solid

（實線）

double

（雙實線）

border-width

:

border-style:

border-color

(顏色)

padding

內邊距

padding:10px;

上下左右

padding:10px 10px;

上下 左右

padding:10px 10px 10px;

上 左右 下

padding:10px 10px 10px 10px;

上 右 下 左（設置4個點-->順時針方向）

值：

像素

/

厘米

等長度單位、百分比

單獨屬性：

- `padding-top:`- `padding-right:`- `padding-bottom:`- ` padding-left:`

當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據

width

和

height

減小

margin 外邊距

值：與

padding

相同

單獨屬性：與

padding

相同

外邊距合併：兩個盒子同時設置了外邊距，會進行一個外邊距合併

補充盒子模型內容

標準盒子模型

盒子模型是

css

中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是

ie

盒子模型和標準

w3c

盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型

從上圖可以看到標準

w3c

盒子模型的範圍包括

margin

、

border

、

padding

、

content

，並且

部分不包含其他部分

IE盒子模型

從上圖可以看到

ie

盒子模型的範圍也包括

margin

、

border

、

padding

、

content

和標準

w3c

盒子模型不同的是：

ie

盒子模型的

content

部分包含了

border

和

padding

IE

盒子模型

width

=

padding

+

border

+

內容

標準盒子模型 = 內容的寬度（不包含

border

+

padding

）

例：

一個盒子的

margin

為 20px，

border

為 1px，

padding

為 10px，

content

的寬為 200px、高為 50px，假如用標準

w3c

盒子模型解釋，那麼這個盒子需要佔據的位置為：寬

20*2+1*2+10*2+200=262px

、高

20*2+1*2*10*2+50=112px

，盒子的實際大小為：寬

1*2+10*2+200=222px

、高

1*2+10*2+50=72px

；假如用ie 盒子模型，那麼這個盒子需要佔據的位置為：寬

20*2+200=240px

、高

20*2+50=70px

，盒子的實際大小為：寬

200px

、高

50px

那應該選擇哪中盒子模型呢？當然是「標準

w3c

盒子模型」了。怎麼樣才算是選擇了「標準

w3c

盒子模型」呢？很簡單，就是在網頁的頂部加上

doctype

聲明。

假如不加

doctype

聲明，那麼各個瀏覽器會根據自己的行為去理解網頁，即

ie

瀏覽器會採用

ie

盒子模型去解釋你的盒子，而

ff

會採用標準

w3c

盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。

反之，假如加上了

doctype

聲明，那麼所有瀏覽器都會採用標準

w3c

盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

用

jquery

做的例子來證實一下

你用的盒子模型是？

上面的代碼沒有加上

doctype

聲明，在

ie

瀏覽器中顯示

ie

盒子模型，在 ff 瀏覽器中顯示「標準

w3c

盒子模型」。

" style="color: rgb(0, 136, 204);">網頁鏈接你用的盒子模型是標準w3c盒子模型

代碼2 與代碼1 唯一的不同的就是頂部加了

doctype

聲明。在所有瀏覽器中都顯示「標準

w3c

盒子模型」

所以為了讓網頁能兼容各個瀏覽器，讓我們用標準

w3c

盒子模型

擴展

學會使用box-sizing布局

第十四章 塊元素、行元素與溢出

基本概念

塊級元素：默認情況下獨佔一行的元素，可控制寬高、上下邊距；

行內元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距

行塊轉換

display:none

; 不顯示

display:block

; 變成塊級元素

display:inline

; 變成行級元素

display:inline-block

; 以塊級元素樣式展示，以行級元素樣式排列

溢出

overflow:hidden

; 溢出隱藏

overflow:scroll

; 內容會被修剪，瀏覽器會顯示滾動條

overflow:auto

; 如果內容被修剪，則產生滾動條

文本不換行：

white-space:nowrap

;

長單詞換行：

word-wrap:break-word

;

行內元素和快級元素小結

區別一：

區別二：

區別三：

塊級：塊級元素會獨佔一行，默認情況下寬度自動填滿其父元素寬度

行內：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。

塊級：塊級元素可以設置寬高

行內：行內元素不可以設置寬高

塊級：塊級元素可以設置

margin

，

padding

行內：行內元素水平方向的

margin-left;

margin-right;

padding-left;

padding-right

;可以生效。但是豎直方向的

margin-bottom

;

margin-top

;

padding-top

;

padding-bottom

;卻不能生效。

區別四：

塊級：

display:block

;

行內：

display:inline

;

可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。

applet

-

java applet

button

- 按鈕

del

- 刪除文本

iframe

-

inline frame

ins

- 插入的文本

map

- 圖片區塊(

map

)

object

-

對象

script

- 客戶端腳本

a

– 錨點

abbr

– 縮寫

acronym

– 首字

b

– 粗體(不推薦)

bdo

–

bidi override

big

– 大字體

br

– 換行

cite

– 引用

code

– 計算機代碼(在引用源碼的時候需要)

dfn

– 定義欄位

em

– 強調

font

– 字體設定(不推薦)

i

– 斜體

img

– 圖片

input

– 輸入框

kbd

– 定義鍵盤文本

label

– 表格標籤

q

– 短引用

s

– 中劃線(不推薦)

samp

– 定義範例計算機代碼

select

– 項目選擇

small

– 小字體文本

span

– 常用內聯容器，定義文本內區塊

strike

– 中劃線

strong

– 粗體強調

sub

– 下標

sup

– 上標

textarea

– 多行文本輸入框

tt

– 電傳文本

u

– 下劃線

address

– 地址

blockquote

– 塊引用

center

– 舉中對齊塊

dir

– 目錄列表

div

– 常用塊級容易，也是

CSS layout

的主要標籤

dl

– 定義列表

fieldset

–

form

控制組

form

– 交互表單

h1

– 大標題

h2

– 副標題

h3

– 3級標題

h4

– 4級標題

h5

– 5級標題

h6

– 6級標題

hr

– 水平分隔線

isindex

–

input prompt

menu

– 菜單列表

noframes

–

frames

可選內容，（對於不支持frame的瀏覽器顯示此區塊內容

noscript

– 可選腳本內容（對於不支持

script

的瀏覽器顯示此內容）

ol

– 有序表單

p

– 段落

pre

– 格式化文本

table

– 表格

ul

– 無序列表

設置寬度

width

無效。 設置高度

height

無效，可以通過

line-height

來設置。 設置

margin

只有左右

有效，上下無效。

設置

padding

只有左右

有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。

、和其他元素都在一行上；

、高，行高及外邊距和內邊距不可改變；

、寬度就是它的文字或圖片的寬度，不可改變

、內聯元素只能容納文本或者其他內聯元素

、總是在新行上開始；

、高度，行高以及外邊距和內邊距都可控制；

、寬度預設是它的容器的100%，除非設定一個寬度。

、它可以容納內聯元素和其他塊元素

也叫內聯元素、內嵌元素等；行內元素一般都是基於語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 「a」。比如

SPAN

元素，

IFRAME

元素和元素樣式的

display : inline

的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。

每個塊級元素默認佔一行高度，一行內添加一個塊級元素後無法一般無法添加其他元素（

float

浮動後除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素；

塊級元素一般作為容器出現，用來組織結構，但並不全是如此。有些塊級元素，如只能包含塊級元素。

DIV

是最常用的塊級元素，元素樣式的

display:block

都是塊級元素。它們總是以一個塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右撐滿。

一、塊級元素：block element

二、行內元素：inline element

三、block（塊）元素的特點:

四、inline元素的特點

對行內元素，需要注意如下:

五、常見的塊狀元素

六、常見的內聯元素

七，可變元素

八、行內元素與塊級元素有什麼不同

替換元素有如下：（和

img

一樣的設置方法）

、

、

、

都是替換元素，這些元素都沒有實際的內容

可以通過修改

display

屬性來切換塊級元素和行內元素

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！