行内元素和块级元素有什么区别？

1.块级元素和行内元素分别有哪些？

1.块级元素：

<div></div>、<p></p>、h1~h6、<table></table>、<caption>table的标题</caption>

<form action=""></form>

<ul>  <li></li>  </ul>

<ol>  <li></li> </ol>
<dl> <dt></dt> </dl>
<dl> <dd></dd> </dl>

空元素：没有内容的html元素
<br>换行  、   <hr>水平分割线   、  <meta>

2.行内元素：

<a></a>超链接 

<b></b>加粗  

<span></span> 最常用的行内元素

<img src="" alt=""> 图片

 <input type="text"> 文本框

 <strong></strong> 加粗

<select name="" id=""></select> 下拉框

<label for=""></label>
for属性 ： 
    功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。 
    用法：<input id="InputBox" type="text"> 
          <label for="InputBox">姓名</label>

<button></button>
<textarea name="" id="" cols="30" rows="10"></textarea>
<em></em>
<i></i>
<u></u>
 

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

1.块级元素独占一行，可以直接设置宽高属性，宽度占满整个父级元素，高度由子级撑起。

行内元素可以与其他元素共享一行，

• 2.宽度、高度由子集元素撑起，不能直接设置宽和高
• 3.不能直接设置上下的内外边距，可以设置距离浏览器左右边距
•  

2.块级元素可以包含块级元素和行内元素，行内元素只能包含文本元素和行内元素

3.行内元素理论上不能设置宽高，但是加上css属性可以设置宽高

3.如何将一个块级元素或者行内元素水平垂直居中？

• 行内元素水平垂直居中

父元素flex布局，且属性justify-content：center； 和 align-items:center ；设置子元素在父元素内垂直且水平居中

• 定宽定高块级元素水平垂直居中

1.不定宽定高（子元素）

• 父元素flex布局，子元素margin：auto；

2.定位+0偏移+子元素margin：auto；

• 父元素相对定位，子元素绝对定位，top、left、bottom、right为0，同时子元素设置margin:auto；

3.绝对定位+margin:

• 父元素相对定位，子元素绝对定位，top、left值为父元素的一半,此时子元素的左上角位于父元素的中心，再利用margin-left和margin-top移动，值分别为子元素宽高的一半