最詳細的html+css筆記（三）

三部分附錄（因為暫時不支持插入超鏈接所以部分內容無法顯示）

附錄一 DIV命名規范

企業DIV使用頻率高的命名方法
網頁內容類
標題: title
摘要: summary
箭頭： arrow
商標： label
網站標志： logo
轉角/圓角：corner
橫幅廣告： banner
子菜單： subMenu
搜索： search
搜索框： searchBox
登錄： login
登錄條：loginbar
工具條： toolbar
下拉： drop
標簽頁： tab
當前的： current
列表： list
滾動： scroll
服務： service
提示信息： msg
熱點：hot
新聞： news
小技巧： tips
下載： download
欄目標題： title
熱點： hot
加入：joinus
注冊： regsiter
指南： guide
友情鏈接： friendlink
狀態： status
版權： copyright
按鈕： btn
合作伙伴： partner
投票： vote
左右中：left right center

注釋的寫法: /* Footer */ 內容區/* End Footer */
id的命名:
頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center

導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary

功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的:current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權：copyright

class的命名:
顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
字體大小,直接使用”font+字體大小”作為名稱,如
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
標題欄樣式,使用”類別+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事項::
一律小寫;
盡量用英文;
不加中杠和下劃線;
盡量不縮寫，除非一看就明白的單詞.

推薦的 CSS 書寫順序：
顯示屬性
display
list-style
position
float
clear
自身屬性
width
height
margin
padding
border
background
文本屬性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

附錄二 CSS精靈

CSS精靈原理以及應用
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。
該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
一個簡單的例子：
一張圖片作出一個按鈕的三個狀態
一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active <a class="button" href="#">鏈接</a>
加入右側的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標滑過、鼠標點擊的狀態。則可以使用CSS進行定義。

