<div> 和 <span> 是完全 interchangable ?

asicsfree

1 n( g# s6 t/ C! s6 `& X
4 C1 }& \. l$ Z" Q0 |6 a0 _$ {制做字典时，若以后人修改 css 方便为考量，全部用 <div> 或 <span>吗？
" s8 G' K+ K; c4 r
& h- m0 m8 M/ J+ J3 E6 s: ^有时 <span> 是比较合理，但是似乎全部都可以在 css 用 display: 把 <div> 改为 <span>？
会有什么可能 <span> <div> 无法互相取代的吗？

HMPT

可以啊
不过<div> 会有行空白 貌似

Oeasy

很有意思的问题。我简单做了点调研，不能完全回答楼主的问题，不过可以提供一些信息。
  H* b* C! h! s4 Z
最早 HTML 里是没有<span> 标签的，<div> 比 <span> 早得多。
3 ?0 o9 Q' o$ m: o: e- g
- <div> November 24, 1995 HTML 2.0 was published as IETF RFC 1866 https://tools.ietf.org/html/rfc1866
9 T4 R  f9 h1 F) \) u  w* y- <span> January 1997: RFC 2070  https://tools.ietf.org/html/rfc2070
; |* N3 k; S" y" W/ n5 R5 o

   <!-- <SPAN>             Generic inline container  -->
   <!-- <SPAN DIR=...>     New counterflow embedding -->
5 Q" J* Z; k7 C: T" l   <!-- <SPAN LANG="...">  Language of contents      -->

5 n( l# }5 w- B+ c2 lhttps://www.stylusstudio.com/xsl ... 9904/post10740.html

% M$ t' W! [. G" i

It's a bit unfair to pick on the SPAN element. It was introduced in
9 [6 D, o3 M! WRFC 2070:

   First, a generic container is needed to carry the LANG and DIR (see
0 f8 H. z2 P! i! ~. k   below) attributes in cases where no other element is appropriate; the
   SPAN element is introduced for that purpose.

' e* _" O+ m  c6 d1 }; W4 i

BLKSerene

<div> 块级标签 会自成一行（前后都有换行 适合于段落） <span> 则不会
. h4 ]% G8 o. C# {: p这两个标签 在HTML 里的作用都是 本身没有任何意义 完全是为了方便 CSS 排版 而添加这些标签
加上 class id 等属性 方便选取 div 应该用在自成一块的文本上 div 中包括数个 span
但不能用 div span 本身来进行排版 HTML 标签只是赋予文本意义 排版要交给 CSS 来
display: inline 的确可以让 div 变成 span 但是你一开始加标签的时候就应该考虑到了
除非是 HTML 是别人加的 你又有特殊的排版需求 才这么干
' i7 o; e" @7 p, N9 M, L6 P其他标签比如 <p> 不仅有 div 的效果 还赋予了文本“段落”这一涵义 所以叫做 HTML 超文本“标记”语言
作用是标记 不是排版
& O+ d" Q/ I  M2 y* `  e
8 f# o0 F, j; w. e. t! w# c7 E还有 <br /> 也类似 这是用于 文本内部强制换行用的 不要用来换行排版
如果需要空白 用 CSS 的 margin-bottom CSS 功能本身很强大 不需要 HTML 来帮忙
6 F3 a* y: }3 H7 r6 }. w) c& N9 rHTML 只是为了方便 CSS 选取的所以 div 和 span 很明显无法相互替代

EarthWorm

blkserene 发表于 2017-7-15 12:26
' j8 ?3 `. r- ]# u+ o5 L块级标签 会自成一行（前后都有换行 适合于段落）  则不会
" }7 s4 g$ }8 s& ~. ~这两个标签 在HTML 里的作用都是 本身没有任何 ...

一看就是高手啊...
+ C6 b% D! E7 o) ?2 v
, P# Y3 @2 b& g6 T7 [想请教个问题, 烦请不吝赐教:
8 H8 x2 u9 l6 p7 s+ H5 m3 u. }; H! tHTML:
% h! k2 H0 ~9 v7 |9 U  ?* r6 p3 I<span class="A">1234567890</span>
5 g, j, B( @% R9 J<span class="B">0987654321</span>
2 N) \$ ^/ H, d
3 Y1 g1 G& N/ w, L. ]CSS:
.A{display: block;}
2 r( u/ f) d4 Q* B8 i; a- j2 [: ^
$ p( @2 G+ j- t$ f3 \0 q若在不改变 .A 的块属性的前提下, 有没啥办法让 B 的内容跟在 A 后面, 而不是单独另起一行, 也就是把 B 的内容也加入到 A 的块里面去...
. x0 @. @! s8 y+ x' \" |2 s( j& V

HMPT

span + block ---> div .... --> inline-block 试试

BLKSerene

EarthWorm 发表于 2017-7-19 05:30
一看就是高手啊...
) B6 s+ L$ [( m; H( h7 W. l) {
, _- u4 S7 m& f想请教个问题, 烦请不吝赐教:

没有 这种情况本来 写HTML的时候就应该组织好
写成<span class="a">1234567890<span class="b">0987654321</span></span>
或者可以强行尝试用 浮动 但是浮动不是为了这种情况才存在的 而且本身用不好很容易出问题

EarthWorm

多谢楼上两位的答复.

我找到办法了, 只不过没有实用价值: 用负 margin 可以做到, 但问题是垂直方向倒是容易定位, 水平方向若 A 的字符串长度固定则问题不大, 若 A 的字符串长度不固定, 则水平方向无法定位, 所以没有实用价值.
5 P1 E1 ?% ^/ f" U! d7 ^% Q
关于负 margin, 有兴趣的可以看看这篇文章, 很有意思: http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/