web前端基础：盒子模型

盒子模型的概念
• 盒子模型用来“放”网页中的各种元素。
• 网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）

宽度属性
宽度 width：长度值 | 百分比 | auto
最大宽度 max-width：长度值 | 百分比 | auto
最小宽度 min-width：长度值 | 百分比 | auto
高度属性
高度 height：长度值 | 百分比 | auto
最大高度 max- height ：长度值 | 百分比 | auto
最小高度 min- height ：长度值 | 百分比 | auto
边框属性
• 边框宽度（border-width）
• 边框颜色（border-color）
• 边框样式 ( border-style）
4个方向来表示（上、下、左、右）
设置元素边框宽度 border-width : thin | medium | thick | 长度值
设置元素边框颜色 border-color ： 颜色 | transparent
设置元素边框样式 border-style : 值 | none | hidden
不同方向表示：
border-[left | right | top | bottom]-width
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style
边框缩写：
border : [宽度] | [样式] | [颜色]
不同方向：
border-top : [宽度] | [样式] | [颜色]
border-left : [宽度] | [样式] | [颜色]
border-right : [宽度] | [样式] | [颜色]
border-bottom ：[宽度] | [样式] | [颜色]

值	描述
none	定义无边框。默认值
hidden	与 “none” 相同。除非在表格元素中解决边框冲突时
dotted	定义点状边框。在大多数浏览器中呈现为实线
dashed	定义虚线。在大多数浏览器中呈现为实线
solid	定义实线
double	定义双线
groove	定义 3D 凹槽边框
ridge	定义 3D 垄状边框
inset	定义 3D inset 边框
outset	定义 3D outset 边框
inherit	规定应该从父元素继承边框样式。

内边距属性
设置元素的内容与边框之间的距离（内边距或填充）,分4个方向
（上、右、下、左）
– padding-top : 长度值 | 百分比
– padding-right :长度值 | 百分比
– padding-bottom :长度值 | 百分比
– padding-left :长度值 | 百分比
说明：值不能为负值
内边距属性缩写
padding : 值1； //4个方向都为值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2

外边距属性
设置元素与元素之间的距离（外边距）, 4个方向（上、右、下、左）
– margin-top : 长度值 | 百分比 | auto
– margin-right : 长度值 | 百分比 | auto
– margin-bottom : 长度值 | 百分比 | auto
– margin-left : 长度值 | 百分比 | auto
说明：值可为负值
外边距属性缩写
设置元素与元素之间的距离（外边距）, 4个方向（上、右、下、左）
margin : 值1； //4个方向都为值1
margin : 值1 值2 ; // 上下=值1，左右=值2
margin : 值1 值2 值3；// 上=值1，左右=值2，下=值3
margin : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2
• 默认情况下，相应HTML块级元素存在外边距
body、h1~h6、p……
• 声明margin属性，覆盖默认样式
• margin值为auto , 实现水平方向居中显示效果
• 由浏览器计算外边距
• margin值为auto , 实现水平方向居中显示效果
• 由浏览器计算外边距

标准盒子模型

• 在 CSS 中，width 和 height 指的是内容区域的宽度和高度
• 增加内边距、边框和外边距不会影响内容区域的尺寸
• 但会增加元素框的总尺寸

IE盒子模型

display属性
• inline
元素将显示为内联元素，元素前后没有换行符
• block
元素将显示为块级元素 , 元素前后会带有换行符
• inline-block
行内块元素，元素呈现为inline，具有block相应特性
• none
此元素不会被显示