網頁佈局基礎——文檔流、盒子模型、浮動、定位

時間 2019-11-09

標籤網頁佈局基礎文檔盒子模型浮動定位欄目 HTML 简体版

原文原文鏈接

來源：imooc教學視頻html

1、W3C標準

W3C標準是由萬維網聯盟制定的一系列標準，其中包括：
瀏覽器

結構化標準語言（HTML和XML）佈局
表現標準語言（CSS）spa
行爲標準語言（DOM和ECMAScript）code

倡導結構、樣式、行爲分離orm

2、 CSS中的定位機制

1. 標準文檔流（Normal flow）

1.1 特色

從上到下，從左到右，輸出文檔內容視頻
由塊級元素和行級元素組成htm

1.2 塊級元素
ip

從左到右撐滿頁面，獨佔一行文檔
觸碰到頁面邊緣時，會自動換行

如：div、ul、li、dd、dt...

1.3 行級元素

如：span、strong、input、img...

1.4 塊級元素和行級元素都是盒子模型

1.5 盒子模型

四種屬性：

邊框（border）
內邊距（padding）
外邊距（margin）
盒子內容（content）

1.6 CSS樣式的三種形式

外部樣式
內部樣式
行內樣式

優先級：就近原則，離的越近，優先級越高

1.7 盒子3D模型

共分五層，由上到下分別爲：

border
content+padding
background-image
background-color
margin

1.8 盒子模型尺寸

盒子模型尺寸=邊框+盒子中的內容尺寸+內邊距+外邊距

1.9 自動居中佈局

自動居中一列布局須要設置 margin 左右值設置爲 auto，並且必定要設置width爲一個定值。
要設置子元素寬度以父元素寬度爲準自適應，需設置子元素寬度值爲100%。
若是想讓頁面自動居中，當設置了margin值爲auto的時候，不能再設置浮動屬性或絕對定位屬性。

（Dreamweaver快捷鍵：文本縮進【Ctrl】+【Alt】+【]】，取消文本縮進【Ctrl】+【Alt】+【[】百度經驗：Dreamweaver快捷鍵）

2.浮動（Floats）

可以實現橫向多列布局

經過設置float屬性實現

2.1 三個屬性值

left（左浮動）
right（右浮動）
none（不浮動）

2.2 特色

元素會左移、或者右移，直到觸碰到容器爲止。
設置了浮動的元素，仍舊處於標準文檔流中，會佔用其空間。
當元素沒有設置寬度值，而設置了浮動屬性，元素的寬度會隨內容的變化而變化。
當元素設置浮動屬性後，會對相鄰的元素產生影響，相鄰元素特指緊鄰後面的元素。

2.3 清除浮動的經常使用方法

clear屬性：

clear:both（經常使用）、clear:left、clear:right

同時設置

width:100%（或固定寬度）+ overflow:hidden

<br /> 空標籤（沒有意義的標籤，不建議使用，會影響文檔結構）

2.4 橫向兩列布局

主要應用技能：float屬性——使縱向排列的塊級元素，橫向排列，margin屬性——設置兩列元素之間的間距。

div的高度通常不要設置

設置了float屬性的元素，要對其父元素或者說父容器添加overflow:hidden屬性，以解決浮動對父元素的影響。

3.絕對定位（Absolute positioning）

經過設置position屬性實現
CSS中規定的第三種定位機制
可以實現橫向多列布局和較爲複雜的定位

好比：

帶有遮罩層效果的提示框
固定層效果
全屏廣告

3.1 position屬性

三種定位形式：1.靜態定位、2.相對定位、3.絕對定位

可設置4個屬性值：

static（靜態定位）
relative（相對定位）
absolute（絕對定位）
fixed（固定定位）

3.2 相對定位

3.2.1 特色

相對於自身原有位置進行偏移
仍處於標準文檔流中
隨即擁有偏移屬性和z-index屬性

偏移後佔據標準文檔流的位置，而且產生z-index屬性遮蓋其餘元素

3.3 絕對定位

3.2.1 特色

創建了以包含塊爲基準的定位
徹底脫離了標準文檔流
隨即擁有偏移屬性和z-index屬性

3.2.2 未設置偏移量

特色：

不管是否存在已定位祖先元素，都保持在元素初始位置（父元素的左側）
脫離文檔標準流

當一個元素設置絕對定位，沒有設置寬度時，元素寬度根據內容進行調節

3.3.3 設置偏移量

偏移參照基準：

1. 無已定位祖先元素——以<html>爲偏移參照基準

2. 有已定位祖先元素——以距離其最近的已定位祖先元素爲偏移參照基準

3.4 使用絕對定位實現橫向兩列布局

使用absolute實現橫向兩列布局，經常使用語一列固定寬度，一列寬度自適應的狀況

主要應用技能：

relative——父元素相對定位

absolute——自適應寬度元素絕對定位

固定寬度列的高度必定要 > 自適應寬度的列

3.5 fixed定位

設置偏移量，不管有無已定位祖先元素，均以瀏覽器窗口爲標準進行偏移。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。