项目知识点完善

一,overfloat属性；

1,四个值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

2，demo：

<body>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，

不论是否需要，用户代理都会提供一种滚动机制。

因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。

</div>

</body>

div

{

background-color:#00FFFF;

150px;

height:150px;

overflow: inherit;

}

</style>

二,显示效果（visibility）；

1，visibility 属性规定元素是否可见；

2，visible：默认值，元素可见

hidden：元素不可见，但是依然占据空间

collapse：用在表格元素时，可删除一行或一列，且不影响表格的布局(后面学习JS再演示)

三，opacity：属性（设置不透明度）；

1，特点：opacity 属性设置元素的不透明级别

取值 opacity : value;

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>

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>

CSS：

.parent_div{

100%;

}

.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：标记放置在文本以内

八，下拉列表demo：

HTML:

<body>

<div>

<ul>

</div>

</li>

</ul>

</div>

</body>

CSS:

*{padding: 0;margin:0;}

li{ 100px;height: 30px;background: black;text-align: center;}

a{text-decoration: none;color:#fff;margin-bottom: 10px;}

.div_all li{float: left;}

#sub_div{clear: both;}

#sub_div a{color: black;padding: 8px;display: none;}

#li_one:hover a{display: block;}

</style>