关闭顶部展开顶部

CSS教程13、CSS的display属性[翻译Htmldog]_CSS教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!
  
  操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成,本质上是显示类型。

  display属性基本上分为inline,block,和none。
  inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
  block元素前后换行。标题和段落元素是块元素。
  none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用。

  设定表现可以更好运用在网页制作上。

示例代码 [www.mb5u.com]
h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

  设定标题h1为行元素,可以和后面的元素在同一行。

示例代码 [www.mb5u.com]
#navigation, #seeAlso, #comments, #standards {
display: none;
}

  上面的代码可以使用在打印样式里,比如在导航使用,可以在打印时不显示导航这些无关紧要的东西。

  display:none和visibility:hidden;的不同在于display:none完全取消元素的显示,visibility:hidden保持元素位置但视觉上的内容不可见。例如,假如3的第二段设置为display:none,第一段将仅跟在第三段,假如设置为visibility:hidden,段落间就会空出。

表格

  明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现,你可以使用table-row模拟table-cell模拟td。

  display属性更进一步,可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用columns构建表格,比在html中使用行构建快速。

  最后,inline-table设定表格前后不换行。

  使用CSS表格会严重损害可用性。HTML应该用来传递语意,所以假如你有表格数据,那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据假如没有CSS数据将不可读。

其他表现形式

  list-item列表项目,就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
  run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
  compat根据上下阿文决定表现形式,同样IE和Mozilla都不支持。
  maker仅仅使用在:before和:after伪元素,设定content属性的表现。content属性默认表现就是maker,所以它只有在覆盖原来属性时才有用。
  content属性,它的默认就是maker,所以只有在覆盖原来属性时使用。
  

来源:无忧整理//所属分类:CSS教程/更新时间:2007-03-07
loading.. 评论加载中....
相关CSS教程
闁汇埄鍨遍悺鏇綖閸℃稒鈷掓い鏇楀亾妞わ綇鎷�
婵炲濮崑鎾斥槈閺傝法澧涙俊鑼€濋柣銏╁灲閹凤拷
婵犵鈧啿鈧绱炲澶嬪殧鐎瑰嫭澹嗙换涔侀柣銏╁灲閹凤拷
婵犵鈧啿鈧绱炲澶婄闁诡垎鍕槬闁诲酣娼уΛ娑㈡偉閿燂拷
闂佺ǹ绻愰幊搴ㄥ焵椤掑倸甯堕幖瀛樼矒瀹曟繈鏁撻敓锟�
闂佺ǹ绻愰幊搴ㄥ焵椤掆偓閸氬绮婇敂鍓х煓閻庯絺鏅濋惌娆戠磽娓氬﹥瀚�
闂佽 鍋撴い鏍ㄧ☉閻︻噣鏌涘┑鎰胺缂併劍妞藉銊╊敍濞嗘垵绗¢梺鍝勫€婚幊鎾舵閿燂拷
闂佸搫鍟版慨椋庣礊婢舵劖鐓i悹杞拌濞层倕霉閿濆棙绀€闁告ɑ鐗犲畷鎰版晸閿燂拷
濠碘槅鍨崜婵嗩熆濡吋瀚绘い鎾寸箖鐎氾拷
婵犵鈧啿鈧绱炲鍥ㄥ妞ゆ挻绻冪€氳櫕淇婇妤€澧叉繝顫嫹
濠碘槅鍨崜婵嗩熆濮椻偓瀹曨剟顢欓崗鐓庘偓鐢告煛閸繄孝濠殿噯鎷�
濠碘槅鍨崜婵嗩熆濮椻偓閺屽懘鍩€椤掆偓閳诲酣骞戦幇闈涙闂佸搫瀚搁幏锟�
濠碘槅鍨崜婵嗩熆濮椻偓瀹曪綁骞嬪┑鍫紝
婵犵鈧啿鈧绱炲澶婄煑闁瑰瓨绻勯瀛樹繆椤栨澧叉繝顫嫹
闁诲骸鍘滈崜婵嬫偋閹惰棄鐭楀┑鐘插暙閼靛綊鏌ら懞銉ュ闁绘牭缍佸畷娆撴晸閿燂拷
UB闂佸湱绮崝妤呯嵁閸モ晜瀚氶悗娑櫳戦~锟�
闂佽壈椴稿濠氭焾鐎电硶鍋撻獮鍨仾婵犫偓閿燂拷
闁诲骸绠嶉崹鍝勶耿閸㈢嚜
闂佸憡姊绘慨椋庣礊婢跺瞼鍗氭繛鍡楀閸炲绻涚紙鐘哄厡闁稿骏鎷�
缂傚倷鐒﹂悷锕傚垂濠婂嫮顩锋い鎺嶇缁插湱鈧偣鍊濈紓姘额敊閿燂拷
©2017 www.mb5u.com濠碘槅鍨崜婵嗩熆濮椻偓瀵噣鎮╅幓鎺撳瘶
闂佽 鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