避免踩坑，這才是為知筆記導入印象筆記數據的正確姿勢

常習慣，會記錄一些生活瑣事、學習總結、工作經驗、網頁摘抄等。所以經常用到筆記類軟件，而且需要跨平臺編輯閱讀。

印象筆記

印象筆記(包括國際版Evernote)用的比較早，積累的記錄多，每隔一段時間都要反復篩選精簡，現在還有將近500條。最近在體驗為知筆記，因為印象筆記沒有官方Linux版本。為知筆記具備大多數我常用功能，包括跨平臺同步、支持Markdown、代碼插入、Web編輯和網頁剪藏。

為知筆記

為知筆記支持Windows、Linux、macOS、iOS、Android客戶端以及Web操作。

PC端下載

移動端下載

把印象筆記的記錄導入到為知筆記，這個過程走了不少彎路，相信不少人也為此頭疼。記錄一下，免得后期重蹈覆轍，也希望有同樣需求的人，看到此文，避免踩坑。官方Linux版本沒有導入其他筆記本數據的功能，只能導入單個筆記。采用Windows版本的為知筆記可以一次導入印象筆記所有記錄。

第一步、首先打開為知筆記Windows版本，打開導入功能，具體操作如下：

菜單---文件---導入Evernote

第二步：這里發現導入需要的文件類型是*.exb

而印象筆記導出的類型可選為.enex, .html, .mht等。

別慌，這里就是個坑。實際上并不需要印象筆記導出來。直接去印象筆記的數據保存目錄，以我本機為例：

C:\Users\Administrator\Yinxiang Biji\Databases

這里有一個印象筆記用戶名為文件名，后綴為.exb的文件，直接拿著個文件導入到為知筆記即可。

第三步、開始同步。過程也挺快，500個筆記，幾分鐘就完成導入，甚至開始同步了。

導入數據

為了不引戰，不評論各個筆記軟件的好壞優劣，個人愛好不同，寫作重點不同，使用體驗也不一樣。它們都是同類軟件中的佼佼者。

你是用哪一個軟件呢？說說你的選擇。

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

附錄一 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前端最新入門資料，一起學習，一起成長！

二部分 CSS

第八章 css基礎知識

css基礎知識：
css樣式表的定義
css：（Cascading Style Sheets）層疊樣式表；
分類及位置：內部樣式-head區域style標簽里面
外部樣式-link調用
內聯樣式-標簽元素里面
css內的注釋：/*注釋內容*/
css樣式表的語法
CSS規則由兩個主要的部分構成：要添加樣式的盒子名或者標簽名、和要添加的樣式。
盒子名或者標簽名{屬性:值;}
CSS中幾種顏色的表示方法
用顏色名表示
有17個預先確定的顏色，它們是
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, and yellow
用十六進制的顏色值表示(紅、綠、藍)
#FF0000或者#F00
用rgb(r,g,b)函數表示
如：rgb(255,255,0)
用hsl(Hue,Saturation,Lightness)函數表示（色調、飽和度、亮度)
如：hsl(120,100%,100%),色調0代表紅色，120代表綠色，240代表
藍色
用rgba(r,g,b,a)函數表示
其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
用hsla(Hue,Saturation,Lightness,alpha)函數表示
色調、飽和度、亮度、透明度
例子

 <div style="position:absolute;top:0px">
	<div style="background-color:gray;">background-color:gray</div>
	<div style="background-color:#F00;">background-color:#F00</div>
	<div style="background-color:#ffff00;">background-color:#ffff00</div>
	<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
	<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
	<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
	<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
</div>

內部樣式表
當單個頁面需要設置樣式時，就應該使用內部樣式表。
使用 <style></style>標簽在文檔<head></head>里面定義內部樣式表

<head>
 <style type="text/css" >
 p{color:red;}
 </style>
</head>

