项目知识点完善
一,overfloat属性;
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;
width: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 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
{
width: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{
width: 100%;
}
.child_div
{
width: 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>
<div class="div_all" >
<ul>
<li id='li_one'><a href="webpage/about.htm">第一组</a>
<div id="sub_div">
<a href="https://www.baidu.com">刘吉祥</a>
<a href="https://www.baidu.com">高伟超</a>
<a href="https://www.baidu.com">任雨辉</a>
<a href="https://www.baidu.com">王英杰</a>
</div>
</li>
<li><a href="https://www.baidu.com">第二组</a></li>
<li><a href="https://www.baidu.com">第三组</a></li>
</ul>
</div>
</div>
</body>
CSS:
<style type="text/css">
*{padding: 0;margin:0;}
li{width: 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>