XZ_CSS之盒子模型

网页上的每一个标签都是一个盒子

每个盒子都有四个属性

1>内容（content）

• 盒子里装的东西
• 网页中通常是指文字和图片

2>填充（padding，内边距）

• 怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其他抗震的辅料

3>边框（border）：盒子本身，会增加盒子的大小

4>边界（margin，外边距）

• 盒子摆放的时候不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

IE盒子，内容的真实宽高不是w3c的标准，

内容（ content ） - 属性

属性               描述

height            设置元素高度

max-height        设置元素的最大高度

max-width         设置元素的最大宽度

min-height        设置元素的最小高度

min-width          设置元素的最 小 宽度

width             设置元素的宽度

padding                         在一个声明中设置所有内边距属性

padding-bottom            设置元素的下内边距

padding-left                   设置元素的左内边距

padding-right                 设置元素的右内边距

padding-top                   设置元素的上内边距

填充（ padding，内边距 ）- 属性

例子1

padding ： 10 px 5 px 15 px 20 px ； （上，右，下，左）

上内边距是10px,右内边距是5px，下内边距是15px，左内边距是20px；

例子2

padding ： 10 px 5 px 15 px ；（上，右左，下）

上内边距是10px,右内边距和左内边距是5px，下内边距是15px

例子3

padding ： 10 px 5 px ;（上下，右左）

上内边距和下内边距是10px，右内边距和左内边距是5px

例子4

padding ： 10 px ;（上右下左）

所有4个内边距都是10px

边界（margin ，外边距 ）- 属性

属性               描述

margin                           在一个声明中设置所有外边距属性。

margin-bottom              设置元素的下外边距。

margin-left                     设置元素的左外边距。

margin-right                   设置元素的右外边距。

margin-top                     设置元素的上外边距。

例子1

margin : 10 px 5 px 15 px 20 px ;（上，右，下，左）

上外边距是10px,右外边距是5px，下外边距是15px,左外边距是20px

例子2

margin : 10 px 5 px 15 px ; （上，右左，下）

上外边距是10px,右外边距和左外边距是5px,下外边距是15px

例子3

margin : 10 px 5 px ; （上下，右左）

上外边距和下外边距是10px,右外边距和左外边距是5px

margin：10px 5px 15px 

上外边距是10px,右外边距和左外边距是5px,下外边距是15px

例子4

margin : 10 px ; （上右下左）

所有的4个外边距都是10px

边框（border ）- 属性

设置4个边框的样式

p {

    border:5px solid red;

}

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

• border-width  宽度
• border-style    样式
• border-color    颜色

设置边框圆角 border-radius