Rumah > Artikel > hujung hadapan web > CSS属性_html/css_WEB-ITnose
文档流
行框:按顺序水平摆放,放不下出现滚动条
块框:按顺序垂直摆放,放不下出现滚动条
1,相对定位,原来在文档流中的位置仍然保留,当前位置是相对于原始位置偏移后的结果。
position: relative;#pos {position: relative;top: 5px;left: 55px;}2,绝对定位 position: absolute;
#pos {position: absolute;top: 0px;left: 0px;}
<div> </div><div> </div><div id="pos"><div id="test">测试</div></div><div> </div><div> </div>#pos {position: absolute;top: 30px;left: 100px;}#test {position: absolute;top: 5px;left: 20px;}3,浮动:脱离文档流,向上浮起一层,所有同一容器内的浮动元素根据 float 属性值按顺序进行排列,例如如果都是 float:left 则按从左向右的顺序排列。也会遮盖住文档流中未浮动的正常元素。
<div> </div><div> </div><div> </div><div> </div><div> </div>div {border-style: solid;border-width: 1px;border-color: black;width: 50px;height: 50px;margin-right: 5px;float: left;}
<p>一段文字中的<span style='="font-size:20pt;' color:red>一部分显示效果有所不同</span>,可以采用span元素来实现</p>
显示:document.getElementById('id').style.display='' ;隐藏:document.getElementById('id').style.display='none' ;
显示:document.getElementById('id').style.visibility='visible' ;隐藏:document.getElementById('id').style.visibility='hidden' ;
3,cursor,用于设置目标对象上光标的形状。该属性常用的值auto(自动光标),crosshair(十字线光标),default(客户端光标),hand(手形光标),move(十字箭头光标),help(带问号的帮助光标),text(文本光标),wait(沙漏光标),url(自定义光标)。比如:
<div style="cursor:wait;"></div>