html标签元素分类

1. 块状元素

2. 内联元素/行内元素

3. 内联块状元素/行内块状元素

元素标签

1
2
3
4
5
6
7
8
/*常用的块状元素*/
       <div> <p> <h1>.....<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

/*常用的行内元素*/
       <a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var> <li> <dt> <td>  

/*常用的行内块状元素：*/
       <img> <input>

块级元素特点：

  1. 每个块级元素独占一行
  2. 元素的高度、宽度、顶部和底部边距(height、width、margin-top、margin-bottom)都可设置。
  3. 元素宽度缺省是其父容器的100%（和父元素的宽度一样），除非设定宽度。
  4. 它可以容纳内联元素和其他块元素

内联元素特点：

  1. 和其他元素都在一行上；
  2. 元素的高度、宽度、及顶部和底部边距(height、width、margin-top、margin-bottom)不可设置（设置没有效果）；
  3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。
  4. 内联元素只能容纳文本或者其他内联元素。

行内块元素特点：

  1. 和其他元素都在一行上；
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

注意: 当有多个行内块元素，设置高度时整行都会有变化,如果解决单个做位置设定时可使用浮动或者flex

案例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.box{
       margin-top: 50px;
}
.box .one{
       margin-top: 200px;
}
.box .two{
       margin-top: 100px;
}
</style>
<div class="box">
       <img class="one" src="./logo.svg" alt="">
       <img class="two" src="./logo.svg" alt="">
       <img class="three" src="./logo.svg" alt="">
       <img class="four" src="./logo.svg" alt="">
       <span>sdfsdf</span>
</div>

案例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.box{
       margin-top: 50px;
}
.box .one{
       margin-top: 200px;
}
.box .two{
       margin-top: 100px;
}
.box img{
       float: left;
}
</style>
<div class="box">
       <img class="one" src="./logo.svg" alt="">
       <img class="two" src="./logo.svg" alt="">
       <img class="three" src="./logo.svg" alt="">
       <img class="four" src="./logo.svg" alt="">
       <span>sdfsdf</span>
</div>

元素类型互转

display:block 转为块元素
display：inline-block 转为行内块元素
display：inline 转为行内元素