【CSS】核心概念解析

本文中将要论述CSS以下几个核心概念：

• 元素类型

• 盒模型
• position与float

一、元素类型

元素类型分为块级元素（block level element）和内联元素（inline element）

---

二者区别如下:

• 块级元素分布服从块级方向（默认从上到下），行内元素分布服从行内方向（默认从左到右）。
• 块级元素可以设置width和height属性，而内联元素设置无效。
• 块级元素width默认设置为100%，而内联元素则是根据其自身内容或子元素内容来决定宽度。

---

• display属性
• 可以通过设置display属性来进行块级和行内元素间的转换，并可通过此方式为内联元素设置width和height
• 若想让元素既在行内显示，有可以设置宽度和高度，则可以使用
  display:inline-block
  inline-block可以认为是让元素对外显示内联元素，对内显示块级元素，可以设置宽高

---

• 普通流
  块级元素从上到下排列，内联元素从左到右排列，这种无样式的情况下元素的分布叫做普通流

二、盒模型

所有的元素都会在页面占据一个空间，而这个空间都可以看做是一个盒子（box model）

盒子模型

盒子模型组成：

content=>padding=>border=>margin

• 宽度计算
  总宽度=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
  若为IE9以下：
  总宽度=margin-left + width + margin-right

---

• 为了解决上述兼容问题，我们可以使用
  box-sizing:border-box
  此时border和padding被包含在了width和height之内。因此为了避免浏览器兼容问题，可以使用如下代码
  ,:before,*:after{
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  }

脱离普通流的position和float

• 有关position属性的相关请参考(http://www.runoob.com/css/css-positioning.html)
• position:static：HTML元素的默认值，在普通流中，静态定位的元素不会受到 top, bottom, left, right影响。
• position:relative：仍然在普通流中，但可以通过left right等进行移动，（使用left right等进行移动时，定位是相对其正常位置的。）因为仍然位于普通流中，所以进行定位后原来的位置仍然保留
• position:fixed,absolute：
  absolute相对于最近的已定位的父级元素，若不存在，则相对于html界面
  fixed相对于浏览器窗口固定，即使滑动窗口也不发生改变
  二者的特点：
• 脱离于普通流，及二者的分布不会影响普通流中的元素，而且还会覆盖下层元素；
• 元素将变为块级元素，可以设置宽高；
• 如果元素是块级元素，则宽度由width:100%变为width:auto。
• z-index可以用来改变元素的覆盖顺序

---

• float
• 浮动之后，会脱离普通流（文档流），不再覆盖原来的那层空间，因此该元素下一个兄弟元素会紧贴到该元素之前没有设置float元素之后；
• 如果为内联元素（文本流），则会产生围绕效果。
  详见http://www.w3school.com.cn/css/css_positioning_floating.asp