網頁布局/排版的方式有三種
又稱為文件流/普通流, 所謂文件流, 就是元素排版過程中, 元素會自動從左往右, 從上往下的流式排版
元素分類:
排版方式
使用塊級標籤時垂直排版(包括行內塊級)
使用行內標籤時水平排版
塊級標籤
:div
:
浮動流元素脫離文件流意味著
不再分行內, 塊級, 行內塊級, 不論是什麼級的元素都可以水平排版
無論是什麼級的元素都可以設定寬高
總結: 浮動流中的元素和標準流中的塊級元素很像
**:
html**:
css**:
.box1
.box2
/* 當第乙個浮動起來之後, 第二個會自動的補全上去, 這是一種塌陷, 後面會講到
/* 如果兩個都浮動起來, 那麼就會跟行內標籤一樣一次排列, 不夠會自動往後換行排列(屬於脫標文件)
浮動流只有一種排版方式, 就是水平排版, 只有左右對齊, 沒有上下居中對齊
一旦使用了浮動流, 外邊距margin則不能使用
將兩個塊級元素放到一行, 兩種方法
1. 修改display屬性值為 inline-block
2. 使用浮動流的方式
(1)html**;
css**
.box1
.box2
(2)html**
css**
.box1
.box2
脫離文件流分為
完全脫離文件流是全部標籤都浮動起來
使用三個標籤模組展示: 浮動的會併排,
div1 和 div2 浮動後, div3 會補齊
這是半脫離文件流
html**
css**
.box1
.box2
.box3
當父元素的寬度不足以顯示所有元素時, 浮動的元素會往下靠,
html**:
css**:
.box1
.box2
.box3
.fad
html**:
css**
.fad
.box1
從上往下布局
從左到右布局
水平方向可以先劃分為一左一右, 然後調整位置
第一步先取消所有預設的邊距
*
在浮動流中, 浮動的元素撐起父類元素的高度, 當兒子元素浮動起來後, 父親的高度變為0
父類元素好像塌陷了一樣, 因而成為塌陷
.nva1
.nva2
方式2使用clear: none left right both
取值none: 預設值, 允許兩邊有浮動物件
left: 不允許左邊有浮動物件
right: 禁止右邊有浮動
both: 不予許兩邊有浮動
把握兩點
元素是從上到下, 從左到右依次載入的
clear: left; 對自身作用, 不會影響其他元素, 一旦左邊有浮動元素, 啟動保護強不讓其占用腳下位置
.nva1
.nva2
隔牆發外牆法在兩個盒子中間新增乙個額外的塊級元素
給這個額外新增元素clear: both; 屬性
注意, 也可以使用margin-top和margin-bottom屬性配合使用達到效果
清除浮動4
本質原理和內牆法一樣, 但是我們使用了偽元素選擇器實現,
在需要隔開的元素加上.屬性: after 或 .屬性:before方式
overflow方法
overflow: hidden;在父類加上即可
定位流格式:
position: relative
需要配合一下4種屬性使用
top: xxpx
left: xxpx
right: xxpx
bottom:xxpx
待補
CSS3 控制樣式，網頁布局
background origin 規定背景的定位區域。padding box 背景影象相對內邊距定位 預設值 border box 背景影象相對邊框定位 以邊框左上角為參照進行位置設定 content box 背景影象相對內容區域定位 以內容區域左上角為參照進行位置設定 備註 1.預設盒子的背景是...
前端知識之css樣式
前端之css樣式 css注釋 css的幾種引入方式 內部樣式 外部樣式 推薦使用 css選擇器 組合選擇器 屬性選擇器 根據標籤中屬性的具體值給定樣式 div title hello 分組和巢狀 不常用的選擇器 偽類選擇器 visited 已訪問的鏈結 hover 滑鼠移動到鏈結上才改變樣式 act...
前端css布局之BFC
哈嘍，各位小夥伴好！今天來整理下前端關於css布局的乙個知識點 bfc block fomatting context 如果知識點梳理有出錯的地方，望夥伴們幫忙指出，一起進步 bfc 可以理解為建立乙個布局容器，容器裡按自己的方式來布局，且與容器外界的元素互不影響。wrap fl div 這是div...