從外部引入到樣式分為兩種：（注意寫在head標簽里面）
當樣式需要應用于很多頁面時，就需要用到外部樣式表，首先需要創建一個css文件，然后引用到我們的頁面中。
Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式： <style type="text/css">@import url("css.css");></style>
內聯樣式表（優先級高）
寫在標簽里面的樣式
如：<p style="color:red;"></p>
表示給p標簽里面的文字顏色設置為紅色
區別：外鏈樣式與導入樣式
link標簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
加載的順序的區別，link加載的css時，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成后才加載。
兼容性的區別，因@import``CSS2.1才特有的，所以對于不兼容CSS2.1的瀏覽器來說，無效。
在樣式控制上(比如動態改變網頁的布局時,使用javascript操作DOM)的區別，此時@import就無能為力了。

樣式的優先級補充
相同權值情況下，CSS樣式的優先級總結來說，就是——就近原則（離被設置元素越近優先級別越高）：
內聯樣式表（標簽內部） > 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）
權值不同時，瀏覽器是根據權值來判斷使用哪種css樣式的，哪種樣式權值高就使用哪種樣式
層疊優先級是:
瀏覽器缺省< 外部樣式表 < 內部樣式表 < 內聯樣式
其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優先級是:
瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器< 內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 < 內聯樣式…共12個優先級
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優先級順序為：
一個元素同時應用多個class，后定義的優先（即近者優先），加上!important者最優先！

第九章 css選擇器(上)

css選擇器：
class類選擇器可以重復利用
id選擇器唯一
標簽選擇器
什么是選擇器：css選擇器就是要改變樣式的對象
選擇器{屬性:值;屬性:值;}
標簽選擇器：頁面中所有的標簽都是一個選擇器 p{color:red;}
ID選擇器
選擇id命名的元素以 # 開頭 #p1{color:#0f0;}
類選擇器
class選擇器，選擇clas命名的元素以.開頭 .first{color:#00f;}
css代碼寫完后上線前要經過壓縮處理
本地和服務器分兩個css版本（備份）
壓縮后注釋都清除，空間體積減少
群組選擇器
選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
包含選擇器
選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
span{color:red;}
屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;} 選擇包含title的a標簽
a[title][href]{color:red;} 選擇包含title和href的a標簽
> + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當于包含元素）
p > span{color:red;}
相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
p + span{color:red;}

第十章 css選擇器(下)

