在我们网页上的每一个元素，一个按钮，一段文本，一张图片等等，浏览器都将它们当做一个“盒子”看待，并把这样的盒子称为盒模型（box model）。既然是模型，必定有矩可循，如果各不相同就不能叫模型了。
使用Chrome（当然FireFox也行）的右键->审查元素对某个网页上的元素看下，就可得到类似这样一张图，这就是盒模型的缩影了。
组成盒模型主要是这几个要素：外边的外边距margin、中间的边框border、里边的内边距padding（个人喜欢叫内填充）（再往里就是包围元素实体的宽、高了）。在padding这个块里面，包括实体元素的宽高，就是背景background横行的地方，一般我们所添加的背景图片、背景颜色会充满padding这里面的一块区域，所以padding变大，背景会跟着扩张，当然前提是没有精确控制背景的位置、平铺方式等参数。
CSS的盒子是包括margin的，但是按照人的看图思考方式，至少我觉得将border到里边看做成生活中的盒子更符合常理嘛。我情愿把CSS的盒子转换成生活中的盒子，当然这个盒子可以随时改尺寸，border是盒子边框厚度，width跟height规定盒子中放的物体的宽高，至于是不是恰好等于实际物体的宽高自己定，小于的话就以实际物体为准了，padding规定盒子的边框到盒子里面堆放物体的范围（宽x高，上图中蓝色区域）的距离，设置一个padding值，避免内容被生硬的装在盒子中，与边框保持一点距离，可以显得不那么拥挤，所以border和padding是不能为负值的，硬给一个负数浏览器也归为零。margin是规定其他的标签与本标签的距离，即其他的盒子与本盒子之间的边距，仿佛是在宣誓主权：方圆xx距离的地方是爷的地盘，别过来！当然有时并非如此，因为margin可以为负值。
从图中看出，CSS的盒模型是四四方方的，所以对盒子的修饰的margin、border等是有四个方向的。比如margin样式的添加，通常是这样：
margin: 5px; margin: 5px 10px; margin: 5px 10px 15px 20px;
第一种是上下左右均为5像素，第二种是上下5像素，左右10像素，第三种最具体的，顺序上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）的设置外边距，顺指针转，上在前，所以记不清第二种的是上下5像素还是左右5像素就很好办了，反正顺时针转，上最先开始，所以第二种写法前面自然就是指上下外边距了。当然也可针对各个具体的方向具体设置。
如果设置为auto就是让浏览器自动给值了，比如当要使某段居中时可以这样（倔强的不考虑-IE6+，不想碰这个魔鬼）
.txt{ width:760px; margin:0 auto; } 上下外边距是0，左右边距是auto，意在让浏览器自己计算，浏览器根据当前父元素宽度，假定就是body，来把760像素宽的元素放在上面，并计算保证它的左右边距的差值始终为0，所以类名为txt的元素就在网页上居中了。
还是先说盒子，浏览器将每一个元素都当盒子来处理，但不是所有的盒子都一样，主要分两种类型：行内盒子（inline box）和块级盒子（block box）。它们对应着两种标签：行内标签和块级标签。块级标签的前后会产生一些空格，如div、h1、p、table等，前后会直接换行，如果不做处理，它们总是单独霸占一行，而行内标签前后不会产生空格，不做处理时标签后边有多少内容就接多少，比如strong、em、a、input等。
大多数情况，浏览器对这两种盒子的处理是一致的，均可添加左右外边距、左右边框、左右内填充，且真正做到与其他元素隔开一定的距离，margin-top为10像素时，真的就离上边的对象10像素远。但是有一种情况例外，可以试试下面代码：
inline test .segment{ width:400px; margin:0 auto; padding:5px; border:2px solid #509ddd; } .txt{ margin:10px; padding:10px; border:1px solid #e61f44; } The human species' use of technology began with the conversion of natural resources into simple tools. The prehistorical discovery of the ability to control fire increased the available sources of food and the invention of the wheel helped humans in travelling in and controlling their environment. Recent technological developments, including the printing press, the telephone, and the Internet, have lessened physical barriers to communication and allowed humans to interact freely on a global scale.
选择一段文本中间的几个单词用strong标签修饰，给了一个类txt，整段文字居中，strong包围的单词在样式分别给了margin、padding、border，是不是这两个单词的上下左右都会有一定的间距？效果
可以看出fire increased的左右确实增加了margin和padding，因为红色边框左右都有一些空白，margin和padding是以border为边界，上下的border边框则直接与上下的文本重合了，padding给了却没有产生间距，这就是因为span是行内标签（inline），对待行内标签，上下边距给了也是白给，不会产生效果，这是行内标签的特性（我还曾傻傻的使劲增大margin=_=），当然这个地方可以用line-height来增大行间距。
而块级标签就不同，浏览器把它当成一个整体，一个块，所以它的前后有换行，它的margin、padding无论哪个方向都起作用，都会产生距离。天生就是行内标签怎么办，难道注定一生上下受欺压？当然不是，css有个属性display，展示方式，比如当它为none时可以将元素整体隐藏起来，它还有另外的值，如block、inline、inline-block...如果给上边的txt类添加display:block;属性值，它会单独占一行，也许给它加个背景更醒目，效果
还有一种inline-block，字面意思是行内块，不妨将上面的txt类选择器中的display值改为inline-block看看
改为inline-block属性值后，它的前后没有换行，但是在这一行内它的margin、padding都产生了效果，所以它是介于inline和block之间的一种，既能维持在一行之内，前后不换行，还能在这一行内被当做是一个块，看上去就像是这一行跟其他的行的行间距相比变大了，因为他的间距，行内其他的单词也跟上下隔开了。
这就是三种主要的display状态，对于平常简单的应用够了，当然它还有其他值，都去看不整死个人-_-
元素背景，很有意思，上面说过，background是跟着padding的大小走的，如果你没有精确控制背景的位置，比如简单设置一个background-color
background * { margin:0; padding:0; border:0; } #d1 { width:100px; height:100px; padding: 10px; background-color:red; }
查看更多关于盒模型_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did108149