|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
& q) O* l8 n. T0 {: t9 k* g 不<h1>自动</h1>换行
, Q5 r- H9 c$ B' K8 v9 ^ 显示的时候会是这个样子: , O1 d8 F' s" Y. @) A
不 7 B' m. [. k' i# Y9 k Q
自动
1 F# p" N# L; R2 J& e9 G' O换行 4 ?, {& j7 N' P9 [, B
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 & _+ A! e! z/ ^' d
: Z$ x* n8 c8 G Q以下是display的用法和定义:
7 I M9 @) S0 X" U" F & h! l( f( D& w' H, B. _0 D2 e. R
% ]0 a3 L: D+ p/ y, y5 ^" c定义和用法" k2 k$ e0 V% j8 J
display 属性规定元素应该生成的框的类型。
3 C* {" S( j5 F+ D( F' N4 i. `, V. I! O说明" x0 J# W5 z3 f) H- N0 b
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
: _3 E6 c% y4 q* b" C! V1 Q) W注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 1 F `: L( \6 n, }
7 g: p& e3 M8 B
7 f! G& Y1 X) ~* H# c7 `! p5 V
" n, U- Z+ C! ]$ a r* C| 默认值: |
$ R' h" y. w9 d& Pinline |
' G" V+ K7 F; k: g) q- T% n% |: F0 o' H$ Q* x
| 继承性: | . f, \; y" L. D6 s6 @
no |
$ m* K# y% Y J/ {
- `. h# l, y3 W" @| 版本: |
" d5 U4 n& ?6 o/ |0 NCSS1 | & E- b- J* ~# E" C. ~' m, ?- [% p
& W& |* Y0 h" D% ?1 s| JavaScript 语法: | ' E* R/ M; b5 y9 h
object.style.display="inline" |
! ?2 h! R- v ~2 X- u
9 @! v! U8 P0 _; o9 `实例
% D9 q2 x7 M# F* c$ n使段落生出行内框: p.inline4 y3 e k8 U& A0 h
{- Z4 ^8 h3 O5 p$ F, R
display:inline;
7 @8 _! S" G* u+ F }
' L: d3 b" a9 l. x3 J! Q8 P1 \3 N) L7 r5 h6 K
浏览器支持
( j: I& x: A5 n0 J3 [, h ]+ s所有主流浏览器都支持 display 属性。
. l# l. L# V: c4 @9 u. M7 `注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 0 I. o9 R9 l* x2 \3 I- @3 F9 i
2 l/ }' C" |) B) }) g) u可能的值
/ Y) Q2 O0 H5 j1 s g2 a
: r, v. B- j9 |6 h) @1 K# a A0 e& v6 M: K Z: |- Q- i% x+ w
* t9 v* e5 }( Z* A! ?5 x7 E
| 值 |
1 }5 i! u' s+ J描述 | . V) ~5 O. s0 Y3 D" C
/ N2 v6 l* c3 ~3 D$ L| none | ; b* D! U% `) `, |% T) L% U
此元素不会被显示。 |
, T6 K' Z( a+ Q
0 K0 C" a; d: n+ K| block | ) ~2 o* m' U# Z
此元素将显示为块级元素,此元素前后会带有换行符。 |
$ S: Z7 M* C+ O* d2 E/ b8 [9 H2 X* L1 R1 Q! \
| inline | % o6 p8 u7 x/ I/ A+ b
默认。此元素会被显示为内联元素,元素前后没有换行符。 |
3 n* d$ a' Z$ V+ B7 d, M% R3 I- D% P$ v9 S# o. l, |2 v8 ]
| inline-block |
8 D6 ]& o4 M) ?! H行内块元素。(CSS2.1 新增的值) |
f: c1 J" g2 }0 L
- H+ {" q: m( O| list-item |
* s+ x$ j+ \5 B$ l7 l( S. P此元素会作为列表显示。 | - y: j* Q! d4 ~ l) E; K
+ c2 h- |( d+ f. k/ X, g8 j8 || run-in |
# U# c3 ]* x; ~( l) w此元素会根据上下文作为块级元素或内联元素显示。 | , k2 s K, n) k! E2 } {8 A
, V- u" j3 W( B# N2 Q
| compact | % d: o* @- r4 S1 Q6 M1 K% \
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
2 U0 j* t8 ]1 ~9 S
7 J- [; ^& V; Y6 e& x' N| marker |
' M, ^2 _( k* B1 K) SCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
3 `' L" Z/ w! n, { p: B/ e) I: Y6 r _ Z( Z1 y7 s
| table | % ~1 Z( `8 D' @1 V& P: i" h6 ]
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | # W, B6 [* K) Y: I
( W; H7 T" Q& o% w
| inline-table | 0 X: I+ E" y. a# s/ W6 s0 L9 ]. \: V
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
, I' r; U- V# ~9 e$ j$ }
( Z$ y' T. g2 V4 [3 S% F1 r) l! ^| table-row-group | * F9 e) o2 r6 S) u# |" _% L6 n: Y, u
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | 8 L8 D2 |6 y/ W: s
2 V) l- ?. c% \; W+ D! C| table-header-group |
8 v. R/ Y. p' x. j {/ @此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
! ~$ C% {- S3 c$ N7 y2 i2 V' I3 n$ z& U: F
| table-footer-group | ; M. H3 v: S6 j! k- h% Y
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | ! V9 b+ \; F. x: B# J
6 b. Y7 W; F. C2 o& g6 s| table-row | 5 R& {: k6 t2 ~& d: R. n' `
此元素会作为一个表格行显示(类似 <tr>)。 |
" r& x3 M6 w7 E, g# c4 J* E1 y7 g
| table-column-group |
; H& L- ^6 Y4 F; T- s3 j; P此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
2 V+ q6 y6 e/ i& y; q- Q2 ~ a5 I K3 w |
| table-column | 2 A; g, i7 L+ I
此元素会作为一个单元格列显示(类似 <col>) |
: t/ S7 E& w) {3 m. P
6 [9 p4 g1 `4 l1 }7 O" N# S| table-cell |
( n4 K+ I& `- ^, e4 L此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
" B& p' _! T7 l. n( r9 @- I! I+ \) J& C# }* `
| table-caption | 1 a9 J' G) ]. ?/ ~9 y; J
此元素会作为一个表格标题显示(类似 <caption>) | 2 T5 {7 U! X- J, X) j' }, c4 Z& \
8 S* T+ p( d- l
| inherit | ( n. D! c2 j% ?3 O' l
规定应该从父元素继承 display 属性的值。 | |