web前端总结-----CSS基础详解（二）

上接CSS基础详解（一），继续总结一些自己认为的重点和自己容易模糊的知识点

---

外边距的合并

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

<div id="d1"> </div>
<div id="d2"></div>

#d1 {
  width:100px;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
}

#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

d1和d2之间的外边距是20px

---

定位

绝对布局好像不在页面里面占位置了，跟随页面的滚动而动。固定布局则固定在页面上面，而不是随着页面滚动而动。静态布局下，其他的一些偏移量对于静态布局不起作用（比如Z-index）。相对布局是在页面里面，会随着页面的滚动而滚动。

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

---

包裹性

一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度 。

Html代码：
 <div class="div">
      <img src="img/4.jpg" />
      <p>没有absolute</p>
 </div>
 <div class="div abs">
      <img src="img/4.jpg"  width="300px" height="100px"/>
      <p>absolute后</p>
 </div>

css代码：
.div{
    padding: 20px;
    margin-bottom: 10px;
    background-color: #0000FF;
}
.abs{
    position: absolute;
}

下面这张图片已经脱离文档流了。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

---

相对定位与决定定位的区别：

当设定position:absolute：
如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。
当设定position: relative：
则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。
TRBL属性（TOP、RIGHT、BOTTOM、LEFT）

---

fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

---

脱离文档流的决对布局和fix布局，下面的元素会占据他们原先的位置。

---

绝对定位：
1.会让标签脱离文档流
2.子标签如果想实现绝对定位，需要先给父级设置相对定位
3.设置绝对定位的标签不再是行块元素
4.定位元素（默认可以设置宽高，内容撑开其大小）
5.通常用于重叠div

---

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 可以使用 display 属性改变生成的框的类型（行标签转换块标签）。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 span 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。display: inline， 块标签转化成行标签；让块标签显示在同行， display: inline-block;

---

行元素（inline）与块元素（block）

1. 块元素：
   独占一行
   默认宽度是100％(父级的百分百)
   可以设置宽高
   可以嵌套块标签或者行标签(除了p h dt)

2. 行元素：
   共用一行
   默认由内容撑开
   大部分行标签都不能设置宽高(除了img和input)

3. 标签嵌套规则：
   a标签不能嵌套a标签。
   行标签不能嵌套块标签。
   块标签可以任意嵌套（除了p，h，dt，这三个标签可以嵌套行标签）。

---

这张图很好的对比了行块元素的区别：

---

浮动（float）

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。漂浮在标准流之上，和标准流不是一个层次。元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

1. 浮动让标签的布局脱离原来的默认文档流的布局方式
2. 浮动会让块元素失去独占一行的特性，在浮动这一层的标签可以共用一行
3. 浮动标签后面布局的标签会忽略被浮动标签原来所占据的空间。
4. 浮动元素默认内容撑开宽高
5. 浮动元素标签会发生层叠，但内容不会。
6. 对元素脱离文档流，对内容在文档流
7. div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流
8. 靠近页面边缘的一端是前，远离页面边缘的一端是后
9. Html的文档流是从上到下解析的，所以我们应该把重要的内容放在前面进行解析

当框1设置了float：right的时候，那么框1就会跑到其包裹的父布局的最右边，他下面的框2与框3会马上向上移动，占据框1原来的位置，从而框2与框1在同一行。

---

当我们设置了框1{float：left}向左浮动，看着好像框1没有什么变化，其实不然，你会发现框2与框3的位置变化了，而且框2看不见了，那是因为框1把框2给覆盖了，为什么会这样？因为框1已经脱离了文档流，而框2还在文档流里面，所以框1就把框2给覆盖了。本来框123都是块级元素，应该是从上到下依次排开，但是当我们把这三个框都设置为向左浮动｛float：left｝那么这三个框就会鬼使神差般的变成一行排开。对，就是这么神奇。

---

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

---

清除浮动（clear）

清除浮动可以理解为打破横向排列
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
｛假如div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。}

html代码：

    <div class="float-clear">
        <img src="img/4.jpg" width="100px" />
        <img src="img/4.jpg" width="100px" />
    </div>

css代码：

.float-clear img{
    float: left;
    border: 2px solid red;
}

给img图像加上向左浮动，就变成这样：

当再加上clear：both，清除全部的浮动的时候，就变成这样：

.float-clear img{
    float: left;
    border: 2px solid red;
    clear: both;
}