网页设计基础——05 盒子模型

认识盒子模型

盒子模型包括四个要素：外边距（margin）、边框（border）、内边距（padding）、内容（content）。

• 网页就是多个盒子嵌套排列的结果
• 内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中
• 外边距是该元素与相邻元素之间的距离
• 如果给元素定义边框属性，边框将出现在内边距和外边距之间
• 需要注意的是，虽然盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性

相关属性

边框属性

设置边框样式（border-style）

• none：无边框（默认值）
• solid：单实线边框
• dashed：虚线边框
• dotted：点线边框
• double：双实线边框

属性	描述
border-style	简写属性，同时设置边框4个方向的样式
border-top-style	设置上边框的样式
boder-right-style	设置右边框的样式
border-bottom-style	设置下边框的样式
border-left-style	设置左边框的样式

• 注意边框风格属性取4个值时，按顺时针方向依次设置上、右、下、左边框的风格
  设置边框宽度（border-width）

属性	描述
border-width	简写属性，同时设置边框4个方向的宽度
border-top-width	设置上边框的宽度
border-right-width	设置右边框的宽度
border-bottom-width	设置下边框的宽度
border-left-width	设置左边框的宽度
宽度值	描述
–	–
length	数值px或em
thin	细边框
medium	中等边框（默认值）
thick	粗边框

设置边框颜色（border-color）

属性	描述
border-color	简写属性，同时设置边框4个方向的颜色
border-top-color	设置上边框的颜色
boder-right-color	设置右边框的颜色
border-bottom-color	设置下边框的颜色
border-left-color	设置左边框的颜色

综合设置边框

属性	描述
border	四边宽度、样式、颜色
border-top	上边框宽度、样式、颜色
borde-right	右边框宽度、样式、颜色
border-bottom	下边框宽度、样式、颜色
border-left	左边框宽度、样式、颜色

内边距属性

属性	描述
padding-top	上内边距
padding-right	右内边距
paddin-bottom	下内边距
padding-left	左内边距
padding	上右下左内边距

外边距属性

属性	描述
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	右外边距

背景属性

设置背景颜色（background-color）
设置背景图像（background-image）
设置背景图像平铺（background-repeat）

• repeat：水平竖直平铺（默认）

• no-repeat：不平铺

• repeat-x：水平平铺

• repeat-y：竖直平铺
  设置背景图像的位置（background-position）

• 水平方向值：left、center、right

• 竖直方向值：top、center、bottom

• 像素：20px 20px

• 使用百分比
  设置背景图像固定（background-attachment）

• scroll：图像随页面元素一起滚动（默认）

• fixed：图像固定在屏幕上，不随页面元素滚动
  综合设置元素的背景（background）
  background：背景色 url（“图像”） 平铺 定位 固定

盒子的宽与高

• 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
• 盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
• 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（< img />标记和< input />标记除外）
• 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况