Style overflow属性的使用 ------------------内容超出部分使用滚动条显示隐藏的内容
介绍和使用
style的overflow属性设置或者返回如何处理呈现在元素框外面的内容。(在网页中使用到的地方很多)
visible
超出元素框的部分内容直接显示到框外，设置overflow的默认设置，不修剪
示例代码：
#d1{
height: 400px;
width:800px;
border: 2px black solid;
border-radius: 5px;
overflow: visible;/*使用visible默认超出部分显示到元素边框外面，内容不会被修剪*/
background-color: #ececec;
color: black;
font-size: 20px;
}
<h1>d1-------------</h1>
<div id="d1">
<p> 三层架构就是为了符合“高内聚，低耦合”思想，把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，
各层之间采用接口相互访问，并通过对象模型的实体类（Model）作为数据传递的载体，
不同的对象模型的实体类一般对应于数据库的不同表，
实体类的属性与数据库表的字段名一致。 [1] </p>
<p> 三层架构区分层次的目的是为了 “高内聚，低耦合”。
开发人员分工更明确，将精力更专注于应用系统核心业务逻辑的分析、设计和开发，
加快项目的进度，提高了开发效率，有利于项目的更新和维护工作。</p>
含义
<p> 三层架构主要是指将业务应用规划中的表示层 UI、数据访问层 DAL 以及业务逻辑层 BLL，
其分层的核心任务是“高内聚低耦合”的实现。在整个软件架构中，分层结构是常见和普通的软件结构框架，
同时也具有非常重要的地位和意义。这种三层架构可以在软件开发的过程中，划分技术人员和开发人员的具体开发工作，
重视核心业务系统的分析、设计以及开发，提高信息系统开发质量和开发效率，进而为信息系统日后的更新与维护提供很大的方便。 [4]
怎么样分层符合三层架构原则呢？主要有以下三种分层方式： [3] </p>
<p> 1、数据层不包含任何代码，只有数据库，还有相关的存储过程。这种模式下，数据层看起来就变得很简单了。
只包含所建立的数据库和一些存储过程（注意是存储过程）。</p>
</div>
对应效果:
hidden
超出框的内容会被修剪，即不显示，浏览器也不会有滚动条**(注：如果需要实现点击将隐藏部分显示可用js实现)**
示例代码：
#d2{
height: 400px;
width:800px;
border: 2px black solid;
border-radius: 5px;
overflow: hidden;/*使用hidden内容会被修剪，元素框以外的内容也不会显示，浏览器也不会有滚动条*/
background-color: #ececec;
color: black;
font-size: 20px;
}
<h1 id="h12">d2-------------</h1>
<div id="d2">
<p> 三层架构就是为了符合“高内聚，低耦合”思想，把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，
各层之间采用接口相互访问，并通过对象模型的实体类（Model）作为数据传递的载体，
不同的对象模型的实体类一般对应于数据库的不同表，
实体类的属性与数据库表的字段名一致。 [1] </p>
<p> 三层架构区分层次的目的是为了 “高内聚，低耦合”。
开发人员分工更明确，将精力更专注于应用系统核心业务逻辑的分析、设计和开发，
加快项目的进度，提高了开发效率，有利于项目的更新和维护工作。</p>
含义
<p> 三层架构主要是指将业务应用规划中的表示层 UI、数据访问层 DAL 以及业务逻辑层 BLL，
其分层的核心任务是“高内聚低耦合”的实现。在整个软件架构中，分层结构是常见和普通的软件结构框架，
同时也具有非常重要的地位和意义。这种三层架构可以在软件开发的过程中，划分技术人员和开发人员的具体开发工作，
重视核心业务系统的分析、设计以及开发，提高信息系统开发质量和开发效率，进而为信息系统日后的更新与维护提供很大的方便。 [4]
怎么样分层符合三层架构原则呢？主要有以下三种分层方式： [3] </p>
<p> 1、数据层不包含任何代码，只有数据库，还有相关的存储过程。这种模式下，数据层看起来就变得很简单了。
只包含所建立的数据库和一些存储过程（注意是存储过程）。</p>
</div>
效果：
scroll
内容超出元素框的部分，浏览器会有滚动条，使用滚动条的方式查看隐藏部分的内容
示例代码：
#d3{
height: 400px;
width:800px;
border: 2px black solid;
border-radius: 5px;
overflow: scroll;/*使用scroll使得超出规定范围内的内容使用滚动条的方式，超出的部分隐藏*/
background-color: #ececec;
color: black;
font-size: 20px;
}
<h1>d3-------------</h1>
<div id="d3">
<p> 三层架构就是为了符合“高内聚，低耦合”思想，把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，
各层之间采用接口相互访问，并通过对象模型的实体类（Model）作为数据传递的载体，
不同的对象模型的实体类一般对应于数据库的不同表，
实体类的属性与数据库表的字段名一致。 [1] </p>
<p> 三层架构区分层次的目的是为了 “高内聚，低耦合”。
开发人员分工更明确，将精力更专注于应用系统核心业务逻辑的分析、设计和开发，
加快项目的进度，提高了开发效率，有利于项目的更新和维护工作。</p>
含义
<p> 三层架构主要是指将业务应用规划中的表示层 UI、数据访问层 DAL 以及业务逻辑层 BLL，
其分层的核心任务是“高内聚低耦合”的实现。在整个软件架构中，分层结构是常见和普通的软件结构框架，
同时也具有非常重要的地位和意义。这种三层架构可以在软件开发的过程中，划分技术人员和开发人员的具体开发工作，
重视核心业务系统的分析、设计以及开发，提高信息系统开发质量和开发效率，进而为信息系统日后的更新与维护提供很大的方便。 [4]
怎么样分层符合三层架构原则呢？主要有以下三种分层方式： [3] </p>
<p> 1、数据层不包含任何代码，只有数据库，还有相关的存储过程。这种模式下，数据层看起来就变得很简单了。
只包含所建立的数据库和一些存储过程（注意是存储过程）。
其实这些存储过程的建立也是相当复杂的，因为它们可以完成除数据访问外的其他一些很强大的功能，如分页、实现搜索算法等。
数据访问的逻辑就都放在业务层，当然业务层还包含其他一些逻辑代码。我们来看一个示例，
假设数据库里有一个表 BOOKS（书），建立一个存储过程 GetAllBooks，用来读取书的信息，
这样在业务层里编一个方法 GetBookS（）和一个公用数据库访问类，GetBooks（）就通过数据库访问类打开连接，
执行在存储过程，返回数据 （返回类型可以是 DataT - able，DataSet，DataReader 或 者 实 体 类）。
业务层单独编译成一个或者几个 DLL 文件。接着就是表示层了，表示层通过调用GetBookS（）返回数据绑定在相关的控件里。
业务层的方法都是在表示层调用。一般来说 book.aspx 和 book.aspx.cs 都是表示层的内容，所有前台的设计、相关控件、数据缓存都是属于表示层。 [3] </p>
<p> 2、数据层还包含所有公共数据访问代码。这种模式和前一种差别不大，主要是把数据访问代码留到数据层。
这样可以很方便地实现对多数据库的支持。</p>
业务逻辑层直接调用数据层的相关访问数据的代码，完全不必了解底层是什么数据库。其他和前一种没什么分别。 [3]
<p> 3、所有数据读取都放在数据层。这种模式下像前面所述的 GetBooks（）方法都是放在数据层，在业务层再定义一个GetBookS（）
方法以供表示层调用。这种模式下业务层不但不必了解底层是什么数据库，而且连数据库的结构都不必了解了，
这是最标准的三层架构了，在 Microsoft 的 PetShop 4.0 里就是这种模式。 [3] </p>
</div>
效果图：
auto
内容超出元素框的部分，浏览器会有滚动条，使用滚动条的方式查看隐藏部分的内容
示例代码：
#d4{
height: 520px;
width:850px;
border: 2px black solid;
border-radius: 5px;
overflow: auto;/*使用auto内容会被修剪，元素框以外的内容显示滚动条和scroll属性相似*/
background-color: #ececec;
color: black;
font-size: 20px;
}
<h1>d4-------------</h1>
<div id="d4">
<p> 三层架构就是为了符合“高内聚，低耦合”思想，把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，
各层之间采用接口相互访问，并通过对象模型的实体类（Model）作为数据传递的载体，
不同的对象模型的实体类一般对应于数据库的不同表，
实体类的属性与数据库表的字段名一致。 [1] </p>
<p> 三层架构区分层次的目的是为了 “高内聚，低耦合”。
开发人员分工更明确，将精力更专注于应用系统核心业务逻辑的分析、设计和开发，
加快项目的进度，提高了开发效率，有利于项目的更新和维护工作。</p>
含义
<p> 三层架构主要是指将业务应用规划中的表示层 UI、数据访问层 DAL 以及业务逻辑层 BLL，
其分层的核心任务是“高内聚低耦合”的实现。在整个软件架构中，分层结构是常见和普通的软件结构框架，
同时也具有非常重要的地位和意义。这种三层架构可以在软件开发的过程中，划分技术人员和开发人员的具体开发工作，
重视核心业务系统的分析、设计以及开发，提高信息系统开发质量和开发效率，进而为信息系统日后的更新与维护提供很大的方便。 [4]
怎么样分层符合三层架构原则呢？主要有以下三种分层方式： [3] </p>
<p> 1、数据层不包含任何代码，只有数据库，还有相关的存储过程。这种模式下，数据层看起来就变得很简单了。
只包含所建立的数据库和一些存储过程（注意是存储过程）。
其实这些存储过程的建立也是相当复杂的，因为它们可以完成除数据访问外的其他一些很强大的功能，如分页、实现搜索算法等。
数据访问的逻辑就都放在业务层，当然业务层还包含其他一些逻辑代码。我们来看一个示例，
假设数据库里有一个表 BOOKS（书），建立一个存储过程 GetAllBooks，用来读取书的信息，
这样在业务层里编一个方法 GetBookS（）和一个公用数据库访问类，GetBooks（）就通过数据库访问类打开连接，
执行在存储过程，返回数据 （返回类型可以是 DataT - able，DataSet，DataReader 或 者 实 体 类）。
业务层单独编译成一个或者几个 DLL 文件。接着就是表示层了，表示层通过调用GetBookS（）返回数据绑定在相关的控件里。
业务层的方法都是在表示层调用。一般来说 book.aspx 和 book.aspx.cs 都是表示层的内容，所有前台的设计、相关控件、数据缓存都是属于表示层。 [3] </p>
<p> 2、数据层还包含所有公共数据访问代码。这种模式和前一种差别不大，主要是把数据访问代码留到数据层。
这样可以很方便地实现对多数据库的支持。</p>
业务逻辑层直接调用数据层的相关访问数据的代码，完全不必了解底层是什么数据库。其他和前一种没什么分别。 [3]
<p> 3、所有数据读取都放在数据层。这种模式下像前面所述的 GetBooks（）方法都是放在数据层，在业务层再定义一个GetBookS（）
方法以供表示层调用。这种模式下业务层不但不必了解底层是什么数据库，而且连数据库的结构都不必了解了，
这是最标准的三层架构了，在 Microsoft 的 PetShop 4.0 里就是这种模式。 [3] </p>
</div>
效果：
inherit
子标签overflow属性的值是inherit时，当前标签的overflow属性值会继承自父标签的overflow的值
注意：IE浏览器要显示该属性，需要IE7版本之后才能行
示例代码：
#d4{
height: 520px;
width:850px;
border: 2px black solid;
border-radius: 5px;
overflow: auto;/*使用auto内容会被修剪，元素框以外的内容显示滚动条和scroll属性相似*/
background-color: #ececec;
color: black;
font-size: 20px;
}
#d5{
height: 400px;
width:800px;
border: 2px black solid;
border-radius: 5px;
overflow: inherit;/*使用inherit overflow属性的值会从父标签元素继承*/
background-color: #ececec;
color: black;
font-size: 20px;
margin-left: 15px;
margin-top: 15px;
}
<div>
<h1>d5---d5的overflow继承了父标签d4的overflow-------------如果是IE浏览器IE7之前的版本都不支持"inherit"值</h1>
<div id="d4">
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div id="d5">
<p> 三层架构就是为了符合“高内聚，低耦合”思想，把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，
各层之间采用接口相互访问，并通过对象模型的实体类（Model）作为数据传递的载体，
不同的对象模型的实体类一般对应于数据库的不同表，
实体类的属性与数据库表的字段名一致。 [1] </p>
<p> 三层架构区分层次的目的是为了 “高内聚，低耦合”。
开发人员分工更明确，将精力更专注于应用系统核心业务逻辑的分析、设计和开发，
加快项目的进度，提高了开发效率，有利于项目的更新和维护工作。</p>
含义
<p> 三层架构主要是指将业务应用规划中的表示层 UI、数据访问层 DAL 以及业务逻辑层 BLL，
其分层的核心任务是“高内聚低耦合”的实现。在整个软件架构中，分层结构是常见和普通的软件结构框架，
同时也具有非常重要的地位和意义。这种三层架构可以在软件开发的过程中，划分技术人员和开发人员的具体开发工作，
重视核心业务系统的分析、设计以及开发，提高信息系统开发质量和开发效率，进而为信息系统日后的更新与维护提供很大的方便。 [4]
怎么样分层符合三层架构原则呢？主要有以下三种分层方式： [3] </p>
<p> 1、数据层不包含任何代码，只有数据库，还有相关的存储过程。这种模式下，数据层看起来就变得很简单了。
只包含所建立的数据库和一些存储过程（注意是存储过程）。
其实这些存储过程的建立也是相当复杂的，因为它们可以完成除数据访问外的其他一些很强大的功能，如分页、实现搜索算法等。
数据访问的逻辑就都放在业务层，当然业务层还包含其他一些逻辑代码。我们来看一个示例，
假设数据库里有一个表 BOOKS（书），建立一个存储过程 GetAllBooks，用来读取书的信息，
这样在业务层里编一个方法 GetBookS（）和一个公用数据库访问类，GetBooks（）就通过数据库访问类打开连接，
执行在存储过程，返回数据 （返回类型可以是 DataT - able，DataSet，DataReader 或 者 实 体 类）。
业务层单独编译成一个或者几个 DLL 文件。接着就是表示层了，表示层通过调用GetBookS（）返回数据绑定在相关的控件里。
业务层的方法都是在表示层调用。一般来说 book.aspx 和 book.aspx.cs 都是表示层的内容，所有前台的设计、相关控件、数据缓存都是属于表示层。 [3] </p>
<p> 2、数据层还包含所有公共数据访问代码。这种模式和前一种差别不大，主要是把数据访问代码留到数据层。
这样可以很方便地实现对多数据库的支持。</p>
业务逻辑层直接调用数据层的相关访问数据的代码，完全不必了解底层是什么数据库。其他和前一种没什么分别。 [3]
<p> 3、所有数据读取都放在数据层。这种模式下像前面所述的 GetBooks（）方法都是放在数据层，在业务层再定义一个GetBookS（）
方法以供表示层调用。这种模式下业务层不但不必了解底层是什么数据库，而且连数据库的结构都不必了解了，
这是最标准的三层架构了，在 Microsoft 的 PetShop 4.0 里就是这种模式。 [3] </p>
</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
<div style="border:1px black solid;width: 120px;height: 20px;margin-top: 5px;margin-left: 5px;">这是其它div</div>
</div>
</div>
实现效果图：
auto和scroll的区别
其中相同点：就是两者设置的overflow属性都能使得内容超出元素框时浏览器都显示滚动条
不同点是：内容没有超出元素限定的框时auto会隐藏滚动条。而scroll依旧会显示滚动条，如有需要则在内容超出时禁用该滚动条，正常情况下auto更实用，但是根据情况的不同选择其一使用
