网页设计与制作（HTML+CSS）第五课

4.2 盒子模型相关属性

1.设置边框样式（border-style）
必须按上下左右的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右 ，三个值为上/左右/下。
2.设置边框宽度（border-width）
必须按上右下左的顺时针采用值复制，即一个值为四边，两个值为上下/左右。
设置边框宽度是时，必须同时设置边框样式。
3.设置边框颜色（border-color)
必须按上右下左的顺时针采用值复制，即一个值为四边，两个值为上下/左右。
三个值为上/左右/下。
4.综合设置边框
4.2.2 内边距属性
内边距指的是元素内容与边框之间的距离，也常常称为内填充
*padding-top:上内边距
*padding-right:有内边距
*padding-bottom:下内边距
*padding-left:左内边距
padding相关属性的取值可为auto自动（默认值）不同单位的数值 相对于父元素（或浏览器）宽度的百分比%，最常用px 不允许使用负值
同边框相关属性一样，使用复合属性padding定义内边距时，必须按上右下左的顺时针采用值复制，即一个值为四边，两个值为上下/左右。三个值为上/左右/下。
4.2.3外边距属性
元素边框与相邻元素之间的距离
margin-top(right bottom left)允许使用负值
4.2.4背景属性
1.设置背景颜色：background-color 默认值：transparent,及背景透明，这时子元素会显示父元素的背景
2.设置背景图像
背景不仅可以设置为某种颜色，在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现
3.设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺
通过background-repeat控制
repeat:默认值
no-repeat:不平铺（图像位于元素的左上角，只显示一次）
repeat-x:只沿水平方向平铺
repeat-y:直言竖直方向平铺
4.设置背景图像的位置

5.设置背景图像固定
background-attachment:
(scroll:默认值
fixed:图像固定在屏幕上，不随页面元素滚动
6.综合设置元素的背景
background:背景色 url(“图像”) 平铺 定位 固定；
4.2.5
盒子的总宽度：width+做有内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度：height+上下内边距之和+上下边框宽度之和+上下外边距之和。
仅适用于块级元素，对行内元素无效，（< img/>标记和< input/>除外）
计算盒子模型总高度时，还应考虑上下两个盒子垂直外边距合并的情况。