1 行内元素和块级元素的定义
任何HTML (超文本标记语言) 元素都有其默认的display属性,大多数都是行内元素(inline)或块级元素(block)。一个行内元素只占据它对应标签的边框所包含的空间,而一个块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。
2 行内元素和块级元素的区别
内容
一般情况下,行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
格式
默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
常见元素
行内元素:<b>、<span>、<i><small>、<big>、<img>、<button>、<input>、<lable>、<select>、<textarea>等
块级元素:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<div>、<p>、<address>、<acticle>、<ol>、<ul>、<output>、<form>(比较特殊,它只能用来容纳其他块元素) 、<table>、<canvas>、<footer>等
用法
1、一般情况下,行内元素设置width和height属性无效,块级元素可以设置width和height属性。(注意,块级元素设置了width宽度属性后仍然是独占一行的)
2、块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
3 行内元素和块级元素的相互转化
display: none; 不显示该元素
display: block; 可将行内元素转化为块级元素
display: inline; 可将块级元素转化为行内元素
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