CSS盒状模型简介
浏览数：69 /
时间：2015年06月09日
CSS盒状模型
在平时的开发过程中还是经常得写博客，这2天有个公司找我面试，在面试当中提到了CSS中的盒状模型。这个东西在平时的前端开发经常用到。以下简单介绍一下：
CSS中的盒状模型由：margin、border、padding和content几个属性组成，
content:内容，它可以是文字和图片等；
padding:内边距，空白和内补丁，用于设置内容和边框之间的距离，就像一个缓冲带；
border:边框，用于设置内容边框的粗线和样式等 ；
margin:外边框，是一块内容与另一块内容之间的间距；
在使用CSS设置盒状模型宽度和高度时，我们只设置content区域的宽度和高度，而不是content+border+padding+margin. 如果给盒状模型定义背景色，将会在content区域和padding区域显示，是无法设置颜色的。
从以上的盒状模型介绍中可以看出，一个盒状模型应该将这4个方面的尺寸全部加起来计算：
盒状模型的宽度=左margin宽度+左padding宽度+左border宽度+content宽度+右padding宽度+右border宽度+右margin宽度 。
盒状模型的高度=上margin宽度+上padding宽度+上border宽度+content宽度+下padding宽度+下border宽度+下margin宽度。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
