css布局思考

标签，有些元素天生是内联元素，如标签等，有些元素则天生具备这两者的特性，如等。 ? block块状元素，最明显的特点是每个元素都默认各占一行，很多个块状元素堆叠在一起，那么这样一来形成的就是自上而下的文档流形式。 block支持宽高设定，所以其宽高可以灵活设置，并不固定。因此margin,padding等可以形成布局的属性自然就可以起作用，也可以在上下左右撑开空间。元素内的内容也并不固定，因此text-align,text-indent,max-height,max-width等属性自然也能起作用。 ? inline内联元素，最大的特点就是宽高由内容撑开，并且默认不独占一行，所以其表现形式总是由左往右排列，那么这样一来形成的就是从左到右的文档流形式。 inline既然由内容决定宽高，那么可想而知，有关宽高的属性均不会起作用，如width，height，max-width，max-height等。 ? 那么，inline元素设定margin,padding会起作用么？ 上面说了，inline形成的是自左像右的文档流，所以在左右方向上的布局设定属性将会起作用，如margin-left,margin-right,padding-left,padding-right等，而margin-top,margin-bottom不会起作用，因为其不具备撑开高度的能力。即使padding-top,padding-bottom，能起作用，但也一样无法撑开高度。同样道理，对内联元素来说，text-align，text-indent，text-overflow等属性就已经失去意义了。 ? inline-block元素具备两者的特性，既能在上下方向撑开高度，也能在水平方向形成布局，灵活好用，所以其实这样的属性在布局中将起到十分重要的作用。 ? 这只是个人的一点小小思路，我想应该对布局多少能起到点帮助吧。（编辑：李大同）

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