web前端

位置:IT落伍者 >> web前端 >> 浏览文章

技巧:如何定义CSS元素的显示属性


发布日期:2018年03月26日
 
技巧:如何定义CSS元素的显示属性
处理HTML元素最关键的一个窍门没有任何特别的就是理解他们是如何工作的大部分页面都可以使用一点点的标签组合起来你可以为每一个你选定的标签样式化浏览器默认的可视化样式元素由变化的字体样式边界补白和和重要的显示类型
最基本的显示类型是内联inline块block和清除none他们分别可以用inlineblock和none的值赋予display属性来操作
inline就如本身语义所明示的显示随着行流动的元素锚和强调元素都是传统的内联元素
block使元素前后都有断行标题和段落元素都是传统的块元素的例子
none不显示这个元素听起来毫无用处但于易用性考虑(请看亲和连接)改变样式表或者高级的翻转效果都有很好的用途
比如这个站点的默认原始版本通过操纵一些传统的内联和块元素来适应设计
h {
display: inline;
fontsize: em;
}
#header p {
display: inline;
fontsize: em;
paddingleft: em;
}
这使得“htmldogcom”的标题和标签行可以并排而不是一上一下维护最优的易用性
#navigation #seeAlso #comments #standards {
display: none;
}
上述代码使用在打印样式中用于“关闭”这些元素比如对于一个单一的页面导航通常是不必须的
注意
display: none和visibility: hidden不同之处在于display: none使元素完全是个死球然而visibility:
hidden虽不出现在内容中但保留着这个元素的流位置比如如果三段中的第二端设为display: none第一段会直接到达第三段而设为visibility: hidden的话这个段落会有一个间隔
表格
也许理解表格相关的显示属性值的最好方法是关心HTML表格table是初始化的显示你可以用tr和td分别摹拟tablerow和tablecell值
display属性走得更远提供tablecolumntablerowgrouptablecolumngrouptableheadergrouptablefootergroup和tablecaption的值 都是自描述的这些值显而易见的好处是你可以用列来构造表格代替有偏见的row
最后inlinetable设置前后不断行的表格
注意
对CSS表格失去控制的话可能严重的损害你网页的亲和力(易用性)HTML应该用来传达内容的所以你有表格式数据的话你应该用HTML表格来安排它们使用CSS表格仅仅能给数据调调味如果没有CSS的话完全不可读十分不好别走Michael Jackson的路
其他显示类型
listitem也是自描述的一般以列表的形式显示使用在除li的HTML元素上为了显示正确使用这个显示类型的应该嵌套在ul或者ol元素内
runin使元素内联或块显示取决于其父元素的的显示属性在IE和基于Mozilla的浏览器中都不能工作
campact也使元素内联或者块显示同样取决于上下文它也不能很好工作
marker仅仅是与:before和:after伪元素一起来定义content属性的值content属性的自动值已经是marker所以这只对覆盖掉前面的content的显示属性有用

上一篇:浅析LigerUi开发中谨慎载入common.css文件

下一篇:关于innerHTML后丢失动态绑定的EVENT问题