CSS布局小记—display

发布时间：2020-12-15 00:32:53 所属栏目：C语言来源：网络整理

导读：table class="javascript" tr class="li1" td class="ln"pre class="de1"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 none inline block inline block list item run table inline table table

<tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

none inline block inlineblock listitem run table inlinetable tablerowgroup tableheadergroup tablefootergroup tablerow tablecolumegroup tablecolumn tablecell tablecaption inherit 但其实，经常用到的仅仅是block、inlineblock、inline这几个属性值，所以这里只说说这三个值。 ? 【displayblock】独占一行不设置宽度的情况下，宽度撑满一行支持宽高 ? 【displayinline】宽高由内容撑开非独占一行不支持宽高 ? 【displayinlineblock】不设置宽度时，内容撑开宽度非独占一行支持宽高 ? 那么，当我们用这几个属性来布局的时候，怎样才能更好地理解这三个属性值的特性呢，能不能总结出其中的一些规律呢？下面是我个人的一点小小理解：首先，不管有没有设置display，每个元素其实都有其默认的display属性，有些元素天生是块状元素，如div<p标签，有些元素天生是内联元素，如span标签等，有些元素则天生具备这两者的特性，如img<button等。 ? block块状元素，最明显的特点是每个元素都默认各占一行，很多个块状元素堆叠在一起，那么这样一来形成的就是自上而下的文档流形式。 block支持宽高设定，所以其宽高可以灵活设置，并不固定。因此marginpadding等可以形成布局的属性自然就可以起作用，也可以在上下左右撑开空间。元素内的内容也并不固定，因此textaligntextindentmaxheightmaxwidth等属性自然也能起作用。 ? inline内联元素，最大的特点就是宽高由内容撑开，并且默认不独占一行，所以其表现形式总是由左往右排列，那么这样一来形成的就是从左到右的文档流形式。 inline既然由内容决定宽高，那么可想而知，有关宽高的属性均不会起作用，如width，height，maxwidth，maxheight等。 ? 那么，inline元素设定marginpadding会起作用么？上面说了，inline形成的是自左像右的文档流，所以在左右方向上的布局设定属性将会起作用，如marginleftmarginrightpaddingleftpaddingright等，而margintopmarginbottom不会起作用，因为其不具备撑开高度的能力。即使paddingtoppaddingbottom，能起作用，但也一样无法撑开高度。同样道理，对内联元素来说，textalign，textindent，textoverflow等属性就已经失去意义了。 ? inlineblock元素具备两者的特性，既能在上下方向撑开高度，也能在水平方向形成布局，灵活好用，所以其实这样的属性在布局中将起到十分重要的作用。 ? 这只是个人的一点小小思路，我想应该对布局多少能起到点帮助吧。（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!