盒子模型的三维立体结构图

234.jpg

元素内容（content）、内边距（padding），两者同位于第二层
背景图（background-image），位于第三层
背景色（background-color），位于第四层
整个盒子的外边距（margin），位于第五层

盒模型的大小--宽度和高度

789.jpg
CSS代码
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}

盒模型--边框 - border

元素的边框 (border) 是围绕元素内容和内边距的
一条或多条线

盒模型--内边距- padding

CSS padding 属性定义元素边框与元素内容之间的空白区域
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}

盒模型--外边距- margin

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em

盒模型属性 － overflow

overflow 属性规定当内容溢出元素框时发生的事情
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值