前端基礎第6天(CSS 浮動布局)

2021-08-21 13:21:51 字數 1262 閱讀 5501

文件流的定義:

元素自上而下,自左而右,塊元素獨佔一行,行內元素在一行上顯示,碰到父集元素的邊框換行。

浮動布局的定義

浮動布局

float: left   |   right
特點:

★元素浮動之後不佔據原來的位置(脫標)

★浮動的盒子在一行上顯示

★行內元素浮動之後轉換為行內塊元素。(不推薦使用,轉行內元素最好使用display: inline-block;)

浮動的作用

◆文字繞圖

◆製作導航

◆網頁布局

清除浮動

當父盒子沒有定義高度,巢狀的盒子浮動之後,下邊的元素發生位置錯誤。

◆清除浮動不是不用浮動,清除浮動產生的不利影響。

◆清除浮動的方法

clear: left | right | both

工作裡用的最多的是clear:both;

定位

定位方向: left | right | top | bottom

◆position:static; 靜態定位。預設值,就是文件流。

◆絕對定位

position:absolute;

特點:

★元素使用絕對定位之後不佔據原來的位置(脫標)

★元素使用絕對定位,位置是從瀏覽器出發。

★巢狀的盒子,父盒子沒有使用定位,子盒子絕對定位,子盒子位置是從瀏覽器出發。

★巢狀的盒子,父盒子使用定位,子盒子絕對定位,子盒子位置是從父元素位置出發。

★給行內元素使用絕對定位之後,轉換為行內塊。(不推薦使用,推薦使用display:inline-block;)

◆相對定位

position: relative;

特點:

★使用相對定位,位置從自身出發。

★還佔據原來的位置。

★子絕父相(父元素相對定位,子元素絕對定位)

★行內元素使用相對定位不能轉行內塊

◆固定定位

position:fixed;

特點:

★固定定位之後,不佔據原來的位置(脫標)

★元素使用固定定位之後,位置從瀏覽器出發。

★元素使用固定定位之後,會轉化為行內塊(不推薦,推薦使用display:inline-block;)

前端 CSS基礎(八)浮動

視覺格式化模型,大體上將頁面中盒子的排列分為三種方式 常規流浮動 定位文字環繞 橫向排列 修改float屬性值為 預設值為none 不浮動,為常規流 當乙個元素浮動後,元素必定為塊盒 更改display屬性為block 浮動元素的包含塊,和常規流一樣,為父元素的內容盒 寬度為auto時,適應內容寬度...

web前端基礎 (6)三種布局 標準流,浮動

預設的布局 塊級元素自上而下顯示 行內元素同行顯示 3個引數 float left 預設 float right float none 1.浮動可以用來做文字環繞效果 2.浮動可以讓多個div同一行顯示 3.浮動脫離標準流,不佔位置,會影響標準流,浮動只有左右浮動 類似android布局的相對布局,...

CSS基礎學習十八 CSS布局之浮動

css布局中說到定位就不得不提浮動,浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動 框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。一float屬性的定義和用法 float屬性 設定元素浮動 可能的值 none 不浮動,在文件流內,預...