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...