定義:
內容從左到右,從上到下書寫的。前面的內容大小或者位置發生變化時,後面的內容位置也會隨之變化。
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...