HTML排版大揭秘！块级VS行内，你都弄明白了吗？

大家好！我们来聊聊打乱你预想的HTML显示问题！是不是遇到过这样子的困扰？设置了那么多属性，结果还是很多地方根本没动静。比如常见的宽高、挤列什么的，完全不起作用。别着急，马上跟大家说说为什么会这样！

你知道吗，HTML这个学问也挺有意思，有两个关键的名字——块级标签和行内标签。它们两个可不一样！初学者可能会犯迷糊，比如你调整下p标签的水平居中没问题，但如果用到font标签字体里，那就别想了。为啥？就是因为这功能只适合在块级标签上使所以，用之前得先看清楚它属于哪种类型没错啦哼。

好玩，不设宽度的话，块状元素就横着撑满整个浏览器，占据全部宽度。但对于行内元素来说，情况完全不同，它们可以塞在同一行里，大小不受限制，主要看内容多不多。而有的元素既是块级又是行级，这种混搭型的，比如 div、p、h1 to h6、ul、li、dl、dt、dd等，宽度高度都能控制，甚至能并列入同一行，超强的功能。这就是网页设计中常用的排列方法！不过行内元素也很丰富，像span、font、b、u、i、strong、em、a、img和input这些都算。对了，别忘了img和input其实也是行内块级别的

别急，得嘞，是不是觉得字体大小跟文字间距不能随便调整？放心，CSS里有个叫display的属性就能解决这个问题，赶紧学起来！

块级标签变行内？就用display:inline;搞定！

要让文本框变成大块儿的，就用display: block;

为了让标签看起来像线上大石头，设置成INLINE-BLOCK就对了！

搞定！把标签字跟数字连着就好，想展示啥样的就变啥样的。

咱都说过N遍了text-align这东西只适用块级标签和文本！比如把它们固定宽度设为100%，那就能回到原位中间显示了；否则宽度不定的话，可能会充满整个浏览器窗口，text-align这个时候就不起作用了。至于行内元素，只要有内容就行，空间对其来说并不重要，所以放TEXT-ALIGN也不管用咯；再说，你想让原本的块级标签转为行内标签咋办，原来的文本内容在新的标签里是不是还能保持水平居中的效果嘞？其实HTML就是把文字当作行内元素对待哒。那么，没有在块级标签上加text-align:center的话，里面的行内标签就只能像普通文本一样待在左右两边咯~

说起HTML中的显示模式，真是有意思极了！而且通过display属性能调整展现形式。赶紧学起来，以后肯定能用得上。如果遇到不懂或想说的，在这留言就好！别忘了点个赞再转发