HTML 行内元素和块状元素的理解

2021年11月24日 阅读数:10
这篇文章主要向大家介绍HTML 行内元素和块状元素的理解,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1 行内元素和块级元素的定义

任何HTML (超文本标记语言) 元素都有其默认的display属性,大多数都是行内元素(inline)或块级元素(block)。一个行内元素只占据它对应标签的边框所包含的空间,而一个块级元素占据其父元素(容器)的整个空间,所以建立了一个“块”。canvas

2 行内元素和块级元素的区别

内容

通常状况下,行内元素只能包含数据和其余行内元素。而块级元素能够包含行内元素和其余块级元素。这种结构上的包含继承区别能够使块级元素建立比行内元素更”大型“的结构。布局

格式

默认状况下,行内元素不会以新行开始,而块级元素会新起一行。spa

常见元素

行内元素:<b>、<span>、<i><small>、<big>、<img>、<button>、<input>、<lable>、<select>、<textarea>等.net

块级元素:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<div>、<p>、<address>、<acticle>、<ol>、<ul>、<output>、<form>(比较特殊,它只能用来容纳其余块元素) 、<table>、<canvas>、<footer>等code

用法

一、通常状况下,行内元素设置width和height属性无效,块级元素能够设置width和height属性。(注意,块级元素设置了width宽度属性后仍然是独占一行的)orm

二、块级元素能够设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,可是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)blog

3 行内元素和块级元素的相互转化

display: none; 不显示该元素继承

display: block; 可将行内元素转化为块级元素input

display: inline; 可将块级元素转化为行内元素it

display: inline-block; 转化为行内块级元素(即不默认换行,可是能够设置width、height、margin、padding等属性)

此外,还能够经过给行内元素设置float:left/right、positon:absolute/fixed属性,也能够使行内元素转化为块级元素,可是不默认继承父级元素的宽度,能够设置width、height、margin、padding等属性。可是替换时,还须要注意这个方法转换为块级元素只是float与position的反作用,他们自己的做用还会干扰布局效果。

<div class="child">
    <span class="test">行内元素</span>
 </div>
 <div class="child">块级元素</div>
.test{
  background-color: #000000;
  color: #FFFFFF;
  float:left;
  width:90px;
}
.child{
  background-color: #125645;
  width: 150px;
  height: 40px;
  color: #FFFFFF;
  margin: 10px;
  overflow: hidden;
  display: inline-block;
}

参考:https://www.jianshu.com/p/274614a078f3

   https://blog.csdn.net/liuying1802028915/article/details/78222833