學習前端的第三天

2021-10-10 10:26:37 字數 1664 閱讀 7046

定義:

內容從左到右,從上到下書寫的。前面的內容大小或者位置發生變化時,後面的內容位置也會隨之變化。

web頁面,就是乙個標準的文件流。內容跟咱們的書寫順序有關。

(1)空白摺疊現象

無論多少個空格,tab,換行都會摺疊為乙個空格。

張老師                    真好看

(2)高矮不同,底部對齊

一gia哦我裡gia哦
(3)一行寫滿,自動換行標準文件流將咱們的html元素分為了兩種:

區別:

行內元素:

塊級元素:

我們將html標籤分為兩大類:容器級標籤、文本級標籤

容器級標籤:能巢狀幾乎所有的其他標籤

常用的文本級標籤:span,p,a,b

常用的容器級標籤:div,h1-h6、li、dd dt td.

幾乎所有的容器級標籤都對應塊級元素。

幾乎所有的文字標籤都對應行內元素。p標籤除外,它是文本級標籤,都屬於塊級元素。

塊級元素轉行內元素

display

: inline;

一旦,轉為行內元素:

行內元素轉塊級元素

display

: block;

轉行內塊元素
display

: inline-block;

標準文件流限制比較多,導致頁面中很多布局無法實現。如果我們想要併排,又要設定寬高,就要脫離文件流

css中提供三種方法,可以脫離文件流。

浮動是css裡布局使用最多的屬性。

浮動之後,元素會脫離文件流,緊貼上乙個浮動盒子的邊。

一旦我們設定了浮動,那麼該元素就能夠併排展示,而且可以設定寬和高。

/* float:right*/

float

: left;

浮動元素會緊貼上乙個浮動元素。若寬度不夠,會換行。頂部頂帖上乙個浮動元素的底部。

浮動方向是要一直。

div可以擋住p標籤,但不會擋住p中的文字。字圍效果。

當乙個元素設定為浮動,且沒有設定寬度的時候,它的寬度會自動收縮為內容的寬度。

子元素都設定了浮動,父元素沒有設定高度。那麼父元素的高度會變成0。

在標準文件流中,父元素的高度預設是子元素撐開的,也就是說子元素多高,父元素就多高。但是當子元素浮動之後,子元素會脫離文件流,這個時候就無法撐開父元素,導致父元素沒有高度。

clear

:both;

不允許左側和右側有浮動物件。

兩個浮動元素之間新增乙個div,在div中使用

clear

:both;

清除兩側浮動。

直接在父元素中新增乙個有高度的子元素。

.clear:before

前端學習第三天

float left 設定左浮動 z index 100 重疊時顯示的順序,值越大越在上面 position fixed 固定 text align center 字型對齊方式 z index 屬性設定元素的堆疊順序 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。所以,z index 9...

前端學習 第三天

css 指層疊樣式表 cascading style sheets 為了顯表現html 元素,使html內容與表現分離。當瀏覽器顯示文件時,它必須將文件的內容與其樣式資訊結合。它分兩個階段處理文件 1 瀏覽器將 html 和 css 轉化成 dom 文件物件模型 dom在計算機記憶體中表示文件。它把...

學習前端的第三天

一 1.的作用 顯示屬性 table,行 tr,列 td 2.中的屬性 width 寬度 height 高度 border 邊框 bordercolor 邊框顏色 cellspacing 相鄰單元格邊框間的間距 cellpadding 內容距邊框之間的間距 align center left rig...