针对自己一个月学习前端代码的总结

简言

本文的主要内容是关于这一个月以来的学习代码的个人总结，分为以下几个部分：

• 个人对学习的理解
• 一个月内代码的知识点（这部分内容较多）
• 一些技巧

个人对学习方法的理解

论总结的重要性，我就信这一句话，言简意赅。

学习就是形成自己的知识体系，而总结是形成个人对知识理解的不可或缺的方法。

代码的知识点

*写的内容可能会有很多大白话，内容也可能杂乱无章，甚至可能有很多错误，毕竟我只是一只前端渣 *

以下的内容有引自其他博客的文章内容

HTML方面

1、命名（标签什么的看手册就好，写多了就记下了，以下是一些命名的参考）

标题: 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

页面结构
容器: 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

** 2、块级元素与行内元素**

• 行内元素：（display：inline）

  和其他元素都在一行上；
  高，行高及外边距和内边距不可改变；
  宽度就是它的文字或图片的宽度，不可改变
  内联元素只能容纳文本或者其他内联元素

• 常见的行内元素
  
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 – 下划线


• 块级元素：（display:block）

每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。

• 常见的块级元素

  
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 – 无序列表


css

1、盒子模型

margin：盒子外边距
border：盒子边框
padding：盒子内边距
content：盒子内容

默认情况下box-sizing:content-box;css当中设置的盒子width、height就是值content的宽高,所以整个元素的的实际大小=border+padding+content width/height；
当box-sizing：border-box；css当中设置的盒子width、height=border+padding+contentwidth/height;
更多的详细情况参考大漠老师的box-sizing http://www.w3cplus.com/content/css3-box-sizing

2、vertical-align

对于vertical-align，只有两点要说的：
1.设置相邻元素的对齐方式（例如图片与文字对齐，文字与小标对齐等）
2.对display：inline-block（table、table-cell）的元素生效。
更加具体的理解请看张鑫旭大神的文章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垂直居中

// postion margin
div{
position: absolute;
border: 1px solid #000;
top: 50%;
left: 50%;
//一半的宽高
margin-top: -100px;
margin-left:-100px;
width: 200px;
height: 200px;
}



// 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;
}