<a>偽類選擇器
a:link {color:#FF0000;} / 未訪問的鏈接 / （只用于a標簽）
a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用于a標簽）
a:hover {color:#FF00FF;}/* 鼠標移動到鏈接上
*/（可和其他標簽結合一起用）
a:active {color:#0000FF;} / 選定的鏈接 /
注意
偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha
輸入偽類選擇器（針對表單）
input:focus{color:red;} / 鍵盤輸入焦點 /
其他偽類選擇器
p:first-child{color:red;} /* 第一個p */
:before 在元素之前添加內容。
:after 在元素之后添加內容。
css優先規則
內聯樣式表-> ID 選擇器—> Class 類選擇器->標簽選擇器

第十一章背景屬性

背景屬性：
背景的添加：
背景顏色的添加:
background:red;
backgronnd-color:red;
背景圖片的添加：
background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景的平鋪
什么是平鋪？平鋪就是圖片是否重復出現
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認為完全平鋪
背景圖片的定位
背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現
background-position的取值可為英文單詞或者數值和百分值。
background-positon的英文單詞取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon的數值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景圖片的大小
背景圖片的大小可以通過屬性background-size來設置background-size的取值可為數值和百分值。
background-size的數值取值
background-size:x y;
background-size的數值取值
background-size:x% y%;
背景圖片的滾動
背景圖片是否隨著內容的滾動而滾動由background-attachment設置
background-attachment:fixed; 固定，不隨內容的滾動而滾動
background-attachment:scroll; 滾動，隨內容的滾動而滾動

第十二章文字文本屬性

css文字文本屬性：
文字屬性
color:red; 文字顏色
font-size:12px; 文字大小
font-weight:“bold” 文字粗細(bold/normal)
font-family:“宋體” 文字字體
font-variant:small-caps小寫字母以大寫字母顯示
文本屬性
text-align:center; 文本對齊(right/left/center)
line-height:10px; 行間距(可通過它實現文本的垂直居中)
text-indent:20px; 首行縮進
text-decoration:none;
文本線(none/underline/overline/line-through)
letter-spacing: 字間距

第十三章盒子模型

盒子模型
盒子模型就是一個有高度和寬度的矩形區域
所有html標簽都是盒子模型
div標簽自定義盒子模型
所有的標簽都是盒子模型
class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標識單獨的唯一的元素。
盒子模型的組成
盒子模型組成部分：
自身內容：width、height 寬高
內邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin外邊距
內容+內邊距+邊框+外邊距=面積
border 邊框
常見寫法 border:1px solid #f00;
單獨屬性：
border-width:
border-style:
dotted 點狀虛線
dashed（虛線）
solid（實線）
double（雙實線）
border-color (顏色)
padding 內邊距
值：像素/厘米等長度單位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下左右
padding:10px 10px 10px; 上左右下
padding:10px 10px 10px 10px; 上右下左（設置4個點–>順時針方向）
單獨屬性：
padding-top:
padding-right:
padding-bottom:
padding-left:
當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并

補充盒子模型內容

標準盒子模型
盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型

從上圖可以看到標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content部分不包含其他部分
IE盒子模型

從上圖可以看到 ie盒子模型的范圍也包括 margin、border、padding、content
和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding
IE盒子模型width = padding+border+內容
標準盒子模型 = 內容的寬度（不包含border+padding）
例：
一個盒子的 margin為 20px，border 為 1px，padding為 10px，content 的寬為 200px、高為 50px，假如用標準 w3c 盒子模型解釋，那么這個盒子需要占據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px
那應該選擇哪中盒子模型呢？當然是“標準 w3c 盒子模型”了。怎么樣才算是選擇了“標準 w3c盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype 聲明。
假如不加doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 ie瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff會采用標準w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。
反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

用 jquery 做的例子來證實一下

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標準w3c盒子模型”。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標準w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標準 w3c盒子模型”
所以為了讓網頁能兼容各個瀏覽器，讓我們用標準 w3c 盒子模型
擴展
學會使用box-sizing布局

第十四章塊元素、行元素與溢出

基本概念
塊級元素：默認情況下獨占一行的元素，可控制寬高、上下邊距；
行內元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距
行塊轉換
display:none; 不顯示
display:block; 變成塊級元素
display:inline; 變成行級元素
display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列
溢出
overflow:hidden; 溢出隱藏
overflow:scroll; 內容會被修剪，瀏覽器會顯示滾動條
overflow:auto; 如果內容被修剪，則產生滾動條
文本不換行：white-space:nowrap;
長單詞換行：word-wrap:break-word;
行內元素和快級元素小結
一、塊級元素：block element
每個塊級元素默認占一行高度，一行內添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素；
塊級元素一般作為容器出現，用來組織結構，但并不全是如此。有些塊級元素，如只能包含塊級元素。
DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。
二、行內元素：inline element
也叫內聯元素、內嵌元素等；行內元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母之間橫向排列，到最右端自動折行。
三、block（塊）元素的特點:
①、總是在新行上開始；
②、高度，行高以及外邊距和內邊距都可控制；
③、寬度缺省是它的容器的100%，除非設定一個寬度。
④、它可以容納內聯元素和其他塊元素
四、inline元素的特點
①、和其他元素都在一行上；
②、高，行高及外邊距和內邊距不可改變；
③、寬度就是它的文字或圖片的寬度，不可改變
④、內聯元素只能容納文本或者其他內聯元素
對行內元素，需要注意如下:
設置寬度width 無效。設置高度height無效，可以通過line-height來設置。設置margin
只有左右margin有效，上下無效。
設置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。
五、常見的塊狀元素
address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是CSS layout的主要標簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1 – 大標題
h2 – 副標題
h3 – 3級標題
h4 – 4級標題
h5 – 5級標題
h6 – 6級標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容
noscript – 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol – 有序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 無序列表
六、常見的內聯元素
a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
bdo – bidi override
big – 大字體
br – 換行
cite – 引用
code – 計算機代碼(在引用源碼的時候需要)
dfn – 定義字段
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
kbd – 定義鍵盤文本
label – 表格標簽
q – 短引用
s – 中劃線(不推薦)
samp – 定義范例計算機代碼
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
七，可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
applet - java applet
button - 按鈕
del- 刪除文本
iframe - inline frame
ins - 插入的文本
map - 圖片區塊(map)
object - object對象
script - 客戶端腳本
八、行內元素與塊級元素有什么不同
區別一：
塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度
行內：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
區別二：
塊級：塊級元素可以設置寬高
行內：行內元素不可以設置寬高
區別三：
塊級：塊級元素可以設置margin，padding
行內：行內元素水平方向的margin-left; margin-right;
padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區別四：
塊級：display:block;
行內：display:inline;
替換元素有如下：（和img一樣的設置方法）
<img>、<input>、<textarea>、<select>
<object>都是替換元素，這些元素都沒有實際的內容
可以通過修改display屬性來切換塊級元素和行內元素

第十五章定位

static靜態定位（不對它的位置進行改變，在哪里就在那里）
默認值。沒有定位，元素出現在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。
fixed固定定位（參照物–瀏覽器窗口）—做彈窗廣告用到
生成固定定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規定。
relative（相對定位）（參照物以他本身）
生成相對定位的元素，相對于其正常位置進行定位。
absolute（絕對定位）(除了static都可以，找到參照物–>與它最近的已經有定位的父元素進行定位)
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 “left", "top", "right" 以及 "bottom" 屬性進行規定
z-index
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
定位的基本思想: 它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
一切皆為框
塊級元素: div、h1或p元素即：顯示為一塊內容稱之為 “塊框“ ;
行內元素: span,strong,a等元素即：內容顯示在行中稱 “行內框”;
使用display屬性改變成框的類型即：display:block; 讓行內元素設置為塊級元素，display:none; 沒有框
相對定位：
如果對一個元素進行相對定位，它將出現在它所在的位置上。
通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動
.adv_relative { position: relative; left: 30px; top: 20px; }
絕對定位：
元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，它的位置相對于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }

第十六章框架

frameset框架：
<frameset> —- 用來定義一個框架；雙標簽
不能和 <body> 一起使用
rows、cols屬性
rows 定義行表示框架有多少行（取值 px/%/ * ）
cols 定義列表示框架有多少列（取值px/ %/ * ）
frame子框架
<frame> —- 表示框架中的某一個部分；單標簽，要跟結束標志
src 顯示的網頁的路徑
name 框架名
frameborder 邊框線（取值 0 / 1）
<noframes>屬性
<noframes> 提供不支持框架的瀏覽器顯示body的內容；雙標簽

<frameset>
 <frame src=“” />
 <frame src=“” />
 <frame src=“” />
 <noframes>
 <body>內容</body>
 </noframes>
</frameset>

<iframe>內聯框架
iframe元素會創建包含另外一個文檔的內聯框架（即行內框架）
允許和 body 一起使用
width 寬（取值 px / %）
height 高（取值 px / %）
name 框架名
frameborder 邊框線（取值 0 / 1）
src 顯示的網頁的路徑

第十七章 css高級屬性

opacity透明屬性
opacity
對于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
對于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值為0-1
對于早期火狐，使用-moz-opacity:值; 值為0-1
所以寫透明屬性時，一般寫法是

 {	
 opacity:0.5;
 filter:alpha(opacity：50);/*0-100*/
 -moz-opacity:0.5;	/*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}

border-radius圓角邊框屬性
向 div 元素添加圓角邊框
border-radius:10px;
box-shadow陰影屬性
box-shadow屬性向框添加陰影效果,后面跟4個參數。
box-shadow:0px 0px 10px #000;
<embed>屬性
是HTML5中新增的標簽,媒體嵌入插件標簽，可以通過<embed>插入音頻或視頻
<embed src=“media/music.mp3” />
格式.mid .wav .mp3等

CSS部分導圖總結

css常見簡寫

在線咨詢

上一篇：在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作
下一篇：6.HTML 標題、段落和文本格式

您的項目需求

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

整合營銷服務商

避免踩坑，這才是為知筆記導入印象筆記數據的正確姿勢

您的項目需求