《精通CSS》读后笔记

计算选择器的特殊性

主要分为四种：

1.行内样式，基数1000

2.ID选择器，基数100

3.类 伪类 属性选择器 ，基数10

4.类型，标签选择器，伪元素选择器的个数 基数为1

边距叠加

1.上下相邻块元素 

上一个块元素出现在另外一个块元素之上，如果设置了margin属性，二者的margin-bottom和margin-top发生叠加

2.父块元素和第一个或者最后一个子元素

如果父块元素和第一个子元素之间没有边框、内边距、内联内容和间距分开，若设置了margin,则二者的margin-top会叠加；

或者父块元素和最后一个子元素之间没有边框、内边距、内敛内容和高度设置（height/min-height/maxheight），若设置了margin,则二则的margin-bottom会叠加

可以给父元素增加border、设置padding、填充内容等方式来解决，还可以使用overflow来解决

<div>
    /**填充内容**/
  <p>margin-top</p>
</div>

div{
    overflow:hidden;
    //padding:10px;
    //border:1px solid transparent;
}

3.空的块元素

对于没有边框、内边距、内联内容和高度设置（height/min-height）的空块元素，如果设置了margin属性，则顶底外边距会发生叠加：

如果外边距碰到另外一个空元素的外边距，则还会发生叠加，合并成为一个外边距。

浮动

<div class='news'>
  <img src='http://ww3.sinaimg.cn/bmiddle/8d522661gw1ey1rotf8t6j205k03hjr9.jpg'  />
  <p>some text</p>
<div>

//css
.news{
  border:1px solid red;
}
img{
  float: left;
}
p{
  float: right;
}

图片和文本都是浮动元素，不占据空间，所有div没有被撑开。如何解决？

1。增加空行清除浮动，这种方式会增加额外的标签和代码

<p>some text</p>
<br class='clear' />

//css
.clear{
    clear: both;
}

2.利用伪元素，会受子元素大小限制

.news:after{
  display: block;
  height: 125px;
  content: '';
}

3.对包含的子元素浮动

.news{
  float: left;
}

4.利用overflow,能够自动清理包含的任何浮动元素，但在某些情况下，会影响盒子的显示，产生滚动条或者阶段性内容

.news{
  border:1px solid red;
  overflow: hidden;
}