css排版之 標準文件流

2022-03-25 13:20:10 字數 683 閱讀 4733

標準流指的是在不使用其他的與排列和定位相關的特殊css規則時,各種元素的排列規則。html文件中的元素可以分為兩大類:行內元素和塊級元素。

1.行內元素不佔據單獨的空間,依附於塊級元素,行內元素沒有自己的區域。它同樣是dom樹中的乙個節點,在這一點上行內元素和塊級元素是沒有區別的。

2.塊級元素總是以塊的形式表現出來,並且跟同級的兄弟塊依次豎直排列,左右自動伸展,直到包含它的元素的邊界,在水平方向不能併排。

盒子在標準流中的定位原則

margin控制的是盒子與盒子之間的距離,padding存在於盒子的內部它不涉及與其他盒子之間的關係和相互影響問題,因此要精確控制盒子的位置,就必須對margin有更深入的了解。下面分四種情況對margin調整盒子的位置進行解說。

1.行內元素之間的水平margin

當兩個行內元素緊鄰時,它們之間的距離為第乙個元素的右margin加上第二元素的左margin。

2.塊級元素之間的豎直margin

兩個豎直排列的塊級元素,它們之間的垂直距離不是上邊的第乙個元素的下margin和第二個元素的上margin的總和,而是兩者中的較大者。這在實際製作網頁的時候要特別注意。

3.巢狀盒子之間的margin

這時子塊的margin以父塊的content為參考進行排列

4.margin設為負值

會使設為負數的塊向相反的方向移動,甚至會覆蓋在另外的塊上。

css 9 標準文件流

標籤可以以兩種方式分類 塊級元素 所有容器級標籤和p標籤都是塊級元素,eg div,h1 h6,p 預設具有換行符 獨佔一行 如果是非塊級元素,可以使用display block將其設定了塊級元素 行內元素 除了p標籤之外的行內級元素,eg a span lable 行內塊元素 eg img inp...

標準文件流

標準文件流其實是瀏覽器渲染頁面的乙個規則 所有的頁面元素,都要按照它在html文件 現的先後順序,依次在瀏覽器中,從左上角開始,從上到下,從左到右的順序依次顯示。標準文件流的性質 1.空白摺疊 2.高低不齊,底端對齊 標準文件流可以把頁面分成兩大類 1.塊級元素 2.行內元素 塊級元素 1.單獨的佔...

標準文件流

web頁面和ps等設計軟體有本質的區別,web 網頁的製作,是個 流 從上而下 像 織毛衣 而設計軟體 想往 畫東西,就去 畫 標準文件流下有以下微觀現象 多個空格會被合併成乙個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張之間有間隙,如果在一行內寫img標籤,就解決了這個問題,但是我們不會這...