本文深入探讨了HTML中块级元素和行内元素的区别与应用，包括如何通过CSS控制元素的显示方式，以及如何灵活运用这些元素进行页面布局。
块级元素与行内元素
我们在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素。
块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。
例如：我们可以给div或p应用下面样式，但是a标签却无法应用下面的样式。
复制代码
代码如下:.test{width:100px; height:100px;}
当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。所以我们可以给a标签应用以下样式：
复制代码
代码如下:.test{display:block; width:50px; height:50px;}
另外，如果我们即想让一个元素可以设置宽度高度，又想让它以行内形式显示，这时我们可以设置display的值为inline-block。如：
复制代码
代码如下:a{display:inline-block; width:100px; height:100px;}
扫一扫
1462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
