前端知识点总结

                之前因为我是20+的，可能前端的知识点有些可能遗忘了，但是这次考核大一，不仅仅是考核他们，而且也把有些丢掉的知识点也捡回来一点！！！

        第一次考核页面，其实最重要的就是整体的页面，我大一的时候学长学姐就一直扣我们的页面。

        1、居中

    这个最常见的，页面布局，一个大div设置成100%，里面嵌套一个小div， margin：0 auto;

小div的话就是，可以设宽，但是每个电脑屏幕的分辨率不同。所以设宽的话在其他电脑上面有不同的效果。 所以这时候就要用到多媒体查询这个功能了，其实每个官网都有这个功能，所以这个也是要去学会的。

        2、浮动

        浮动的话，我看很多人都用到了，但是没有用到他的精髓，浮动这一块，是个重点，因为里边有个问题就是高度坍塌，这个就是子元素设浮动，但是父元素没有设高，父盒子就消失了。

解决方法：

                （1）、就是给父元素设高，但是因为拓展性不好，所以我们不使用这个方法

                （2）、在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。

<div id="wrap">
	    <div id="inner"></div>
	    <div style="clear: both;"></div>
	</div>

	#wrap{
	      border: 1px solid;
	}
	#inner{
	      float: left;
	      width: 200px;
	      height: 200px;
	      background: pink;
	}

                （3）、伪元素清除浮动

<div id="wrap" class="clearfix">
    <div id="inner"></div>
</div>

      #wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }
      /*开启haslayout*/
      .clearfix {
        *zoom: 1;
      }
      /*ie6 7 不支持伪元素*/
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        height:0;
        line-height:0;
        visibility:hidden;//允许浏览器渲染它，但是不显示出来
      }

                （5）、给父元素使用overflow:hidden;（但是这个如果多出来的部分就不会显示了）

        2、还有背景图片的固定

        因为背景图片，有个属性就是background-attachment:fixed;这个是固定背景图片里边属性，就是scroll就是跟着滚动。

                图片： 

                        object-fit ：contain；

                个人理解：保持原有尺寸比例，使图片的宽度完整的显示，高度自动缩放

                         object-fit ：none；

               个人理解：图片原有宽高不变，超出部分被剪掉，保留下来的内容使图片的正中央。

                          object-fit ：cover；        

                个人理解：保持原有尺寸比例。高度铺满容器，宽度等比缩放，超出部分被剪掉。                

                      object-fit ：  scale-down
个人理解：保持原有比例。当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致。