簡(jiǎn)言
本文的主要內(nèi)容是關(guān)于這一個(gè)月以來(lái)的學(xué)習(xí)代碼的個(gè)人總結(jié)斯撮，分為以下幾個(gè)部分：
- 個(gè)人對(duì)學(xué)習(xí)的理解
- 一個(gè)月內(nèi)代碼的知識(shí)點(diǎn)（這部分內(nèi)容較多）
- 一些技巧
個(gè)人對(duì)學(xué)習(xí)方法的理解
論總結(jié)的重要性有鹿，我就信這一句話利耍，言簡(jiǎn)意賅。
學(xué)習(xí)就是形成自己的知識(shí)體系扯再，而總結(jié)是形成個(gè)人對(duì)知識(shí)理解的不可或缺的方法荚板。
代碼的知識(shí)點(diǎn)
*寫的內(nèi)容可能會(huì)有很多大白話，內(nèi)容也可能雜亂無(wú)章队寇，甚至可能有很多錯(cuò)誤膘掰，畢竟我只是一只前端渣 *
以下的內(nèi)容有引自其他博客的文章內(nèi)容
HTML方面
1、命名（標(biāo)簽什么的看手冊(cè)就好佳遣，寫多了就記下了识埋，以下是一些命名的參考）
標(biāo)題: title
摘要: summary
箭頭： arrow
商標(biāo)： label
網(wǎng)站標(biāo)志： logo
轉(zhuǎn)角/圓角： corner
橫幅廣告： banner
子菜單： subMenu
搜索： search
搜索框： searchBox
登錄： login
登錄條：loginbar
工具條： toolbar
下拉： drop
標(biāo)簽頁(yè)： tab
當(dāng)前的： current
列表： list
滾動(dòng)： scroll
服務(wù)： service
提示信息： msg
熱點(diǎn)：hot
新聞： news
小技巧： tips
下載： download
欄目標(biāo)題： title
熱點(diǎn)： hot
加入： joinus
注冊(cè)： regsiter
指南： guide
友情鏈接： friendlink
狀態(tài)： status
版權(quán)： copyright
按鈕： btn
合作伙伴： partner
投票： vote
左右中：left right center
頁(yè)面結(jié)構(gòu)
容器: container
頁(yè)頭：header
內(nèi)容：content/container
頁(yè)面主體：main
頁(yè)尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁(yè)面外圍控制整體布局寬度：wrapper
左右中：left right center
導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題: title
摘要: summary
功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊(cè)：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)簽頁(yè)：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋：note
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
** 2、塊級(jí)元素與行內(nèi)元素**
-
行內(nèi)元素：（display：inline）
和其他元素都在一行上零渐；
高窒舟，行高及外邊距和內(nèi)邊距不可改變；
寬度就是它的文字或圖片的寬度诵盼，不可改變
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素 常見的行內(nèi)元素
<code>
a – 錨點(diǎn)
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
bdo – bidi override
big – 大字體
br – 換行
cite – 引用
code – 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
dfn – 定義字段
em – 強(qiáng)調(diào)
font – 字體設(shè)定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
kbd – 定義鍵盤文本
label – 表格標(biāo)簽
q – 短引用
s – 中劃線(不推薦)
samp – 定義范例計(jì)算機(jī)代碼
select – 項(xiàng)目選擇
small – 小字體文本
span – 常用內(nèi)聯(lián)容器惠豺，定義文本內(nèi)區(qū)塊
strike – 中劃線
strong – 粗體強(qiáng)調(diào)
sub – 下標(biāo)
sup – 上標(biāo)
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
</code>塊級(jí)元素：（display:block）
每個(gè)塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級(jí)元素后無(wú)法一般無(wú)法添加其他元素（float浮動(dòng)后除外）风宁。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)洁墙，會(huì)在頁(yè)面自動(dòng)換行顯示。
-
常見的塊級(jí)元素
<code>
address – 地址
blockquote – 塊引用
center – 舉中對(duì)齊塊
dir – 目錄列表
div – 常用塊級(jí)容易戒财，也是CSS layout的主要標(biāo)簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1 – 大標(biāo)題
h2 – 副標(biāo)題
h3 – 3級(jí)標(biāo)題
h4 – 4級(jí)標(biāo)題
h5 – 5級(jí)標(biāo)題
h6 – 6級(jí)標(biāo)題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內(nèi)容热监，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
noscript – 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
ol – 有序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 無(wú)序列表
</code>
css
1、盒子模型
margin：盒子外邊距
border：盒子邊框
padding：盒子內(nèi)邊距
content：盒子內(nèi)容
默認(rèn)情況下box-sizing:content-box;css當(dāng)中設(shè)置的盒子width饮寞、height就是值content的寬高,所以整個(gè)元素的的實(shí)際大小=border+padding+content width/height孝扛；
當(dāng)box-sizing：border-box；css當(dāng)中設(shè)置的盒子width幽崩、height=border+padding+contentwidth/height;
更多的詳細(xì)情況參考大漠老師的box-sizing http://www.w3cplus.com/content/css3-box-sizing
2苦始、vertical-align
對(duì)于vertical-align，只有兩點(diǎn)要說(shuō)的：
1.設(shè)置相鄰元素的對(duì)齊方式（例如圖片與文字對(duì)齊慌申，文字與小標(biāo)對(duì)齊等）
2.對(duì)display：inline-block（table陌选、table-cell）的元素生效。
更加具體的理解請(qǐng)看張?chǎng)涡翊笊竦奈恼?a target="_blank" rel="nofollow">http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
3、 利用定位和margin柠贤、定位和transform垂直居中
<code>
// postion margin
div{
position: absolute;
border: 1px solid #000;
top: 50%;
left: 50%;
//一半的寬高
margin-top: -100px;
margin-left:-100px;
width: 200px;
height: 200px;
}
</code>
<code>
// postion transform
div{
position: absolute;
border: 1px solid #000;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
</code>
