CSS的布局基礎知識點有哪些

本篇內容介紹了“CSS的布局基礎知識點有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

常見布局種類

一列布局

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

兩列布局

• 自適應的兩列布局：width 用百分比+float；

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

三列布局

• 傳統的三列布局依托于 float 實現

• 特殊的三列布局：左右固定，中間自適應情況，左右使用絕對定位來實現，中間用 margin 實現三列布局：左邊和右邊固定，中間自適應：

CSS中的定位機制

1. 標準文檔流

2. 浮動

3. 絕對定位

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

• 最大化的簡化 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）

優點：不存在結構和語義化問題，代碼量極少

缺點：使得與父元素相鄰的元素的布局會遭到影響，不可能一直浮動到 body，不推薦使用

父元素設置 display:table

優點：結構語義化完全正確，代碼量極少

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

使用 :after 偽元素

優點：需要注意的是 :after 是偽元素，不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過 csser 要嚴謹一點，這是一種態度。

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

缺點：兼容性不是很好。

在浮動的元素后面添加空標簽

清除浮動

優點：簡單明了

缺點：無意義的空標簽，不利于語義化

DIV+CSS規范命名集合

命名規范說明：

所有的命名最好都小寫

每一個標簽都要有開始和結束，且要有正確的層次，排版有規律工整

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

DIV+CSS命名參考表

導入樣式及腳本傳統方式

援用線上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.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.js"> 這是援用JS文件

<script type="text/css" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.css">這是援用CSS文件

新規范

根據 HTMl5 規范，在 引入 CSS 和 JavaScript 文件時一般不需要指定

“CSS的布局基礎知識點有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！