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

标签：bubuko   col   margin   display   需要   区别   one   nbsp   back   

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

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

标签：bubuko   col   margin   display   需要   区别   one   nbsp   back   

原文地址：https://www.cnblogs.com/xiaokeai0110/p/9183430.html