頁面布局：
倡導結構，樣式，行為分離。
css中的定位機制：
盒子模型：網頁布局的基石，有四部分組成：
盒子的尺寸=邊框+外邊距+內邊距+盒子中的內容尺寸
注：塊級元素和行級元素都是盒子模型。
常見頁面布局及解決方案：
####二、自動居中一列布局
自動居中一列布局需要設定margin左右值為auto，而且一定要設定寬度為乙個定值。
auto會根據瀏覽器的寬度自動地設定兩邊的外邊距
如果想讓頁面自動居中，當設定margin屬性為auto的時候，不能再設定浮動和絕對定位屬性
**示例：
一列布局固定：
####三、橫向兩列布局
浮動布局：css中規定的第二種定位機制；能夠實現橫向多列布局；通過設定float屬性實現。
float屬性：left | right | none
特點：元素會左移，或右移，直至觸碰到容器為止。
注：設定了浮動的元素，仍舊處於文件流中。當元素沒用設定寬度值。若設定了浮動屬性，元素的寬度隨內容的變化而變化。當元素設定浮動屬性後，會對相鄰的元素產生影響，相鄰元素特指相鄰後面的元素。
清除浮動的方法：
clear屬性——常用clear：both;clear:left;或者clear:right；同時設定width：100%（或固定寬度）+overflow：hidden；橫向兩列布局是網頁布局最常見的方式之一
主要應用技能：
float屬性——使縱向排列的塊級元素，橫向排列
margin屬性——設定兩列之間的間距
注：（1）當父包含塊縮成一條時，用clear：both方法清除浮動無效，它一般用於緊鄰後面的元素的清除浮動。
（2）div塊的高度一般不需要設定。
**示例
兩列居中固定
兩列居中自適應：
####四、絕對定位布局
position屬性：
擁有三種定位方式：1、靜態定位 2、相對定位 3、絕對定位
可設定4個屬性值：
static（靜態定位）( 1）未設定偏移量：無論是否存在已定位祖先元素，都保持在元素初始位置；脫離了標準文件流relative（相對定位）——特點：相對於自身原有為止進行偏移；仍處於標準文件流中；隨即擁有偏移屬性和z-index屬性
absolute（絕對定位）——特點：建立以包含塊為基準的定位；完全脫離了標準文件流；隨即擁有偏移屬性和z-index屬性
（2）設定偏移量
注：當乙個元素設定絕對定位，沒有設定寬度時，元素的寬度根據內容進行調節
fixed（固定定位）
使用absolute實現橫向兩列布局——常用於一列固定寬度，另一列寬度自適應的情況
主要應用技能：
relative——父元素相對定位
absolute——自適應寬度元素絕對定位
注意：固定寬度列的高度》自適應寬度的列
**舉例：
三列自適應：
left
main
right
三列左右固定：
left
main
right
五、混合布局及結構與表現原則
混合布局01
head
left
right
混合布局02
head
left
right
footer
混合布局03
head
left
sub_left
sub_right
footer
混合布局04
head
left
sub_left
sub_right
footer
混合布局05（自適應）
head
left
right
main
footer
以上是來自與網上資源整理，感謝這個這個提供demo的朋友，同時可以參考51job的乙個部落格（直通車），通過以上基本就可以實現大部分頁面的布局了，至於其他內容請自行解決。
菜鳥學習前端之CSS疑問
w3c div div1 div2 style head background origin border box p id div1 這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是...
Django學習系列之django分頁
from django.core.paginator import paginator objects post.objects.filter status published 從資料庫中取出所有status published狀態的文章p paginator objects,3 例項化pagina...
「菜鳥」基礎學習之 002
迴圈語句 for 1.語法 for 迴圈變數 in 可迭代物件 語句塊else 語句塊 當迴圈條件不滿足時，執行 2.range 作用 建立可迭代物件，返回的物件型別為 range 傳參 有三種情況 一.傳遞1個引數時 range int 建立 從0到int的可迭代物件，但取不到int 如 rang...