CSS布局小记—display

<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 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元素具备两者的特性，既能在上下方向撑开高度，也能在水平方向形成布局，灵活好用，所以其实这样的属性在布局中将起到十分重要的作用。   这只是个人的一点小小思路，我想应该对布局多少能起到点帮助吧。版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。