一,overflow属性；
1,四个值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
2，demo：
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，
不论是否需要，用户代理都会提供一种滚动机制。
因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
<style type="text/css">
div
{
background-color:#00FFFF;
150px;
height:150px;
overflow: inherit;
}
</style>
二,显示效果（visibility）；
1，visibility 属性规定元素是否可见；
2，visible：默认值，元素可见
hidden：元素不可见，但是依然占据空间
collapse：用在表格元素时，可删除一行或一列，且不影响表格的布局(后面学习JS再演示)
三，opacity：属性（设置不透明度）；
1，特点：opacity 属性设置元素的不透明级别
取值 opacity : value; eg:opacity:0.0~1.0
value 规定不透明度，从 0.0 （完全透明）到 1.0（完全不透明）
2，demo：
<p id="p1">段落，opacity 值为 0</p>
<p id="p2">段落，opacity 值为 0.5</p>
<p id="p3">段落，opacity 值为 1</p>
css：
p {border:1px solid black;}
#p1 {opacity:0;}
#p2 {opacity:0.5;}
#p3 {opacity:1;}
四，vertical-align 属性；
1，特点：vertical-align 属性；
1），设置单元格框中的单元格内容的垂直对齐方式
2），对于行内块级元素，如 <img>，可设置垂直对齐方式
定义行内元素的基线相对于该元素所在行的基线的垂直对齐
2，常用取值
baseline：默认，元素放置在父元素的基线上
top：把元素的顶端与行中最高元素的顶端对齐
bottom：把元素的顶端与行中最低的元素的顶端对齐
middle：把此元素放置在父元素的中部
3，demo：
<div class="div_img">
<img src="images/star_focus.png" id="img1">
<img src="images/star_focus.png" id="img2">
<img src="images/star_focus.png" id="img3">
</div>
css：
.div_img
{
400px;
height:100px;
border:1px solid black;
}
#img1{
vertical-align:middle;
}
#img2{
vertical-align:top;
}
#img3{
vertical-align:bottom;
}
五，几种常见的居中方式；
1,文字的垂直居中
<div style="line-height:50px;height:50px;(只有相同了才能垂直居中)background:red;">565656
</div>
2，层的水平居中：
HTML：
<div class="parent_div">
<div class="child_div ">1111111111</div>
</div>
CSS：
.parent_div{
100%;
background-color: gray;
}
.child_div
{
580px;
height: 35px;
margin: 0 auto;
background-color: red;
}
3，/*3,层中文字水平居中*/
text-align:center;
在2中例子中CSS中加上：text-align:center;
六，光标 cursor：
可取值
default ：默认是 箭头
pointer：小手
crosshair ：十字光标
text ：文本输入样式
wait ：旋转的圈，网速差时或卡了一下子读不出来的样子；
help ：问号光标，帮助时出现；
七，无序列表补充（list-style-type）；
1，无序列表取值
none：无标记
disc：实心圆，为默认值
circle：空心圆
square：实心方块
decimal：数字（如 1,2,3,4,5），为默认值
lower-roman：小写罗马数字（如 i, ii, iii, iv, v）
upper-roman：大写罗马数字（如 I, II, III, IV, V)
2，图片：list-style-image：url（）；
3，list-style-position列表项位置
outside：标记位于文本的左侧，且放置在文本以外，为默认值
inside：标记放置在文本以内
display:block行元素转换成块元素；
1,四个值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
2，demo：
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，
不论是否需要，用户代理都会提供一种滚动机制。
因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
<style type="text/css">
div
{
background-color:#00FFFF;
150px;
height:150px;
overflow: inherit;
}
</style>
二,显示效果（visibility）；
1，visibility 属性规定元素是否可见；
2，visible：默认值，元素可见
hidden：元素不可见，但是依然占据空间
collapse：用在表格元素时，可删除一行或一列，且不影响表格的布局(后面学习JS再演示)
三，opacity：属性（设置不透明度）；
1，特点：opacity 属性设置元素的不透明级别
取值 opacity : value; eg:opacity:0.0~1.0
value 规定不透明度，从 0.0 （完全透明）到 1.0（完全不透明）
2，demo：
<p id="p1">段落，opacity 值为 0</p>
<p id="p2">段落，opacity 值为 0.5</p>
<p id="p3">段落，opacity 值为 1</p>
css：
p {border:1px solid black;}
#p1 {opacity:0;}
#p2 {opacity:0.5;}
#p3 {opacity:1;}
四，vertical-align 属性；
1，特点：vertical-align 属性；
1），设置单元格框中的单元格内容的垂直对齐方式
2），对于行内块级元素，如 <img>，可设置垂直对齐方式
定义行内元素的基线相对于该元素所在行的基线的垂直对齐
2，常用取值
baseline：默认，元素放置在父元素的基线上
top：把元素的顶端与行中最高元素的顶端对齐
bottom：把元素的顶端与行中最低的元素的顶端对齐
middle：把此元素放置在父元素的中部
3，demo：
<div class="div_img">
<img src="images/star_focus.png" id="img1">
<img src="images/star_focus.png" id="img2">
<img src="images/star_focus.png" id="img3">
</div>
css：
.div_img
{
400px;
height:100px;
border:1px solid black;
}
#img1{
vertical-align:middle;
}
#img2{
vertical-align:top;
}
#img3{
vertical-align:bottom;
}
五，几种常见的居中方式；
1,文字的垂直居中
<div style="line-height:50px;height:50px;(只有相同了才能垂直居中)background:red;">565656
</div>
2，层的水平居中：
HTML：
<div class="parent_div">
<div class="child_div ">1111111111</div>
</div>
CSS：
.parent_div{
100%;
background-color: gray;
}
.child_div
{
580px;
height: 35px;
margin: 0 auto;
background-color: red;
}
3，/*3,层中文字水平居中*/
text-align:center;
在2中例子中CSS中加上：text-align:center;
六，光标 cursor：
可取值
default ：默认是 箭头
pointer：小手
crosshair ：十字光标
text ：文本输入样式
wait ：旋转的圈，网速差时或卡了一下子读不出来的样子；
help ：问号光标，帮助时出现；
七，无序列表补充（list-style-type）；
1，无序列表取值
none：无标记
disc：实心圆，为默认值
circle：空心圆
square：实心方块
decimal：数字（如 1,2,3,4,5），为默认值
lower-roman：小写罗马数字（如 i, ii, iii, iv, v）
upper-roman：大写罗马数字（如 I, II, III, IV, V)
2，图片：list-style-image：url（）；
3，list-style-position列表项位置
outside：标记位于文本的左侧，且放置在文本以外，为默认值
inside：标记放置在文本以内
display:block行元素转换成块元素；