SS盒模型描述了在文档树中的元素中通过CSS可视化格式模型(visual formatting model)进行布局的矩形盒子;

盒类型:
块级元素、内联元素、内联块级元素;
常用的块级元素有:div, p, h1~6, ol, ul, table, address, blockquote, form;
常用的内联元素:a, span, br, i, em, strong, q, cite, code;
常见的内联块级元素有:img, input;

CSS盒模型示意图(四大区域)

盒尺寸

每一个盒子都有一个内容区域(content area)和周围可选的内边距(padding area),边框(border)和外边距(margin area);
CSS盒模型示意图

每一个盒子有四个边界:

  1. content边界或者内边界

  2. padding边界

  3. border边界

  4. margin边界

每一个边界都可以分解成left、right、top和bottom。

一个元素的content, padding, borders区域的背景background样式通过其background属性指定。margin背景往往是透明的。

IE盒模型与标准盒模型的核心差异是:IE盒模型的content部分包含了border和padding。

width & height属性

在CSS中,width和height指的是内容区域的宽度和高度,增加内边距、外边距不会影响内容区域的尺寸,但是会增加元素框额度总尺寸。

遗憾的是,IE6及早期版本在混杂模式中使用非标准盒模型,它指定的width样式不是内容的宽度,而是内容、内边距和边框的宽度总和。

CSS3的obx-sizing属性可以定义要使用哪种盒模型,但是一般在除了一些特殊场合外很少使用这个属性。

外边距叠加

即当两个元素垂直外边距相遇时,将形成一个外边距,这个外边距的高度等于发生叠加外边距的高度中的较大者。

当一个元素包含在另一个元素中时,如果他们之间没有内边距或边框分隔开,则他们之间的垂直外边距会发生叠加。

对于一个空元素,如果它有外边距,但是没有边框或内边距,则该空元素自身的外边距也会发生叠加。

只有普通文档流中的块级元素的垂直外边框才会发生外边距叠加,行内元素、浮动元素和绝对定位元素之间的外边距不会叠加。

元素框类型

在CSS中有两种框类型元素:块级元素和行内元素。

在CSS中,默认的块级元素有:address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul;

默认的行内元素有:a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var;

可通过修改display属性来设置元素的框类型。在CSS2.1以后,允许把元素的display属性设置为inline-block。inline-block可以让元素像行内元素一样水平地依次排列,但是可以显式地设置元素的宽高和垂直内外边距。但是IE7及其以下版本浏览器不支持inline-block。

默认的可变元素(即可根据上下文语境决定该元素为块元素或者内联元素)有:applet, button, del, iframe, ins, map, object, script。

块级元素从上到下垂直排列。

行内元素从左到右水平排列。但是垂直内边距、边框和外边距不影响行内元素的高度,可通过设置行高来修改行内元素的高度。

定位机制

CSS中有3种基本的定位机制:普通流、浮动和绝对定位。

相对定位

用position:relative声明。

相对定位实际上被看做普通流定位模型的一部分,因为元素的位置是相对于它在普通流中的初始位置来定位的。在使用绝对定位时,无论元素是否移动,元素仍然占据原来的空间。移动元素会覆盖其他框。

绝对定位

用position:absolute声明。

绝对定位脱离普通流,不占据普通流空间。

绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素来定位的。如果元素没有已定位的祖先元素,那么它的位置是相对于初始包含块的。根据浏览器的不同,初始包含块可能是画布或HTML元素。

可通过设置z-index来控制绝对定位元素的叠放次序。

相对于已相对定位的父元素对框进行绝对定位,在大多数浏览器中都可以很好地实现。但是在IE6中存在bug:必须确保相对定位的父元素有确定的宽或高,否则IE6将会错误地相对于画布定位这个框。

固定定位

用position:fixed声明。

固定定位实际上是绝对定位的一种,差异在于固定元素是相对于视窗进行定位。

浮动

浮动元素脱离文档流,不占据文档流的空间。

清除浮动可以使用clear属性,clear属性的值有:left、right、both或none。对元素进行清理浮动实际上是为前面的浮动元素留出了垂直空间。

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/290