網頁佈局（html＋css基礎）

時間 2019-11-08

標籤網頁佈局 html+css html css 基礎欄目 HTML 简体版

原文原文鏈接

1、如何用CSS進行網頁佈局css

2、網頁佈局基礎html

3、網頁簡單佈局之結構和表現原則前端

4、CSS Sprite雪碧圖應用瀏覽器

什麼叫佈局？工具

網頁的特色：佈局

網頁自適應寬度；學習

網頁長度無限延長；測試

（分欄也叫分列，混合佈局，一列布局，二列布局，三列布局。）網站

使用float和絕對定位position:relative都會脫離文檔流.spa

清除浮動兩個方法：

1.爲受浮動影響元素設置{clear:both;}屬性
2.爲受浮動影響元素設置{width:100%;overflow:hidden;}固定長度以及溢出隱藏屬性

網頁佈局：流式佈局(標準文檔流)、浮動佈局、絕對定位佈局

W3C標準：
結構化標準語言（HTML和XML）
表現標準語言（CSS）
行爲標準語言（DOM和ECMAScript）

標準文檔流：
從上到下，由左到右，輸出文檔內容
由塊級元素和行內元素組成

塊級元素:
由左到右填滿頁面，獨佔一行，到頁面邊緣時會自動換行div,p,ul,ol,dt.....

行級元素：
能在同一行顯示，不會改變html文檔結構span，strong，input，img

盒子3D模型—網頁佈局的基石
1.border
2.content + padding
3.background-image
4.background-color
5.margin

盒子大小=邊框border+內邊距padding+＋外邊距margin＋內容content

行內樣式 > 內部樣式 > 外部樣式（採用的是就近原則）

一、auto會根據瀏覽的寬度自動來設置兩邊的外邊距。
二、其原理：（瀏覽器的寬度-外包含層的寬度）/2=外邊距
三、若是想讓頁面自動居中，當設置marign屬性爲auto時，就不能在設置浮動或是絕對定位屬性。若是你設置了auto，又設置了浮動或是絕對定位，那麼頁面是不會居中顯示的

自動居中一列布局：
一、三個技能點:標準文檔流、margin屬性、塊級元素。

**自動居中一列布局須要設置 margin 左右值設置爲 auto，並且必定要設置width爲一個定值。

**元素未設置寬度，但設置了浮動float屬性，元素的寬度隨內容的變化而變化。當元素設置浮動屬性後，會對相鄰的元素產生影響，相鄰元素特指緊鄰後面的元素

當父包含塊被壓縮成一條線的時候使用{clear:both;}不能起到清除浮動的做用，只能用溢出屬性hidden方法來清除浮動影響

橫向兩列布局，主要設置float屬性和margin。

div通常不要設置高度.

(1)position ４個值
static relative absolute fixed(後面兩個都屬於絕對定位)

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

絕對定位
建位了而包含塊為基準的定位，徹底了脫離了標準文檔流，　父元素要設置position:relative 若是沒有就再而上一個元素為基準，直到<html>.

positive設置相對定位，以自身爲相對基準進行偏移，設置相對定位屬性以後會有偏移屬性（top left right bottom 相對於自身進行偏移，會覆蓋其餘內容進行偏移）和z-Index屬性（空間的層堆疊z軸的堆疊，沒有的話是默認存在y和x軸的一個平面上）

相對定位和絕對定位的異同
一、相對定位
特色：相對於自身原有位置進行偏移
元素仍處於標準文檔流中
隨即擁有偏移屬性和z-index屬性（多了z軸更具空間感）
移動同時會將瀏覽器撐開

絕對定位特色：
創建了以包含塊位基準的定位
徹底脫離標準文檔流
隨即擁有偏移屬性跟z-index屬性
未設置偏移量時：
不管是否存在已經定位的祖先元素，都保持在元素初始位置脫離標準文檔流
設置偏移量時：
偏移參照的基準：
無已定位的祖先元素：以<html>爲偏移參照基準
有已定位的祖先元素：以距其最近的已定位的祖先元素爲偏移參照基準

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

＊＊＊使用絕對定位實現橫向兩列布局通常用於：一列固定寬度，一列自適應寬度。

主要應用技能：

relative-父元素相對定位。

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

注意：固定寬度列的高度>自適應寬度的列，不然會形成文檔的溢出。

開發思路：

先按結構和語義編寫代碼
再進行樣式設置
減小HTML與CSS的契合度

先考慮設計圖中的文字內容和內容模塊之間的關係，重點放在編寫html結構和語義化，而後考慮佈局和表現形式。

什麼是網頁皮膚？相同的html結構，不一樣的css樣式。

爲了減小http請求數量，加速網頁內容顯示，不少網站的導航欄圖標、登陸框圖片等，使用的並非<image>標籤，而是CSS Sprite雪碧圖。

xuebitu雪碧圖

使用sprite，將多張小圖片整合成一張大圖片，能夠減小http請求數，加速內容顯示。

cssscrpite雪碧圖
靜態圖片，不隨用戶信息變化而變化。
小圖片，容量比較小
加載量比較大。（目的是：有效的減小http請求的數量）
大圖不建議拼成雪碧圖，加載時間長

雪碧圖原理：經過css的背景定位屬性：background-position來控制
座標軸,拼合背景圖的小圖(x,y)爲負值
以雪碧圖左上角的定點爲(0,0)座標
當須要對座標系中的某個小圖標進行展現的時候，只須要取左上角的座標進行偏移，例如(-100,0)，只須要將background-position:-100,0;
實現原理：控制一個層，可顯示的區域範圍大小，經過一個窗口，進行背景圖的滑動。

有幾個很是不錯的前端開發在線工具，分享給一塊兒學習的小夥伴們，別忘了收藏，很實用。

（1）在線代碼測試工具：http://www.lvyestudy.com/tools/run_code.aspx；

（2）在線調色板：http://www.lvyestudy.com/tools/color_picker.aspx；

（3）CSS3圓角生成器：http://www.lvyestudy.com/tools/border_radius.aspx

CSS Sprite雪碧圖實現方式
1.PS手動拼圖：製做多個小圖片，拼成一個大圖片，用鼠標挪動圖片的位置（position）。適用本身的小網站
2.使用spite工具自動生成雪碧圖
CSS Sprite自動生成工具-「cssGaga」生成小圖片的座標，以及對應的css程序,提供background-position的值
下載地址：http://www.99css.com/archives/1524

圖片伸縮設置：height40px，margin-top:-10px;line-height:40px文本居中。

在對元素設置固定定位時，若是但願本元素包含其父包含塊中，不須要對其設置偏移量.