App下載

CSS布局基礎(chǔ)匯總

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

常見布局種類

一列布局

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

兩列布局

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

三列布局

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

CSS中的定位機(jī)制

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

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

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

CSS元素隱藏

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

{ visibility: hidden; /* 占據(jù)空間，沒法點(diǎn)擊 */ } 
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占據(jù)空間，沒法點(diǎn)擊 */ } 
{ position: absolute; top: -999em; /* 不占據(jù)空間，沒法點(diǎn)擊 */ } 
{ position: relative; top: -999em; /* 占據(jù)空間，沒法點(diǎn)擊 */ } 
{ position: absolute; visibility: hidden; /* 不占據(jù)空間，沒法點(diǎn)擊 */ } 
{ height: 0; overflow: hidden; /* 不占據(jù)空間，沒法點(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)和語義化問題，代碼量極少

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


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

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

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


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

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

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


使用 :after 偽元素

優(yōu)點(diǎn)：需要注意的是 :after 是偽元素，不是偽類（某些CSS手冊(cè)里面稱之為“偽對(duì)象”），很多清除浮動(dòng)大全之類的文章都稱之為偽類，不過 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)：簡單明了

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

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

命名規(guī)范說明：

所有的命名最好都小寫

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

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

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 主導(dǎo)航 columns.css 專欄
subnav 二級(jí)導(dǎo)航 font.css 文字、字體
menu 菜單 forms.css 表單
submenu 子菜單 mend.css 補(bǔ)釘
sideBar 側(cè)欄 print.css 打印
sidebar_a,#sidebar_b 左側(cè)欄或右側(cè)欄 main 頁面主體
msg#message 提示信息 tips 小技能
vote 投票 friendlink 友誼連接
title 標(biāo)題 summary 摘要
loginbar 登錄條 searchInput 搜索輸入框
hot 熱門熱門 search 搜索
search_output 搜索輸出和搜索結(jié)果類似 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)簽頁
joinus 加入我們 partner 合作火伴
service 服務(wù) regsiter 注冊(cè)
arr/arrow 箭頭 guild 指南
sitemap 網(wǎng)站地圖 list 列表
homepage 首頁 subpage 2級(jí)頁面子頁面
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

<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文件

新規(guī)范

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


CSS

0 人點(diǎn)贊