a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定義狀態*/
 text-indent:-2015px; /*隱藏文字*/
 background-image:url(button.png); /*定義背景圖片*/
 background-position:0 0;
 /*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定義鏈接的滑過狀態，此時顯示的為中間部分，向下取負值*/
}
a:active {
 background-position:0 -132px; 
 /*定 義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/
}

更多的CSS雪碧，圖片更復雜，背景定位更精確。可能會用到大量的數值
如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
優點：
減少加載網頁圖片時對服務器的請求次數
可以合并多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
提高頁面的加載速度
sprite技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNGsprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由于一張圖片即可，所以不會出現這種現象。
不足：
CSS雪碧的最大問題是內存使用
影響瀏覽器的縮放功能
拼圖維護比較麻煩
使CSS的編寫變得困難
CSS 雪碧調用的圖片不能被打印
錯誤得使用 Sprites 影響可訪問性

附錄三一些tips解決方案

頁面優化實踐

從下面的幾個方面可以進行頁面的優化：
減少請求數
圖片合并
CSS文件合并
減少內聯樣式
避免在 CSS中使用 import
減少文件大小
選擇適合的圖片格式
圖片壓縮
CSS 值縮寫（Shorthand Property)
文件壓縮
頁面性能
調整文件加載順序
減少標簽數量
調整選擇器長度
盡量使用CSS 制作顯示表現
增強代碼可讀性與可維護性
規范化
語義化
模塊化

寫DIV+CSS 的一些常識

不要使用過小的圖片做背景平鋪
這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，需要 200200=40, 000 次，占用資源
無邊框
推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，占用資源
慎用通配符
所謂通配符，就是將CSS 中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。
CSS的十六進制顏色代碼縮寫
習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優孰劣，有待仔細考證。
樣式放頭上，腳本放腳下。不內嵌，只外鏈
堅決不用 CSS表達式
使用引用樣式表，而不是通過@import 導入。
一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優化。
千萬不要在 HTML中縮放圖片，一者不好看，二者占資源。
正文字體最好用偶數
12px、14px、16px，效果非常好。特例，15px。
block、ul、ol等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。
段落之間，至少要有一倍行距
強行指定某些元素的 line-height，正文 1.6倍于文字大小，標題1.3倍。
中文標點用全角
英文夾雜在中文中，左右空格，半角。
中文字體的粗體和斜體，遠離較好

常用代碼片段

雅虎工程師提供的CSS初始化示例代碼【僅供參考】
可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}

mobile meta標簽

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

表格不被撐開

table-layout: fixed; word-break: break-all;;border-collapse: collapse

不設寬高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>

透明度的兼容代碼

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

文字溢出點點省略

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

清除浮動的幾種方法
方法一：投機取巧法 – 不推薦
直接一個放到當作最后一個子標簽放到父標簽那兒，此方法屢試不爽，兼容性強
方法二：overflow + zoom方法 –不推薦
.fix{overflow:hidden; zoom:1;}
此方法優點在于代碼簡潔，涵蓋所有瀏覽器
方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
clearfix只應用在包含浮動子元素的父級元素上

.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}

更多代碼片段詳情
實用的60個CSS代碼片段

一些總結

自動繼承屬性：
color
font
text-align
list-style
…
非繼承屬性：
background
border
position
…
具有破壞性的元素：
float
display:none;
position:absoblute/fixed/sticky;
具有包裹性的元素：
display:inline-block/table-cell
position:absolute/fixed/sticky
overflow:hidden/scroll
消除圖片底部間隙的方法
圖片塊狀化-無基線對齊
img{display:block;}
圖片底線對齊
img{vertical-align:bottom;}
行高足夠小 - 基線位置上移
.box{line-height:0;}

一些概念

BFC
BFC全稱”Block Formatting Context” 中文為“塊級格式化上下文”
記住這么一句話：BFC元素特性表現原則就是，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
優雅降級(graceful degradation)
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
漸進增強 progressive enhancement：
是在瀏覽器開啟JavaScript功能后，如果瀏覽器版本不支持某些 JavaScript 能力，我們解決這種問題的方式
平穩退化
是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；

學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！

ss聲明順序優先級

CSS屬性指定方式：

默認缺省

外聯樣式

內聯樣式

行內樣式

順序：

缺省<外聯樣式<內聯樣式<行內樣式

id>class

多類情況下屬性越靠后優先級越高

說明:

缺省設置就是瀏覽器的缺省設置，不同的瀏覽器對元素的默認規則是不一樣的

外部樣式就是在head內部引用的樣式文件，比如：

	<link type=”text/css” rel=”sheetstyle” href=”xxx.css”/>

行內樣式指的在元素標簽內直接指定樣式，比如:

	<div style=”background-color:red”></div>

小提示:

要在行內對一個元素同時指定多個樣式屬性的時候，我們可以把指定的屬性用“：”隔開，比如：
<div style=”background-color:red;width:100px;heigth:50px”></div>
最后一個元素值的”;”可有可無

多類覆蓋優先級:

比如：

	<div class=”fl fr”></div>

Css文件中寫:

	div{
	width:100px;
	weight:50px;
	background-color:red;
	}
	.fl{
	float:left;
	}
	.fr{
	float:right;
	}

那么這個div到底向右浮動還是向左浮動？

答案是向右浮動，為什么是向右浮動？新手一般會認為，class=”fl fr”,fr在后面嘛，但事實是：在多個類指定的屬性的時候，屬性生效的優先級不跟指定屬性的類名先后順序有關，而是跟css文件里面的.fl和.fr先后順序有關，我們把css里面的.fl屬性聲明和.fr屬性聲明調換一下位置,div的浮動屬性就變成左浮動了!

我們得出的答案是:屬性聲明越靠后面，它的優先級越高！

進一步探討:當一個元素指定了多個類名，多個類名里面的屬性聲明沖突了優先級誰高?

我們把css文件里面的fl和fr里面都加上font-size屬性:

	.fl{
	Float:left;
	Font-size:24px;
	}
	.fr{
	Float:right;
	Font-size:12px;
	}

效果是:里面的字體是12px，再次驗證了屬性聲明越靠后，優先級越高!

再進一步探索，如果我們在同一個類聲明里面聲明了兩個元素屬性那？

比如:

	.fl{
	Font-size:24px
	Font-size:12px;
	}

結果是:

瀏覽器會報錯，說”瀏覽器包含這個屬性規則”(打開firebug工具可以看到)
優先級依然遵循了屬性聲明越靠后，優先級越高!字體的大小是12px

ID優先，類靠后

比如：

<div id=”myid” class=”fr”></div>

我們在css文件里面指定:

#myid{
Float:left;
}
.fr{
Float:right;
}

雖然fr的float聲明靠后，但是id屬性優先啊，所以，這個div打死都不會向右浮動！

Id class 行內樣式并存

例如：

<div id=”myid” class=”fl lr”style=”float:right”></div>

那么這個div是向左浮動還是向右浮動?

答案是向右，因為不管是id和class，都是內聯樣式，行內樣式優先級是高于內聯樣式的

關于css樣式優先級順序到此結束

你們的關注是我持續更新的動力，求個關注！

先，我們一般都是通過各種app，瀏覽器上各大平臺制作我們的內容，這些內容最后一般都是通過html，css以及javascript處理，并且最終通過瀏覽器的渲染進程來展示出來。那這個背后的邏輯和原理是怎么樣的呢？

HTML 解析：

瀏覽器開始加載 HTML 文檔，并按照從上到下的順序解析文檔內容。

遇到 <script> 標簽時，可能會暫停 HTML 解析，開始 JavaScript 解析。

JavaScript 解析和執行：

瀏覽器引擎解析 JavaScript 代碼，將其轉換為可執行的機器碼。

JavaScript 可以直接修改 DOM（文檔對象模型）和 CSSOM（CSS 對象模型）。

DOM 構建：

HTML 解析器構建 DOM 樹，表示文檔的層次結構，即文檔對象模型。

JavaScript 可以在這個階段修改 DOM 樹的結構。

CSS 解析和構建 CSSOM：

瀏覽器解析 CSS 樣式表，構建 CSS 對象模型（CSSOM）。

CSSOM 描述了文檔中所有元素的樣式信息。

Render 樹構建：

DOM 樹和 CSSOM 樹結合，形成渲染樹（Render Tree）。

渲染樹只包含需要顯示的節點和其樣式信息。

布局（Layout）：

瀏覽器根據渲染樹的信息，計算每個節點在屏幕上的確切位置和大小。

繪制（Painting）：

瀏覽器使用繪制命令將每個節點繪制到屏幕上。

重排和重繪：

當 DOM 樹或 CSSOM 樹發生變化時，可能觸發布局和繪制的重新計算，這就是重排（Reflow）和重繪（Repaint）。

重排涉及到重新計算布局，而重繪只涉及到樣式的更新。

回流（Reflow）和重繪（Repaint）優化：

瀏覽器會盡量優化回流和重繪的開銷，例如通過合并多次的操作、使用異步更新等方式。

在整個過程中，JavaScript、CSS 和 HTML 相互作用，而瀏覽器通過這些步驟最終將網頁呈現給用戶。這個過程是即時的，用戶可以在不同階段看到頁面的渲染效果。因此，為了提高性能，開發人員需要注意減少不必要的回流和重繪，以及合理使用異步操作等策略。

在線咨詢

上一篇：文件各種上傳，離不開的表單
下一篇：html表格實現固定table的表頭和第一列內容

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商