CSS定位學習筆記

2021-06-27 12:56:06 字數 1465 閱讀 3344

僅僅是自己對著w3cschool整理的一些 css 基礎知識點,敲一遍加深下印象也方便以後複習。

一切皆為框

與之相反,

span

和strong

等元素稱為行內元素,這意味著他們的內容顯示在行內,即「行內框」。

some text

some more text.

在這種情況下,這個框稱為無名塊框,因為它不與專門定義的元素相關聯。

塊級元素的文字行也會發生類似的情況。假設有乙個包含三行文字的段落。每行文字形成乙個無名框。無法直接對無名塊或行框應用樣式,因為沒有可以應用樣式的地方(行框和行內框是兩個概念)。但是,這有助於理解在螢幕上看到的所有東西都形成某種框。

但是,垂直內邊距、邊框和外邊距不影響行內框的高度。

由一行形成的水平框稱為行框,行框的高度總是足以容納它包含的所有行內框。不過,設定行高可以增加這個框的高度。

元素框正常生成,塊級元素生成乙個矩形框,作為文件流的一部分,行內元素則會建立乙個或多個行框,置於其父元素中。

元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。

元素框從文件流中完全刪除,並相對於其包含塊定位。包含塊可能是文件中的另乙個元素或者初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。

元素框的表現類似於

absolute

,不過其包含塊是視窗本身。 #

如果把三個框都向左浮動,那麼框

1向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前乙個浮動框。

如果浮動元素的高度不同,那麼當它們向下移動時可能被其它浮動元素「卡住」。

因此,建立浮動框可以使文字圍繞影象。

為了實現這種效果,在被清理的元素的上外邊距上新增足夠的空間,使元素的頂邊緣垂直下降到浮動框的下面:

css學習筆記20160126定位

文件流是html可顯示元素在排列時所占用的位置.css實現對元素定位 positioning 有四種不同的定位方式分別是static,relative,absolute,fixed.static是position屬性的預設屬性值,元素在正常的流之中,靜態定位元素不收四個方向的屬性影響.fixed相對...

CSS學習筆記 定位流

相對定位 絕對定位 固定定位 一 相對定位 relative 1.什麼是相對定位 相對自己以前的在標準流的位置移動 示例格式 position relative left 30px top 50px 2.注意點 2.1不會脫離標準流,會繼續在標準流中占用一定空間 2.2在設定樣式時,同一方向上 水平...

CSS學習筆記 CSS的定位問題

學習css 布局的時候,對 position 的認識一直不是很清晰,以致於面試的時候回答的不清楚,現在好好的梳理一下這個問題。css 有三種基本的定位機制 1.普通流 2.浮動 3.絕對定位 1.普通流 除非專門指定,否則所有框 div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一...