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

2021-10-05 11:00:01 字數 1446 閱讀 4560

預設的布局

塊級元素自上而下顯示

行內元素同行顯示

3個引數

float: left;     (預設)

float: right;

float: none;

1. 浮動可以用來做文字環繞效果

2.浮動可以讓多個div同一行顯示

3.浮動脫離標準流,不佔位置,會影響標準流,浮動只有左右浮動

(類似android布局的相對布局,自帶對齊,或者線性布局橫向顯示)

4.浮動的元素總是找離他最近的父級元素對齊,但是不會超出內邊距範圍。

/*  */

/* 

例如要建立2行盒子,第一行2個併排,第二行4個併排

可以先每行分別用div包裹,這樣整體是標準布局,每一行又分別是浮動布局

*/

多個box,浮動方式點對齊

1. 若box1浮動,box2不浮動,則box2在box1左上角點對齊(重疊)

2. 若box1,box2都浮動,則box2在box1右上角點對齊 (併排)

3. 若box1,box2都不浮動,則box2在box1左下角點對齊 (換行)

4. 若box1不浮動,box2浮動,則box2在box1右下角點對齊 (換行且右移乙個box1寬度)

/* */

又叫閉合浮動,就是將浮動的盒子圈到裡面,讓發盒子閉合出口和入口不讓他們出來影響其他元素

選擇器:clear

clear: left;

clear: right;

clear: both;

額外標籤法

推薦通過在浮動末尾新增以下標籤,或者

標籤也可

父級新增overflow 屬性方法(觸發bfc清除浮動)

overflow: hidden | auto | scroll

使用after偽元素清除浮動

:after方式為空元素的公升級版,好處是不用單獨加標籤

使用 beafore 、after 偽元素清除浮動

STL三種標準容器

順序性容器 vector 從後面快速的插入與刪除,直接訪問任何元素 deque 從前面或後面快速的插入與刪除,直接訪問任何元素 list 雙鏈表,從任何地方快速的插入與刪除 關聯容器 set 快速查詢,不允許重複值 multiset 快速查詢,允許重複值 map 一對一對映,基於關鍵字快速查詢,不允...

html的三種布局

特點 1 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100 2 內聯元素都會在所處的包含元素內從左到右水平分布顯示。內聯元素可不像塊狀元素這麼霸道獨佔一行 特點 預設布局下,塊狀元素這麼霸道都是獨佔一行,如果現在我們想讓兩個塊狀元素併排顯示。就需要...

web前端基礎總結(三)

css 選擇符有類選擇符,屬性選擇符,id選擇符,優先順序演算法是基於特殊性值進行計算的。分別如下 id 屬性 0.1.0.0 類屬性選擇器,屬性選擇器,偽類 0.0.1.0 元素選擇符,偽元素選擇符 0.0.0.1 通配選擇器對特殊性沒有任何貢獻值。important 優先順序高 結構層 html...