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

简言

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

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

个人对学习方法的理解

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

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

代码的知识点

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

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

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

你可能感兴趣的:(针对自己一个月学习前端代码的总结)