CSS入门:五个简朴,但有效的CSS属性
发布时间：2018-09-10 06:22:58 所属栏目：创业 来源：站长网
导读：本日说的这5个CSS属性,你也许会很认识,可是你也许会很少会去行使.这个教程所讲得不是关于CSS3的属性,而是仍旧行使CSS2属性来声名,这些属性普及的被各类赏识器所支持:clip,min-height,white-space,cursor和display.以是不要错过这个教程,由于你会发明他们是
|
本日说的这5个CSS属性,你也许会很认识,可是你也许会很少会去行使.这个教程所讲得不是关于CSS3的属性,而是仍旧行使CSS2属性来声名,这些属性普及的被各类赏识器所支持:clip,min-height,white-space,cursor和display.以是不要错过这个教程,由于你会发明他们是何等的有效. 1.CSS Clip Clip属性就像一个掩蔽物.它可以把元素内容不要的部门掩饰起来.起主要指定元素的位置,以相对定位:position:absolute.然后指定相对付元素的值:top,right,bottom,left.  行使clip做演示 下面用图片来举个例子来声名怎样行使这个属性.起首给div做相对定位,然后再给图像指定绝对位置.  Copy to Clipboard  引用的内容：[www.veryhuo.com]
.clip { position: relative; height: 130px; width: 200px; border: solid 1px #ccc; } .clip img { position: absolute; clip: rect(30px 165px 100px 30px); } 行使clip来演示如保剪辑 在这个例子里演示了怎样行使clip来重设图像的位置和尺寸.原图像的巨细如图所示.此刻要把这个图像放到一个正方形的容器里,并尺寸为原本的一半.此刻来看怎样来实现这个结果,起首用width,height来配置图像的高度和宽度,然后行使clip来剪辑图像.并让图像相对左边15px.  Copy to Clipboard 引用的内容：[www.veryhuo.com]
.gallery li { float: left; margin: 0 10px 0 0; position: relative; width: 70px; height: 70px; border: solid 1px #000; } .gallery img { width: 100px; height: 70px; position: absolute; clip: rect(0 85px 70px 15px); left: -15px; } （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
