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


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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2020 CODEPRJ.COM