刚入门的前端菜鸟的学习心得（1）

         作为一名刚步入前端的小选手（正在向初入前端的级别靠近），首先在这里我要说一下近段时间来自己的前端开发的体会和心得。

                                    1

        从开始进行前端开发主要是实现静态页面为主，也就是HTML+CSS技术，感触最深的是一下几点：

        1.css样式的命名

        css样式的命名从功能上影响不了页面功能，但是当一个页面的布局、元素多了，样式复杂了就会这样一个感觉：不知道给这个样式取个什么名字好。名字简单了容易跟其他名字重复造成样式冲突，名字复杂了代码显得过于冗余。而且一个好的命名可以让开发人员一看就明白这部分的样式是定义的哪个元素，比如菜单栏一波命名为menu，而作为一名新手可能对这些已经约定俗成的命名了解的太不清楚，在更改别人的css代码时就容易产生冲突或者要花费更多的时间去找样式，下面是我在网上寻找的一个命名规范的一部分的整理：

        2.怎么去设定样式比较好。举个例子，如下面代码：

         

               

• 11
  //ul li：nth-of-type(1)

             

• 22
  //ul li：nth-of-type(2)

       

        现在若要给每一个li写一个样式现在有两种写法：

      （1）第一种写法也是我当时看见别人的代码的写法：使用“ul li：nth-of-type()“的方法，ul li：nth-of-type(1)表示第一个li，ul li：nth-of-type(2)表示第二个li。后面我用这种方法写了很多类似的代码，这种写法不需要在HTML上对元素进行设置class。但是在后面发现了一个很严重的问题，当我们需要在中间加入一个li的时候：

     

• 11
        //ul li：nth-of-type(1)

     

• aa
      //ul li：nth-of-type(2)

   

• 22
      //ul li：nth-of-type(3)



        这个时候就麻烦了，先手要把之前的ul li：nth-of-type(2)改成ul li：nth-of-type(3)；如果下面有很多的li那么多有的都要一个一个改，这种代码维护起来不太方便不够灵活。

        （2）直接给每个li写一个class，不同li样式就给不同的命名：

       

     

       这样在增加li或者更改样式时极为方便，目前也是我现在常用的方法，当然这种方法在class命名上就要多想想名字了。

       3.最外一层元素在没有必须固定高度时尽量不要固定高度设置为自适应，比如：

     

             

           

            ......

     

        如果固定了div的高度（只有一行的高度）那么多了当一行放不下时就会自动换行，这时div高度不是自适应的就会自动挤到div外影响下面的元素布局，如果div的高度设置的很高避免里面的元素超出，但是里面元素不够多时就会空白一片界面效果太差了。

       这里我要说一下高度自适应的代码：height：auto；overflow：hidden；设置这两个属性值就可以自适应了（这个在我最开始写css的时候确实不知道，只知道auto是自适应但是有时候并不起作用，后来有高人指导才知道，毕竟新手）。










                                 2

       在很多复杂的页面会涉及到一些元素定位的问题，之前而我在这些定位属性上也是没有弄太懂，这里我找到了一些关于定位元素的一些总结：

      position:relative/absolute/fixed/inherit/static


      relative（相对定位）：


                  a、不影响元素本身的特性；

                  b、不使元素脱离文档流；

                  c、如果没有定位偏移量，对元素本身没有任何影响；

                  d、相对于其正常位置进行定位


      absolute（绝对定位）：

                 a、使元素完全脱离文档流；

                 b、使内嵌支持宽高（比如span本来是内联元素，不支持宽高，现在支持了）；

                 c、块属性标签内容撑开宽度；

                 d、如果有定位父级（不论是相当定位还是绝对定位）相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；

                 e、相对定位一般都是配合绝对定位元素使用；（相对定位一般都是给绝对定位当干爹用的）

fixed：

                与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位（例如网页右下角的二维码）

层级问题

               需要那层显示出来，就加一个 z-index:1；

        个人认为relative定位和fixed是最简单的，一个是在默认的位置进行偏移，而fixed定位相对整个页面定位，无论元素写在什么位置fixed定位的元素只针对整个页面的位置。


        absolute稍微复杂点了，最主要的就是如果有定位父级（不论是相当定位还是绝对定位）相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移，所以这个时候还要注意父级的定位。














                                   3


        通过jQuery将静态页面变的可以进行实时交互，动态的页面。目前我对jQuery一些基本方法用法算是了解当时很系统很复杂的方法就没有深入的了解了，所以后面的计划是对jQuery进行一个系统的学习，通过《锋利的jQuery2》开始我的jquery之旅，目前刚开始还没有比较深刻的体会，后面慢慢在加强的过程中渐渐体会（至少先要达到初入前端的级别）。