CSS核心內容 標準流 盒子模型 浮動 定位

2021-07-16 21:10:12 字數 1721 閱讀 7365

css核心內容-標準流、盒子模型、浮動、定位,了解了核心內容才能用css設計出乙個簡單的頁面

一、基礎

在了解核心內容之前需要先了解html中的兩種標籤:塊級元素,行內元素;

塊級元素:乙個塊級元素佔滿一行

行內元素:在一行中行內元素依次填充

在css中可以將行內元素轉換為塊級元素,通過的是display屬性來實現的

有了以上的基礎後再看核心內容

二、核心

1.標準流

標準流就是在css中預設的塊級元素和行內元素的排列方法

標準流是預設的排列方法,那麼我們也可通過**來改變它的預設值(即float浮動)

2.盒子模型

基本元素:外邊距,內邊距,邊框,內容四部分

要注意的是:盒子模型針對的是塊級元素,某些樣式對行內元素無用

[css]

view plain

copy

#conten

t  

以上是對盒子模型的一些屬性的設定

3.浮動

對於設定了浮動的框,那麼它就不再屬於標準流,所以它的排列方式也會有所不同

通過對文字框的設定浮動,可以排版框的位置,通過設定框向左或向右浮動的位置,直到碰到包含框

或另乙個浮動框的邊緣為止

[css]

view plain

copy

#style

{  float

:right

;  }  

以上就是設定框樣式的向右浮動

取消浮動可以用clear來實現

[css]

view plain

copy

#style

{  float:clear;  

}  

4.定位

主要分為兩種:絕對定位和相對定位

相對定位脫離了標準流,以他所在標籤的第乙個標準流父標籤為基準

[css]

view plain

copy

#style

還有一種定位方式是固定定位,是相對於其他某一元素來進行定位,應該算是相對定位的一種,都是

其相對位置的改變

三、小結

以上就是對css核心內容的整體的了解,而且這些內容是學習css的基礎,通過基礎的學習,在以後的學

習過程中,遇到問題解決問題,從而獲得更大的提高。

學習不是一蹴而就的事情,有了理論的學習,還要進行一些實踐,就比如上邊寫的內容,說起來大家都懂

但是真正做起來就會體現出差距來,所以還是要多動手實踐。。

初學牛腩CSS核心內容標準流,盒子模型,浮動,定位

最近剛剛學習牛腩,因為考試很多,效率有點低,所以學的有些慢,但是 說過多總結是好的,所以我覺得雖然看起來很小的東西,本著對自己負責的態度,還是寫出來吧,給腦子騰個地方。在講css核心內容時候,它提前講了什麼是核心內容,包括以下幾個方面 標準流,盒子模型,浮動,定位。標準流 又稱標準文件流,就是標籤的...

CSS核心內容之浮動

1.向指定的方向浮動,並且讓出空間 2.如果後面的元素也是浮動的,那麼後面的元素就會在碰到前面的浮動的元素或者邊框時,就定位在那裡 3.如果後面的元素沒有浮動,則該元素就會在浮動的元素的下面 4.行內元素和塊元素都可以浮動,行內元素浮動後會變成塊元素 5.浮動的元素不占用空間 div1 div2 d...

CSS核心內容之浮動

1.向指定的方向浮動,並且讓出空間 2.如果後面的元素也是浮動的,那麼後面的元素就會在碰到前面的浮動的元素或者邊框時,就定位在那裡 3.如果後面的元素沒有浮動,則該元素就會在浮動的元素的下面 4.行內元素和塊元素都可以浮動,行內元素浮動後會變成塊元素 5.浮動的元素不占用空間 div1 div2 d...