CSS高级要点

CSS盒子模型归纳

---

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

1.png

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

运用实例：
div {
width: 250px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
实际计算：
250px (宽)

• 50px (左 + 右填充)
• 50px (左 + 右边框)
• 50px (左 + 右边距)
  = 400px
  故，根据这样定义的盒子需要的像素为400.

---

盒子定位

盒子定位有默认定位、相对定位、绝对定位、固定定位：

• 默认定位：就是在没有定义的情况下由系统默认给出的定位方式。
• 相对定位：相对定位主要以自己为基准点移动位置，但是移动位置后之前的位置依旧保留。
  运用：使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。
• 绝对定位：绝对定位跟浮动一样，脱离标准流，原来位置不保留了,但是绝对定位是真正意义的脱离标准，可以覆盖文字图片内容。但是浮动的话只是盒子脱离了，内容的话还是不会被其他盒子盖住。绝对定位当没有父元素或父元素都没有定位，他以浏览器当前页面为基准。如果父元素有定位了，那么他以最近的有定位的父元素为基准点进行定位移动。子觉父相：意思是，子盒子用绝对定位，父盒子用相对定位，为什么这样。因为父盒子一般可能下面还有其他的盒子，如果父盒子给了绝对定位，那么原来位子就不占了，这样下面的盒子会上移，产生布局问题。如果父盒子用相对定位，那么原来位子占有，下面的其他盒子按照标准流会继续排列在下面，同时父盒子里的子盒子的绝对定位也会参照父盒子为基准。
• 固定定位：

1. 固定定位跟父元素没有关系，只认浏览器。
2. 固定定位完全脱离标准流，不占位子，不随着滚动条滚动
3. ie6等低版本浏览器不支持固定定位。
4. 跟浮动一样，元素添加了绝对定位和固定定位后，元素自动转换为行内块元素，行内块元素如果没有给宽度。

---

浮动

• 浮动的特性：

1. 浮动的盒子脱离标准流，不会占原来的位置。
2. 浮动只有左右浮动。
3. 浮动的盒子一般会与标准流的父盒子搭配使用，有一个子盒子浮动了，一般其他子盒子也需要浮动才能在父盒子里一行显示。
4. 浮动可以让元素模式变成行内块特性。

• 清除浮动：

1. 额外标签法：在浮动元素的末尾添加一个空标签，然后给这个空标签的style给个clear both样式。缺点是标签结构变多了。
2. 父级添加overflow：hidden、auto、scroll等属性，不过缺点是当内容增加的时候容易导致内容不会自动换行而被隐藏掉，无法显示需要溢出的元素。
3. 使用after伪元素清除浮动，使用方法，如下：.clearfix：after{ content：“”； display：block； height：0； clear：both； visibility：hidden；}.clearfix {*zoom：1；} 这个是ie6-7专有，因为6-7不支持：after。
4. 使用before和after双伪元素清除浮动，使用方法如下：.clearfix：before，.clearfix：after { content：“”； display：table；}.clearfix：after { clear：both；}.clearfix {*zoom：1；}