上面代码的实际效果如下图所示。很明显它的top是30px，也就是说margin距离就是到容器上下左右边框的距离，所以div.d1的20pxmargin-bottom塌陷在div.d2的margin-top中。在计算盒子之间的距离时需要考虑margin，但是margin还有一个非常有用的方法可以让block播放：margin:0auto;border属性的三个元素：border-widththicklineborder-stylelineborder-colorcolor一般在设置边框样式时，一般采用简写方式：border:1pxsolidred;另外，内联元素盒模型和块级元素盒模型的区别：内联元素不能设置宽高。内联元素的宽度和高度由其内容决定；而块级元素可以设置宽度和高度。块级元素占据一行。但是，所有的内联元素只能占一行，并且只能与其他内联元素共用一行。如果块级元素没有设置宽度，那么块级元素会自动填满父元素的整个宽度。元素可以通过设置display属性在行内和块之间转换。它的参数包括：inlineblockinline-blockstandarddocumentflow标准文档流实际上是一个很差的翻译。一开始我不是很理解。查了一下，发现standard说normalflow翻译成normalflow或者normalflow比较好。浏览器在解析网页时，是按照从上到下，从左到右的顺序进行的。一旦元素从标准文档流中取出，内联和块元素的属性就会消失。标准单据流的一个普遍现象：空白折叠现象。高低不齐，底边对齐。自动换行，一行写不完就自动换行。如果你没有说完这个词，不要断线。浮动浮动：左/右；浮动特性：脱离标准文档流，一旦元素脱离标准文档流（off-label），后面的元素将占据浮动元素原来的位置，元素将不再服从块级文档流中的元素和内联元素的属性。元素浮动会跳出文档流，但不会跳出文本流，所以会有字体效果。靠在一起。浮动效果：可以使浮动元素的布局变得凌乱。子元素的浮动会影响父元素。HTML代码：

• HTML
• CSS
• JavaScript
• jQuery