小总结

阶段总结

 

    来皇包车将近4个月了，和4个月之前相比，确实提升不少，接触了很多新的东西，也对以前知道的知识加深了理解。包括打包工具webpack，sass，模板引擎juicer，git等。以下是这段时间来总结的一些东西。

 

HTML和CSS

    HTML布局要清晰，简洁，方便维护、修改，避免多余的或者耦合过多的代码；命名要规范，语义化，方便自己和他人阅读，样式一般用class，要加js的用id,class里和交互有关的一般用J-**表示。

垂直居中的几种方式：

水平居中很容易，margin： 0 auto； 或者 text-align: center； 但是垂直居中就没那么简单了，以下是我知道的几种方式：

     1.父容器：display： table；子容器：display: tabel-cell; vertical-align: middle;

 

     2.父容器：position: relative; 

       子容器：width：200px; height: 200px; position： absolute；top: 0; left: 0; bottom: 0; right: 0; margin: auto;

绝对定位上下左右0的时候，会自动计算margin值。

 

     3.父容器：position: relative; 

       子容器：width：200px; height: 200px; position： absolute；top: 50%; margin-top: -100px; left: 50%; margin-left:-100px;

这两种子容器需要指定宽高，如果不想指定宽高，可以使用transform: translate(-50%,-50%);

即： position： absolute；top: 50%; left: 50%; transform: translate(-50%,-50%);

   

     4.利用flex

    父容器：display: flex; justify-content:  center; align-items: center;

flex方式在UC和一些旧的浏览器上不支持，需要写的时候加上一些旧的语法，可以利用autoprefixer自动加上；

 

display：inline-block间隙问题 

    display:inline-block，使用这个属性后，元素之间会有几个像素的间隙，如何去除这个间隙呢，

第一种方法：给它的父元素设置font-size:0; 子元素字体正常；

第二种方法：去掉HTML中的空格；

第三种方法：设置letter-spacing和word-spacing，margin。

 

伪类元素

    伪类元素不会出现在文档流中，但可以用它做很多事情，比如常见的小三角。有时候表单右边的小三角可以用伪类元素去做，但这时候给input(type=text) 添加伪类元素是加不上的（但是type=checkbox在chrome下可以，在火狐下不行），解决办法可以在input外面加一层span，或者label，然后在span/label 上添加伪类。

可以利用伪类给修改单选（type=radio）、多选（type=checkbox）的默认样式。把input 的透明度设为0；在label上加伪类，给伪类设背景图片。

 

 

 

Webpack

 

    对于复杂的页面，通常有很多代码和文件，为了便于开发，一个很好的方法就是进行模块化，在本地开发的时候，把各个组件，文件放在相应的目录下，利用webpack进行模块打包，给定一个主文件，它会自动查找该文件所有依赖的文件，并通过不同的loaders进行处理，最后打包为一个浏览器可以识别的JavaScript文件，这样我们在页面里就不需要把一下引入十几个js 文件了，

 

git

 

    git是最受欢迎的分布式版本控制工具。它和SVN的区别是：

SVN有一个中央服务器，完整的版本库放在这个中央服务器上，所以我们需要每次都从中央服务器上拉取最新的代码，开发完再推送给中央服务器，当然这就必须要有网才可以进行。而git不同的是，每个用户本地都有一个完整的版本库，所以我们不需要联网就可以在本地提交，所以实际上每个用户都可以是一个中央服务器，只不过在实际开发中我们为了方便大家交换各自的修改，会有一个充当中央服务器的主机。