您當前位置：首頁 > web前端 > htmlcss > CSS布局基礎匯總

CSS布局基礎匯總

來源：程序員人生發布時間：2015-06-06 08:41:18 閱讀次數：3327次

常見布局種類
- 1列布局
- 兩列布局
- 3列布局
CSS中的定位機制
網頁簡單布局之結構與表現的原則
CSS元素隱藏
CSS中清除浮動最優方法
DIVCSS規范命名集合
DIVCSS命名參考表
導入樣式及腳本
- 傳統方式
- 新規范

常見布局種類

1列布局

自上而下的,1般頭部進行固定寬度,高度設置為自動

兩列布局

自適應的兩列布局：width用百分比+float；
固定寬度的兩列布局：width：具體值/父級元素的寬度肯定，width+百分比；+float;
如果沒有加float的話，不能實現并排的兩列布局。

3列布局

傳統的3列布局依托于float實現
特殊的3列布局：左右固定，中間自適應情況，左右使用絕對定位來實現，中間用margin實現.
3列布局：左邊和右邊固定，中間自適應：

CSS中的定位機制

標準文檔流
浮動
絕對定位

網頁簡單布局之結構與表現的原則

最大化的簡化html的結構，然后用css進行設置，減少html與css的契合度
不應當為了樣式而添加無意義的標簽
結構與表現分離，結構簡潔，構建結構不斟酌布局樣式

CSS元素隱藏

{ display: none; /* 不占據空間，沒法點擊 */ }
{ visibility: hidden; /* 占據空間，沒法點擊 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占據空間，沒法點擊 */ }
{ position: absolute; top: -999em; /* 不占據空間，沒法點擊 */ }
{ position: relative; top: -999em; /* 占據空間，沒法點擊 */ }
{ position: absolute; visibility: hidden; /* 不占據空間，沒法點擊 */ }
{ height: 0; overflow: hidden; /* 不占據空間，沒法點擊 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占據空間，可以點擊 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據空間，可以點擊 */ }

CSS中清除浮動最優方法

在父級添加 overflow：hidden
優點：不存在結構和語義化問題，代碼量極少
缺點：內容增多時候容易造成不會自動換行致使內容被隱藏掉，沒法顯示需要溢出的元素

父元素也設置浮動（加個float：left/right）
優點：不存在結構和語義化問題，代碼量極少
缺點：使得與父元素相鄰的元素的布局會遭到影響，不可能1直浮動到body，不推薦使用

父元素設置 display:table
優點：結構語義化完全正確，代碼量極少
缺點：盒模型屬性已改變，由此釀成的1系列問題，得不償失，不推薦使用

使用 :after 偽元素
優點：需要注意的是 :after 是偽元素，不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴謹1點，這是1種態度。
由于IE6⑺不支持:after，使用 zoom:1 觸發 hasLayout。
缺點：兼容性不是很好。

在浮動的元素后面添加空標簽
清除浮動
優點：簡單明了
缺點：無意義的空標簽，不利于語義化

DIV+CSS規范命名集合

命名規范說明
1）、所有的命名最好都小寫
2）、屬性的值1定要用雙引號(“”)括起來，且1定要有值如class=”divcss5”,id=”divcss5”
3）、每一個標簽都要有開始和結束，且要有正確的層次，排版有規律工整
4）、空元素要有結束的tag或于開始的tag后加上”/”
5）、表現與結構完全分離，代碼中不觸及任何的表現元素，如style、font、bgColor、border等
6）、定義，應遵守從大到小的原則，體現文檔的結構，并有益于搜索引擎的查詢。
7）、給每個表格和表單加上1個唯1的、結構標記id
8）、給圖片加上alt標簽
9）、盡可能使用英文命名原則
10）、盡可能不縮寫，除非1看就明白的單詞

DIV+CSS命名參考表

CSS樣式命名	說明	CSS文件命名	說明
wrapper	頁面外圍控制整體布局寬度	master.css,style.css	主要的
container或#content	容器,用于最外層	module.css	模塊
layout	布局	base.css	基本公用
head,#header	頁頭部份	layout.css	布局,版面
foot,#footer	頁腳部份	themes.css	主題
nav	主導航	columns.css	專欄
subnav	2級導航	font.css	文字、字體
menu	菜單	forms.css	表單
submenu	子菜單	mend.css	補釘
sideBar	側欄	print.css	打印
sidebar_a,#sidebar_b	左側欄或右側欄
main	頁面主體
tag	標簽
msg#message	提示信息
tips	小技能
vote	投票
friendlink	友誼連接
title	標題
summary	摘要
loginbar	登錄條
searchInput	搜索輸入框
hot	熱門熱門
search	搜索
search_output	搜索輸出和搜索結果類似
searchBar	搜索條
search_results	搜索結果
copyright	版權信息
branding	商標
logo	網站LOGO標志
siteinfo	網站信息
siteinfoLegal	法律聲明
siteinfoCredits	信譽
joinus	加入我們
partner	合作火伴
service	服務
regsiter	注冊
arr/arrow	箭頭
guild	指南
sitemap	網站地圖
list	列表
homepage	首頁
subpage	2級頁面子頁面
tool,#toolbar	工具條
drop	下拉
dorpmenu	下拉菜單
status	狀態
scroll	轉動
.tab	標簽頁
.left.right.center	居左、中、右
.news	新聞
.download	下載
.banner	廣告條(頂部廣告條)

導入樣式及腳本

傳統方式

援用線上CDN
- <script type="text/javascript" href="xxx/xxx.js"> 這是援用JS文件
- <script type="text/css" href="xxx/xxx.css">這是援用CSS文件
援用本地文件
- <script type="text/javascript" src="http://www.jyygyx.com/uploadfile/cj/20150502/xxx/xxx.js"> 這是援用JS文件
- <script type="text/css" src="http://www.jyygyx.com/uploadfile/cj/20150502/xxx/xxx.css">這是援用CSS文件

新規范

根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時1般不需要指定 type 屬性，由于 text/css 和 text/javascript 分別是它們的默許值。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>