摘要：标签一般分为块标签和行内标签两种类型，也可以称为块元素和行内元素。块元素和行内元素的具体特点如下三块级元素块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。
初学html，接触很多标签 、、、
、
标签多带带一行，不管后面有多大的空间；标签中使用多个给某些词做强调，但是却和中的其他内容同一行，由此，会思考为什么和会有这种的不同？
想要知道为何不同，得先了解HTML标签的类型。
HTML标签一般分为块标签和行内标签两种类型，也可以称为块元素和行内元素。
上面举例中的标签就是典型的块元素，标签就是一个行内元素。块元素和行内元素的具体特点如下：
块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。
块级元素有以下几个特点：
常见的块级元素有：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的块级元素。
特殊：文字类的块级元素不能放块元素，例如 /~
/
/*块元素div*/
div{
width: 200px; /*宽高、外边距、内边距 都有效*/
height: 30px;
border:1px solid blue;
margin:20px;
/* padding:10px;*/ /*此处内边距会引起div宽高的变化，为了比较更直观就注释了*/
line-height: 30px;
}
使用以上样式给下面块元素div设置
<div>我是块元素2div>
<div>我是块元素2div>
效果图见文末。
行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。
行内元素的特点：
特殊：a比较特殊，可以放块级元素，但是链接里面不能再放链接。
/*行内元素span*/
span{
width:200px; /*宽度设置无效*/
height: 100px; /*高度也无效*/
border:1px solid red;
}
下面是Html样式
<span>行内元素1span>
<span>行内元素2span>
<span>行内元素3span>
<span>我是行内元素行内元素行内元素4span>
效果图见文末
普遍的规则里总有那么几个不一样的，在行内元素中就有那么几个特殊标签，比如 结构： 综合效果图如下： 既然标签有不同的显示模式，就会有相应的转换办法以应对各种需要。 display正是我们想要的。 块元素——>行内元素 ： display:inline; 行内元素——>块： display:block; 块、行内元素——>行内块： display: inline-block; 总结完他们之间的特点更加清晰，记得更牢，首先在以后遇到当给一个元素设置的宽高无效的时候这就是一个原因，使用display即可解决。样式：
/*行内块元素input*/
input{
width: 200px; /*宽高均有效*/
height: 30px;
}<input type="text" value="行内块元素1">
<input type="text" value="行内块元素行内块元素2行内块元素">六、标签显示模式转换（display）
总结
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1946.html
摘要：二块级元素块级元素占据其父元素容器的整个空间，因此创建了一个块。而块级元素可以包含行内元素和其他块级元素。格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行。 一、行内元素 一个行内元素只占据它对应标签的边框所包含的空间。 二、块级元素 块级元素占据其父元素（容器）的整个空间，因此创建了一个块。通常浏览器会在块级元素前后另起一个新行。 三、行内元素示例 HTML showIm...
摘要：二块级元素块级元素占据其父元素容器的整个空间，因此创建了一个块。而块级元素可以包含行内元素和其他块级元素。格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行。 一、行内元素 一个行内元素只占据它对应标签的边框所包含的空间。 二、块级元素 块级元素占据其父元素（容器）的整个空间，因此创建了一个块。通常浏览器会在块级元素前后另起一个新行。 三、行内元素示例 HTML showIm...
摘要：此元素将显示为块级元素，此元素前后会带有换行符。新增的值此元素会作为列表显示。块级元素和行内元素的分类中的块级元素标签描述定义地址。定义围绕表单中元素的边框。定义预定义范围内的度量。定义针对不支持框架的用户的替代内容。定义表格中的单元。 标签（空格分隔）： CSS 在html中元素主要分为行内元素和块级元素 行内元素 [x] 不独占一行 [x] 书写完成后不会自动换行 [x] 没...
摘要：此元素将显示为块级元素，此元素前后会带有换行符。新增的值此元素会作为列表显示。块级元素和行内元素的分类中的块级元素标签描述定义地址。定义围绕表单中元素的边框。定义预定义范围内的度量。定义针对不支持框架的用户的替代内容。定义表格中的单元。 标签（空格分隔）： CSS 在html中元素主要分为行内元素和块级元素 行内元素 [x] 不独占一行 [x] 书写完成后不会自动换行 [x] 没...
摘要：在中，和就是典型的行内元素元素。内联元素不单独占一行，给他设置宽高是没有用的。在中和就是块级元素。此元素会根据上下文作为块级元素或内联元素显示。此元素会作为块级表格来显示类似，表格前后带有换行符。 display属性 首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline 我们常用的display属性值...
阅读 2408·2021-11-19 09:40
阅读 3574·2021-10-12 10:12
阅读 1883·2021-09-22 15:04
阅读 2897·2021-09-02 09:53
阅读 761·2019-08-29 11:03
阅读 1120·2019-08-28 18:11
阅读 1723·2019-08-23 15:28
阅读 3577·2019-08-23 15:05
