網頁布局基礎

網頁布局參照三個方面：

標準文件流

float

position

1、標準文件流

note：兩個元素都屬於 盒子模型

2、float

note：設定浮動後，脫離標準文件流；但不脫離標準文字流  ；

當元素設定浮動屬性後，會對相鄰的元素產生影響，相鄰元素指的是緊鄰後面的元素。消除影響方法：width:100%;overflow:hidden（包含元素有影響時）  或clear:both（後　　　　　面元素有影響時）

對文件流，文字流的理解

對設定浮動後的標籤，如果是文件流裡的會直接佔據它的位置，文字（）會在其周圍顯示

與position:absolute對比：position:absolute會脫離標準文件流和標準文字流

3、position

包含塊：離它最近的，設定了position的祖先元素

兩種情況：

未設定偏移量：無論是否存在已定位祖先元素，都保持在元素初始位置

設定偏移量：無已定位祖先元素，以為偏移參照標準

有已定位祖先元素，以距其最近的已定位祖先元素為偏移參照標準

note：對於未設定width的元素

預設 100%

但是加上position:absolute之後，按包含元素width來算。

網頁布局基礎

網頁製作的基礎，在w3c盛行的今天 div css 布局網頁 布局分為 流式布局 浮動布局 絕對定位布局 涉及標準文件流 盒子模型 float屬性 position屬性 1.自動居中 列布局 盒子模型的使用方法 2.浮動布局 float屬性來實現上中下布局和橫向兩列甚至多列布局，解決浮動影響的常用方...

網頁布局基礎

由全球資訊網聯盟指定的一系列標準，包括 機構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript w3c標準倡導結構 樣式 行為分離。css中存在3中定位機制 1 標準文件流 normal flow 特點 從上到下，從左到右，輸出文件內容 由塊級元素和行級元...

網頁布局基礎

1 css 規定的定位機制有三種，分別是 標準文件流 normal folw 浮動 floats 絕對定位 absolute positioning 2 w3c標準 由全球資訊網制定的一系列標準，包括 結構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript...