week7---10月20日 DIV模型

一、复习

1、伪类选择器概念，使用注意事项

2、优先级的顺序，及提高优先级的方法

二、新课

（一）元素区域与背景样式

对于块级元素可使用width与height属性指定显示区域的宽度与高度，对于行内元素(img图像除外)只能指定行高(行距)而不能设置区域大小。

行内元素、块级元素都可以设置背景样式。

1、块级元素的区域与溢出处理

1）设置块级元素的区域

width:宽度值; — 设置宽度(默认浏览器宽度或自身内容宽度)

height:高度值; — 设定高度(默认自身内容高度)

max-width:最大宽度值; — 实际宽度小于设置则采用实际宽度

min-width:最小宽度值; — 若实际高度大于设置值采用实际宽度

max-height:最大高度值;

min-height:最小高度值;

设置元素区域大小的属性值可以使用不同单位的数值或相对父元素（页面）的百分比%。

width、height设置块元素的固定大小，max-width、max-height设置元素区域的最大值—允许小于指定区域，min-width、min-height设置元素区域的最小值—允许大于指定区域。

块级元素不设置区域宽度高度时，默认以子元素内容确定自己的区域大小，即高度为子元素内容的总高度，而宽度一般为浏览器宽度，浮动时则取子元素内容的实际总宽度。

2．设置区域内容的溢出处理overflow

overflow:溢出处理方式;

当元素实际内容超出元素指定的width和height区域出现内容溢出时，可使用overflow属性设置对溢出的处理方式。

visible 自动扩大区域使内容可见(默认)—不被裁剪无滚动条

auto 区域大小固定，当出现溢出时自动增加滚动条

scoll 区域大小固定，总是带有滚动条

hidden 区域固定，溢出部分隐藏不可见—对超出部分裁剪

3．text-overflow:溢出处理方式;

text-overflow是IE6以上版本处理文本溢出的专有属性，但必须配合overflow:hidden;使用才有效，其属性取值为：

clip 裁切隐藏超出的文本，等同于 overflow:hidden;

ellipsis 必须配合white-space:nowrap;不换行—当文本溢出时显示省略号“ ... ”

配合使用text-overflow:ellipsis; overflow:hidden; white-space:nowrap;可在文本溢出时显示省略标记“... ”，再配合title标准属性可实现当鼠标指向该内容时显示完整的文本内容。

（二）块级元素的盒模型

盒模型也称为框模型，是CSS布局中的一个核心概念，所谓盒模型就是把HTML的块级元素看作是一个矩形框的盒子、也就是一个盛装页面内容的容器，所涉及到的概念有内容、边框、内边距和外边距。

如何在页面中摆放这些盒子就是所谓的页面布局。

1 盒模型分析

分析：

传统表格布局中，为了在一个单元格中划分为上下两部分的空白填充区域也要在单元格中继续嵌套表格，增加了大量冗余代码，即影响页面加载速度也为日后维护带来很大的不便。使用CSS的盒模型完全可以在div中嵌套div，并且通过内外边距的设置很容易实现任意需要的效果。

2、盒模型的宽度和高度

CSS规范中元素width和height属性仅指块级元素内容区域的宽度和高度，其周围的内边距、边框和外边距是另外计算的，大多数浏览器如Firefox、IE6及以上版本都采用了W3C规范。

符合CSS规范的盒模型的总宽度和总高度的计算原则是：

总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和

总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和

注意：

计算盒模型总高度时还应考虑上下两个盒子的垂直外边距合并现象。
IE5及以下浏览器使用非标准模型，其width是内容与内边距和边框的总和，而height则按实际内容高度。