块级元素、行内元素和行内块元素

Bertha 。 2022-03-16 00:44 349阅读 0赞

# 块级元素(block-level) #

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

## 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。 ##

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

# 行内元素(inline-level) #

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

## 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。 ##

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：

1、只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2、链接里面不能再放链接。

# 块级元素和行内元素区别 #

块级元素的特点：  
（1）总是从新行开始  
（2）高度，行高、外边距以及内边距都可以控制。  
（3）宽度默认是容器的100%  
（4）可以容纳内联元素和其他块元素。

行内元素的特点：  
（1）和相邻行内元素在一行上。  
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。  
（3）默认宽度就是它本身内容的宽度。  
（4）行内元素只能容纳文本或则其他行内元素。

# 行内块元素（inline-block） #

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
    
    行内块元素的特点：
    （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
    （2）默认宽度就是它本身内容的宽度。
    （3）高度，行高、外边距以及内边距都可以控制。

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

# **display属性** #

display属性是用来设置元素的类型及隐藏的，常用的属性有：  
1、none 元素隐藏且不占位置  
2、block 元素以块元素显示  
3、inline 元素以内联元素显示  
4、inline-block 元素以内联块元素显示

发表评论取消回复

表情：

评论列表（有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

相关块级元素，行内元素，行内块元素的学习

块级元素 > 独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽； > 特点：独占一行，对高度、宽度、行高以及顶和底边距都可设

朱雀/ 2022年11月30日 04:18/ 0 赞/ 173 阅读

相关行内元素&块级元素

块级元素： address figure figcaption ol ul article output aside footer au

曾经终败给现在/ 2022年06月14日 07:29/ 0 赞/ 190 阅读

相关 html中的块级元素、行内块元素和行内元素

1. 常见的块级元素( dispaly: block, 自动换行，可设置高宽 )有： div, h1-h6, p, pre, ul, ol, li, f

灰太狼/ 2022年06月12日 14:16/ 0 赞/ 195 阅读

相关 HTML 中的块级元素、行内元素、行内块级元素

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种，一般使用 `display`，进行三者的转换。 1. `display: inline;` 将元素转换为

我就是我/ 2022年05月25日 05:51/ 0 赞/ 366 阅读

相关块级元素，行内元素，行内块元素

（1）块级元素：div、p、hi、ul、ol、li、h1~h6、dl、dt、dd等等常用的块及元素有div、p、hi、ul、ol、li、h1~h6

布满荆棘的人生/ 2022年04月23日 13:12/ 0 赞/ 245 阅读

相关块级元素、行内元素和行内块元素

块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有<h

Bertha 。/ 2022年03月16日 00:44/ 0 赞/ 350 阅读

相关行内元素,块元素,行内块元素

常见的块元素:div p、nav、aside、header、footer、section、article、ul-li、addres;对块元素的居中直接使用margin:0 au

女爷i/ 2021年12月16日 20:37/ 0 赞/ 349 阅读

相关块级元素、行内元素、行内块级元素的特点

1.块级元素： (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。注：文字类的块级元

野性酷女/ 2021年11月23日 01:08/ 0 赞/ 343 阅读

相关行内元素与块级元素与行内块元素

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度块级元素可以设置width,height属性. 块级元素即使设置了宽度,仍然是独占一行. 块级元素可以设置

Dear 丶/ 2021年09月01日 10:55/ 0 赞/ 396 阅读

相关行内元素、块级元素、行内块元素

行内元素、块级元素、行内块元素 1. 块级元素display:block:自己独自霸占一整行,默认宽度是100%,可以设置宽高（div、p、h1-h6、form、ul、

淩亂°似流年/ 2021年07月25日 15:56/ 0 赞/ 451 阅读