本文中将要论述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
网友评论