css学习3

1.外边距合并

外边距合并是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

比如竖直两个div，第一个div的margin-bottom为20，第二个div的margin-top为10,那么两个div之间的距离其实为20。

同样情况，在一个div中包含一个div，也会出现外边距合并。

 

2.定位

相对定位：无论位置被定位哪里，他仍然会占据原有的空间，也就是不会在原有的文档流中删除。是相对于元素在文档中的初始位置。以后重合的情况分两种，如果向下移动后会默认被后面的元素覆盖，向上移动会默认覆盖上面的元素。可以指定z-index，这样控制层级覆盖关系。

绝对定位：会脱离文档流，元素的位置相对于最近的已定位的祖先元素，如果没有，那么就相对于最初的包含块。因为脱离文档流，所以会默认覆盖重合的元素。

 

3.浮动

如果一个div中包含元素，对包含的元素进行浮动，因为浮动会脱离文档流，因此不能支撑div的高度。

解决高度塌陷的方法：

①固定外层div的高度

②清除浮动

可以在div中添加一个空元素，然后使用类选择器

.clear {

  clear: both;

}

或者可以在div中添加class为clear

.clear:after {

      display: block;

      clear: both;

      content: "";

      visibility: hidden;

      height: 0

}

③将外层div也设置成浮动

 

4. fieldset，legend ，lable等的使用

fieldset就是将表单中的相关控件集中起来，形成控件组。默认会形成边框，这时候可以设置border:0 消除边框。

legend就是为fieldset中设置标题

lable配合input使用，点击lable的时候就能将焦点聚集到input上

 

<form action="#">

    <fieldset>

      <legend>信息</legend>

      <label for="login">login</label><input id="login" type="text">

      <br/>

      <label for="password">password</label><input id="password" type="text">

    </fieldset>

  </form>