CSS布局基礎(chǔ)匯總

猿友 2020-12-31 17:16:11 瀏覽數(shù) (2341)

反饋

常見(jiàn)布局種類(lèi)

一列布局

自上而下的,一般頭部進(jìn)行固定寬度,高度設(shè)置為自動(dòng)

兩列布局

自適應(yīng)的兩列布局：width 用百分比+float；
固定寬度的兩列布局：width：具體值/父級(jí)元素的寬度肯定，width+百分比；+float;如果沒(méi)有加 float 的話，不能實(shí)現(xiàn)并排的兩列布局。

三列布局

傳統(tǒng)的三列布局依托于 float 實(shí)現(xiàn)
特殊的三列布局：左右固定，中間自適應(yīng)情況，左右使用絕對(duì)定位來(lái)實(shí)現(xiàn)，中間用 margin 實(shí)現(xiàn)三列布局：左邊和右邊固定，中間自適應(yīng)：

CSS中的定位機(jī)制

標(biāo)準(zhǔn)文檔流
浮動(dòng)
絕對(duì)定位

網(wǎng)頁(yè)簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)的原則

最大化的簡(jiǎn)化 html 的結(jié)構(gòu)，然后用 css 進(jìn)行設(shè)置，減少 html 與 css 的契合度
不應(yīng)當(dāng)為了樣式而添加無(wú)意義的標(biāo)簽
結(jié)構(gòu)與表現(xiàn)分離，結(jié)構(gòu)簡(jiǎn)潔，構(gòu)建結(jié)構(gòu)不斟酌布局樣式

CSS元素隱藏

{ display: none; /* 不占據(jù)空間，沒(méi)法點(diǎn)擊 */ }

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

CSS中清除浮動(dòng)最優(yōu)方法

在父級(jí)添加 overflow：hidden

優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題，代碼量極少

缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行致使內(nèi)容被隱藏掉，沒(méi)法顯示需要溢出的元素

父元素也設(shè)置浮動(dòng)（加個(gè)float：left/right）

優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題，代碼量極少

缺點(diǎn)：使得與父元素相鄰的元素的布局會(huì)遭到影響，不可能一直浮動(dòng)到 body，不推薦使用

父元素設(shè)置 display:table

優(yōu)點(diǎn)：結(jié)構(gòu)語(yǔ)義化完全正確，代碼量極少

缺點(diǎn)：盒模型屬性已改變，由此釀成的一系列問(wèn)題，得不償失，不推薦使用

使用 :after 偽元素

優(yōu)點(diǎn)：需要注意的是 :after 是偽元素，不是偽類(lèi)（某些CSS手冊(cè)里面稱(chēng)之為“偽對(duì)象”），很多清除浮動(dòng)大全之類(lèi)的文章都稱(chēng)之為偽類(lèi)，不過(guò) csser 要嚴(yán)謹(jǐn)一點(diǎn)，這是一種態(tài)度。

由于IE6⑺不支持:after，使用 zoom: 觸發(fā) hasLayout。

缺點(diǎn)：兼容性不是很好。

在浮動(dòng)的元素后面添加空標(biāo)簽

清除浮動(dòng)

優(yōu)點(diǎn)：簡(jiǎn)單明了

缺點(diǎn)：無(wú)意義的空標(biāo)簽，不利于語(yǔ)義化

DIV+CSS規(guī)范命名集合

命名規(guī)范說(shuō)明：

所有的命名最好都小寫(xiě)

每一個(gè)標(biāo)簽都要有開(kāi)始和結(jié)束，且要有正確的層次，排版有規(guī)律工整

空元素要有結(jié)束的 tag 或于開(kāi)始的 tag 后加上”/”
表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不觸及任何的表現(xiàn)元素，如 style、font、bgColor、borde r等
定義，應(yīng)遵守從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有益于搜索引擎的查詢(xún)。
給每個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記 id
給圖片加上alt標(biāo)簽
盡可能使用英文命名原則
盡可能不縮寫(xiě)，除非一看就明白的單詞

DIV+CSS命名參考表

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

導(dǎo)入樣式及腳本傳統(tǒng)方式

援用線上CDN

援用本地文件

新規(guī)范

根據(jù) HTMl5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定

CSS

0 人點(diǎn)贊