关于cssReset所需掌握的知识点(一)

           知识点一：在实际开发中，计算盒子模型是一个很头疼的问题。在默认情况下所有块级元素的盒子计算方式是：盒子的总宽度(及盒子占网页中的实际宽度)=margin+border+padding+width。这种计算方式是css中默认的计算方式。及相当于*{box-sizing:content-box;}。因为在这种方式下我们虽然为父元素设置了padding,但是padding还是会向外撑开；设置的border宽度也不能算作本身定义的width宽度。

而在实际开发中我们会重新设置css样式，我们称之为此次项目中的css Reset。而对于盒子模型我们也会重新设置成*{box-sizing:border-box;}重新设置后的样式。其盒子的总宽度为=margin+width。在这种方式下，padding就只会往里面撑开，而且border的宽度算作在width里面。这种方式计算简便，而且更加易于掌控，实际开发中更受欢迎。

知识点二：①解决在不设置border的情况下。父元素的第一个子元素的margin-top越界问题。如：

       <div id="parent1"><div>
       <div id="parent2">
          <div id="child1"></div>
       </div>

    在css中如果设置了所有div的宽高和背景颜色，但不设置border。这时再来设置child1{margin-top:20px}就可以发现问题，并不是child1与parent2的margin-top为20px。而是parent1与parent2的margin为20。那么解决这种办法的方法有很多：1.为parent2加border-top(这种方法不可取，影响了网页的排版)；2.为parent2指定padding-top=1px(这种方法同样不可取，影响了网页排版)<span style="color:#ff0000;">3.为parent2设置overflow:hidden(这种方式同样有副作用)。4.设置样式parent2:before{content:" ";display:table;}(这种方式推荐使用，完全没有副作用)。第四种方式是采用bootstrap中container的样式重置而得来的好方法！</span>

     ②解决所有子元素浮动后，父元素高度变为0,的问题。<span style="font-family: Arial, Helvetica, sans-serif;">	</span>

<span style="white-space:pre"></span><pre name="code" class="html"><span style="white-space:pre">	</span><div id="parent">
   <span style="white-space:pre">	</span>   <div id="child1"></div>
<span style="white-space:pre">	</span>   <div id="child2"></div>
<span style="white-space:pre">	</span></div>

<span style="white-space:pre">	</span>我们都知道为两个child设置了浮动过后，两个child都离开了原有的层级，而导致父元素的高度变为0.在开发中解决的办法同样有很多：1.直接设置parent的高du(显然在很多情况下不可取)2.同样为parent设置overflow:hidden(这种方法有副作用)。4.设置parent样式<span style="color:#ff0000;">parent:after{content:" ";display:table;clear:both}(同样推荐使用完全无副作用)</span>;

    知识点三：这个问题是我在实际开发项目当中所遇到的，在我们设置样式开头时，为了有更加有用标签我们往往会在css开头当中设置<span style="color:#33cc00;">u,s,b{text-decoration:none;display:block}.但是这种设置方式往往有时候会出现错误,因为u标签在html中其闭口（及</u>）不起作用</span>（这里我只测了chrome）.所以会影响到后面的布局。这点在webstrom开发软件当中可以看到其闭口有划线，表示不起作用。于是我重新自定义了一个新标签<k></k>。

    知识点四(也是我的问题点)：解决如一个a或div标签包含一个img图片的时候，当父元素设置border时，总会与img有2px之间的间距。我的解决方法：1.为a或div设置border其宽度和高度恰恰为img的宽度和高度。2.<span style="color:#ff0000;">在bootstrap网页当中编写，不会出现两像素之间的间距</span>。但其原理至今没研究出来。哪位大神帮帮忙！

<span style="color:#33cc00;">绿色字体是我不敢确定的部分！！！！！！！！！！！</span>