css里的一些误区以及常见错误

分享一些前端初学者容易犯的错误以及误区

1.float浮动：

相信很多小伙伴在使用float浮动时遇见过这几个问题：底下的元素“钻”到定义了float元素的下方，这是由于父元素没有设置高度，或者高度为auto状态，由于float不会撑起来父元素，所以才会导致这种情况，那么我们可以通过以下几种方式解决：

1.通过定义一个空的div设置高度来撑起父元素，这种方式简单粗暴，浏览器兼容
性也比较好，但是会造成html方面代码臃肿不优雅。
2.通过父元素设置overflow：hidden或者outo解决
3.通过给跑旁边的一个元素设置clear：both清除浮动
4.推荐用法:定义affter伪元素，因为伪元素不属于文档流，正如他字面意思伪元
素：不真实的元素，这样的好处在于脱离了html方面的设置，通过设置display：
block以及clear:both或者定义高度来解决

2.display与visibility隐藏元素的区别

1.display设置none来隐藏元素，他的所有子元素以及背景等等全部消失，而且不
占据空间
2.visibility设置为hidden则元素隐藏但是占据原来的空间，所以我们可以用他
的这个属性来进行布局，也可以结合js做一些动态效果

3.使用margin、padding、left、top等的一些误区

1.margin代表外边距，文档流中是以其他元素边界，例如两个div，并且都设置了
高度，那么第二个div元素的margin-top：100px 就是相对于第一个div的底部
而言，在父子关系中则有些特殊，子元素在水平方向上这样设置完全没有问题，
但是竖直方向会出现问题，我们可以通过以下几种方式解决这个问题：为父或子
 元素设置脱离文档流position：absolute以及float浮动()、为父元素设置边框、为
 父元素设置overflow：hidden/auto 。 那么在脱离了的文档流的position：absolute
 以及  float浮动中：定义了position：absolute的元素先去找父元素中有没有定义
 position属性如果有margin就相对于父元素的边界而言，如果父元素没有定义则
 接 着往上找，直到最外层位置,还要注意如果在定义了position：absolute中的
 子元素中即使用left又使用margin则效果叠加。padding则是相对于内容来说的
 即单个盒子，也可以理解为一个单独的元素内容与他边框之间的距离设置。
 left、top是相对于position元素来说的，他们也代表了与边界的关系，不同
 的是他们对应的边界是定义了position的父级元素或者最上层html元素（父
  类以及父类的属性没有position时）

好了，今天就分享这些笔者初学时经常遇到的问题，有不妥之处还请指出 ，前端是个较为简单又稍微麻烦的知识，想要彻底掌握不免要吃一些苦头，所以不要怕错误，要在错误中总结升华，精益求精！