僅僅是自己對著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 元素常常被稱為塊級元素。這意味著這些元素顯示為一...