CSS查漏补缺

最初学习前端很不系统，很多东西都是用到了就去百度一下，导致对知识点的掌握有很多不完善的地方，现在系统的学习一下CSS，并将之前遗漏的地方整理一下。

1、在css中，width和height指的是内容区域的宽度和高度。css的盒模型包括边框，内边距以及内容区域，前两者默认是不包括在width和height中的，所以如果设置如下

{width: 100px; height: 100px; padding-top: 20px;}

那么实际上这个box的高度是120px;在css3以后我们可以通过box-sizing这个属性来设置盒模型的计算方式，可以设的值包括：content-box(css2.1的计算方式)，border-box（这种方式使为元素指定的内边距和边框都将在给定的宽高内设置），inherit（从父元素继承).

2、在css中padding不允许使用负值，margin可以设置负值（并且常用来实现某些需求，如居中）.

3、在边框样式设置为none时，其宽度也会变为0，默认值为none，默认边框颜色为元素本身的前景色

4、透明背景色的设置：

          如果想要实现某个事件触发元素边框从无到有，由于如果开始设置样式为none，则有可能会导致元素的宽高发生变化（如1），因此可以开始时将边框颜色设为透明，如下所示：

div { border: 5px solid transparent;}

5、外边距合并问题：

     可以参考以下网址：

     http://www.w3school.com.cn/css/css_margin_collapsing.asp

     只有普通文档流中块框的垂直外边距才会发生合并。行内框、浮动框和绝对定位之间的外边距不会发生合并。

css定位（display 与 float 属性结合）

css包括三种基本的定位机制：普通流、浮动和绝对定位（static/relative/absolute/fixed）

position属性能够很好地体现html普通流这个特征，重点在于应用了不同的position之后是否脱离了普通流和改变display属性这两点。

默认static上应用top、left等值无效

relative：元素框偏移某个距离。元素仍保持其定位前的形状，它原本所占的空间仍保留，相对定位实际上被看做普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置，并没有脱离普通流。relative并不会改变行内元素的display属性，所以即使对span设置了position为relative，对其设置width仍无效

absolute：absolute元素会脱离页面普通流，并改变display属性，块级元素在relative/static情况下width为100%，但是设置了position为absolute后，会将width设置为auto，宽度由其内容决定；对于行内元素，其display属性会被设置为block，可以设置其width和height属性，且absolute会忽略根元素的padding

应用了position：absolute/relative后，会覆盖其他非定位元素（即static元素）

fixed对元素的display影响与absolute相同。

float: 这个属性会将元素的display属性变更为block，所以不必再显式的声明，脱离普通流

 

float与position的兼容问题

    float&relative： 先浮动到相应位置，在根据left、top等值偏移

    float&absolute： float失效

    第一个元素应用了position之后会覆盖接下来的float元素

    如果不将float元素的position设置为relative的话，无法通过z-index达到覆盖absolute元素的目的，float元素下的absolute子元素在float元素未设置relative的情况下是不会定位到float的。

 

易错点：

• margin和padding不管是上下边距还是左右边距在以百分比设置的情况下都是以父元素宽度为参考
• first-child
       如p:first-child，这个选择器选中的是作为某个元素第一个子元素的p元素，而不是p元素的第一个子元素