web学习方法总结

 

我的一些学习技巧

目录
• 单词怎么记忆？
• 笔记怎么使用？
• 关于框模型的padding与margin与border
• 关于布局的问题

1、单词怎么记忆？

我建议使用有道词典里面的生词本进行记忆，具体使用步骤如下：

1. 下载安装有道词典。
2. 安装后，词典会自动开启鼠标取词与划词翻译功能，如果没有的话，打开有道词典右下角，进行设置。
3. 在取词的时候，在自动弹出的翻译框内，点击添加到生词本。
4. 生词本会在一定的时间内弹出窗口，提醒我们记忆单词。

2、笔记怎么使用？

• 我自己的方法是把自己所有的笔记文件，集中放在一个文本文件中，当遇到不熟悉的有遗忘可以直接在文本文档中使用Ctrl+F的搜索，快速定位到需要的笔记处。

• 常用的快捷键除了Ctrl+C复制Ctrl+V粘贴
  • Ctrl+A全选
  • Ctrl+X剪切
  • Ctrl+F检索
  • Ctrl+H替换
  • Ctrl+Z撤销
  • Shift+方向键；实现选取
  • Shift+Home选取到行头；Home行首；Ctrl+Home页头
  • Shift+End选取到行尾；End行首；Ctrl+End页头

3、margin？padding？border？box-sizing？

1. 框宽度 = padding + border + width
   与margin半毛钱关系没有
2. 不改变框的大小，实现边框加粗
   
   • 我们经常要实现这种效果
        
     
     

     我的实现方式

     巧用padding与border互换

     width:150px;
     height:150px
     border:20px;
     padding:50px;
      
     width:150px;
     height:150px;
     border:50px;
     padding:20px;
     
     
     width:100%;
     height:100%
3. 我对margin的理解是：margin只用于定位
4. 做布局微调的时候，尽量使用单边调整，避免影响到其他的边，减少错误发生

3、布局的浮动问题

我的几点建议
• 1.刚开始的时候不熟悉浮动的话，可以在整个大布局的时候给全局div加上边框，方便自己识别
  div{border:1px solid #000}
• 2.在做小范围布局的时候，设置div的最小行高属性div{min-height:50px}
• 3.注释和代码缩进是个好东西，现在知道不一定过些天你还记得哪个开始标签对应哪个结束标签，养成好习惯。
• 4.当理解浮动布局后，就可以只用终极大招div:after{content:"";display:block;clear:both} 一劳永逸，再也不担心我页面错乱
• 5.同一行的浮动元素，最好给定同样的高度，例如ul里面的li进行左浮动，就直接给出一定的高度li,不给的话，里面元素高高低低，参差不齐，会影响到下一排元素的浮动效果
• 6.在浮动的时候，确定父元素的宽度后，可以给内部浮动元素给百分比宽度，减少不必要的计算
• 7.我个人建议先布局，后再填充内容当页面很庞大的时候，可以新建一个页面，把局部内容

 Thanks!