CSS3 知识量：11 - 43 - 138
CSS中每个元素视为一个盒子，如同容器一样，当盒子容不下元素的内容时，就会溢出。overflow属性用来指定此时的处理办法。overflow是CSS2.1规范中的属性，在CSS3中，则增加了overflow-x和overflow-y属性，用于分别定义水平方向和垂直方向内容溢出的裁切。其语法为：
overflow-x : visible | hidden | scroll | auto | no-display | no-content overflow-y : visible | hidden | scroll | auto | no-display | no-content
参数简要说明如下：
visible：默认值，表示不裁切容器中的任何内容、不添加滚动条，元素将被裁切为包含对象的窗口大小，且clip属性设置将失效。
hidden：内容溢出时，所有内容将隐藏，且不显示滚动条。
scroll：不论是否溢出，都会显示横向或纵向滚动条。
auto：在溢出时裁切内容并显示滚动条，否则不显示滚动条。
no-display：内容溢出时不显示元素，此时相当于给元素添加了display:none声明。
no-content：内容溢出时不显示内容，此时相当于添加了visibility:hidden声明。
下面是一个简单的应用：
<!DOCTYPE html>
<html>
<head>
<title>overflow</title>
<meta charset="UTF-8">
<style type="text/css">
/*设置所有元素的内外边距为0，消除浏览器默认定义的影响*/
*{
margin: 0;
padding: 0;
}
p{
width: 120px;
height: 70px;
padding: 5px;
background-color: #90ED7D;
margin-bottom: 20px;
}
p:nth-of-type(1){
overflow-x: visible;
overflow-y: visible;
}
p:nth-of-type(2){
overflow-x: hidden;
overflow-y: hidden;
}
p:nth-of-type(3){
overflow-x: scroll;
overflow-y: scroll;
}
p:nth-of-type(4){
overflow-x: auto;
overflow-y: auto;
}
p:nth-of-type(5){
overflow-x: auto;
overflow-y: auto;
}
</style>
</head>
<body>
<p>visible visible visible visible visible visible visible visible </p>
<p>hidden hidden hidden hidden hidden hidden hidden hidden </p>
<p>scroll scroll scroll scroll scroll scroll </p>
<p>auto auto auto auto auto auto auto auto </p>
<p>auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto </p>
</body>
</html>显示的效果为：
resize属性允许用户通过拖动的方式来改变元素的尺寸，实现元素自由缩放。其语法为：
resize : none | both | horizontal | vertical | inherit
参数简要说明如下：
none：不允许用户拖动以修改尺寸。
both：用户可以拖动元素，同时修改元素的宽度和高度。
horizontal：用户可以拖动元素，但仅可以修改元素的宽度，不能修改元素的高度。
vertical：用户可以拖动元素，但仅可以修改元素的高度，不能修改元素的宽度。
inherit：继承父元素的resize值。
下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>resize</title>
<meta charset="UTF-8">
<style type="text/css">
*{
float: left;
clear: both;
}
div{
background-color: #FAFAD2;
padding: 20px;
}
#one{
width: 150px;
height: 100px;
margin: 20px;
}
#two{
width: 150px;
height: 100px;
margin: 20px;
resize: none;
}
</style>
</head>
<body>
<div>
<span>第1个文本域（默认值both）</span>
<textarea id="one"></textarea>
<span>第2个文本域（none）</span>
<textarea id="two"></textarea>
</div>
</body>
</html>运行的结果为：
第2个文本域因为resize值被设置为none，因此，不能随意拖动或改变尺寸。
外轮廓outline在页面的效果与border类似，所不同的是，outline不一定是矩形，且outline不占用网页布局空间。outline语法为：
outline : outline-color | outline-style | outline-width | outline-offset | inherit
参数简要说明如下：
outline-color：定义轮廓线的颜色，默认为黑色。
outline-style：定义轮廓线的样式，默认为none，此时比对轮廓进行绘制。
outline-width：定义轮廓线的宽度，默认为medium，表示中等线宽。
outline-offset：定义轮廓线的偏移量，可取正数或负数，表示向外或向内多少像素。
inherit：继承父元素的outline效果。
注意：以上参数需要按顺序设置，即使省略某一个也需要注意顺序。
下面是简单示例：
<!DOCTYPE html>
<html>
<head>
<title>outline</title>
<meta charset="UTF-8">
<style type="text/css">
*{
float: left;
clear: both;
}
div{
background-color: #FAFAD2;
padding: 20px;
}
#one{
width: 150px;
height: 100px;
margin: 20px;
}
#two{
width: 150px;
height: 100px;
margin: 20px;
outline: 5px solid greenyellow ;
}
</style>
</head>
<body>
<div>
<span>第1个文本域</span>
<textarea id="one"></textarea>
<span>第2个文本域</span>
<textarea id="two"></textarea>
</div>
</body>
</html>显示的效果为：
除了以上使用方法外，还可以通过outline-color、outline-style、outline-width和outline-offset属性来改变外轮廓，例如：
<!DOCTYPE html>
<html>
<head>
<title>outline</title>
<meta charset="UTF-8">
<style type="text/css">
*{
float: left;
clear: both;
}
div{
background-color: #FAFAD2;
padding: 20px;
}
#one{
width: 150px;
height: 100px;
margin: 20px;
outline-color: deepskyblue;
outline-offset: -5px;
}
#two{
width: 150px;
height: 100px;
margin: 20px;
outline-color: darkorange;
}
</style>
</head>
<body>
<div>
<span>第1个文本域</span>
<textarea id="one"></textarea>
<span>第2个文本域</span>
<textarea id="two"></textarea>
</div>
</body>
</html>选中第1个和第2个文本域时，显示的效果为：
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6