返回列表 发新帖

列元素所用属性之谜

456.8k 9
swmozowtfl 发表于 2015-7-26 20:47:12|湖北 | 查看全部 阅读模式
在table表格元素中,有一个col元素(它还有一个孪生胞兄colgroup元素),在 w3c 标准中,这个元素被称为列元素,用于定义表格中的某些列中的表现形式,在现行及常见的教程中,认为col元素可以使用常见的全局属性,以及align、valign、width等属性(乃至html 4.1 及 5.0 规范文档中,也同意该元素可以使用全局属性),很多demo也用它来举例说明如何让表格中的某列居中对齐、右对齐或改变某列的文字颜色,而事实上在大家常年的实践中,已经证明了一个很恐怖的事情…align也好valign也罢,甚至连全局属性中的color属性都完全不起作用,这到底是发生了什么事。: t0 e7 D/ l4 c% T0 Y$ z! Z* ]1 q
照例先上结论:
0 z- @! i" |2 a在 css 2 中,列元素就仅能使用border、background、width及visibility这四个属性,其它属性(如对齐及字色都无法生效)。
2 x  K. `  T( s9 \ie6、ie7及ie8(q)遵循常见教程,可以使用各种对齐和文字相关设置。6 @, Z- h& n  \# T6 A
ie9开始及现在所有常用非ie浏览器均支持:nth-child(n)选择器,可以用该选择器实现列选择,并支持所有全局 css 属性。
# w& ?) a  X+ ]" i& m( j: Jie8(s)无解(因为它不支持上述选择器),除第一条所描述的 4 个 css 属性之外,无法统一改变列的对齐及字色。
# r- j1 z+ a3 K/ s4 D) s9 C而col及colgroup元素,除了对ie6、7、8进行兼容之外,已经没用了。  B! h/ i) K2 r+ P' w! h  f
为什么,这究竟是为什么……
* P  x9 n# `" Q# f4 v8 T2 N$ Y+ a从比较简单而明显的角度说,所有元素的属性在未定义的情况下,都是“继承”,也就是与其父元素属性相同。而表格的 html 书写方式,是以行为基础的,单元格是行的子元素,但不是列的,所以它继承不到列的属性。- w2 ^) M- v9 p
从更根本的角度说,是 css 的工作模式所决定的。页面的一切表现均交由 css 进行计算和渲染,而 css 的基本工作方式遵循下面的步骤:
& L% i$ Z& j6 v$ s3 C$ ?解析样式表和文档$ p. t( ]" H9 T
对于文档中的每个元素:
2 [( @& `* v" r: j* K& A/ \* I; S决定应用哪个 css 规则。3 Z" H( L2 l3 ~/ Z
使用这些规则做出 css 级联。
1 @1 J; v& k; |1 g8 C, }- `如果级联的结果是关键字“继承”(或继承的属性没有规定值),则进行继承
7 |8 o* R6 z/ N* q# C7 C# G执行计算(把’em’变成’px’等等)。在 css 2.1 中,getcomputedstyle()dom方法负责返回这些值。
6 T9 d8 t7 f9 K" I( t/ P9 X此时,每个元素的所有属性都会有一个值。' m: y/ |. R* Y& I) ~
排列文档版式
/ E) ?! F5 X6 J; R5 \$ T9 e绘制文档# S2 N; B/ C, J: h) F: S( P
在这样的工作顺序下,因为列元素是display:table-column,而单元格元素是display:table-cell,他们之间的具体关系要到第三步才能确认,因为你需要计算某一个单元格横跨几列或几行,才能确定某一个单元格到底是第几列。而在那之前,也就是第二步的时候,每个元素的属性值都已经计算出来了!但你还不知道哪个单元是第几列,所以你没办法知道该列的值。
+ W8 ~  z7 R# S$ g5 q8 P然后我做了一个很无聊的demo,使用上面说到的 css 3 选择器,选择所有偶数列的单元格,变成蓝色;而让所有第三列的单元格变成黄色。然后分别对 n 行 n 列的单元格进行合并操作(也就是第一行的第一个单元格占据3个单元格的,第二行的第二个单元格占据3个单元格,以此类推)。结果如下:9 d$ q- f4 {% q& X; w: U
, D. S  G- X1 @8 S
                               
登录/注册后可看大图

4 r5 c2 E0 q) E+ r8 |列元素所用属性之谜
, A3 f: f9 \' g; }% T6 e因为对单元格进行了列合并,而那个选择器的本质又是按照行而非列选择的,结果就变成上面那样了(没能在视觉上垂直渲染某一列)。
& u) d* M! C& h7 p( e; @6 H话虽这么说,但在脱离了表格布局那么多年的今天,在表格终于能够回归它本来的应用目的的今天,这种奇葩布局的表格应该也是寥寥无几了。6 H  E/ J, B1 N6 B& V" M

& z+ y/ H# P# i% y更多网页制作信息请查看: 网页制作

回复|共 9 个

buingeEvineus 发表于 2016-3-18 11:01:25|INNA | 查看全部
哎 我我我怎么办啊??
tohme 发表于 2016-3-18 11:01:26|巴西 | 查看全部
楼上的话等于没说~~~
wwzcdenleclv 发表于 2016-3-18 11:02:19|IANA | 查看全部
系统居然怀疑我灌水,我身边又没有水龙头。哦…明白了,身上有一个……
wwzcdenleclv 发表于 2016-3-18 11:02:23|英国 | 查看全部
您知道这个论坛的站长是谁吗?偷偷的告诉你他叫叶学得  好厉害的样子
bqtklouu 发表于 2016-3-21 19:06:27|法国 | 查看全部
本人是文盲,以上内容文字均不认识,也看不懂是什么意思.
wwzcdenleclv 发表于 2016-3-21 19:06:52|中国 | 查看全部
看你快沉底了~~~~~~
effoggikeftor 发表于 2016-3-21 19:06:52|广东 | 查看全部
真是天底下好事多多
tohme 发表于 2016-3-21 19:07:05|日本 | 查看全部
宁愿选择放弃,不要放弃选择。
Mqokjdvq 发表于 2016-3-21 19:07:08|Reserved | 查看全部
您知道这个论坛的站长是谁吗?偷偷的告诉你他叫叶学得  好厉害的样子

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表