H5面经

块级标签和行内标签的区别：

        1、块级标签独占一行，而行内可以和其他元素共享一行。
        2、块级元素可以包含块级元素和行内元素，行内元素只能包含文本或者其他行内元素。
        3、块级元素可以直接设置宽高，行内元素不能直接设置宽高。

常见的块级标签:

<div></div>
<h1></h1>~<h6></h6>
<p></p>
<table></table>
<caption>table的标题</caption>
<form action=""></form>
<ul>
	<li></li>
</ul>
<ol>
	<li></li>
</ol>
<dl>
	<dt>标题名称标签</dt>
	<dd>列表项</dd>
<dl>
	

常见的行内标签：

<span></span>
<a>超链接</a>
<b>加粗</b>
<strong>加粗</strong>
<img src="" alt="">
<input type="text">
<select name="" id=""></select>
<label for=""></label>
<button></button>
<textarea name="" id="" cols="20" rows="30"></textarea>
<em></em>
<i></i>
<u></u>

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

        1、父元素flex布局，且属性justify-content：center和align-items：center 子元素在父元素内垂直且水平居中(行内元素水平垂直居中(div内)或块级都可)

块级元素：

        2、不定宽定高(子元素)，父元素flex布局，子元素margin:auto
        3、父元素相对定位，子元素绝对定位；top、left、bottom、right为0px，同时子元素设置margin:auto
        4、父元素相对定位，子元素绝对定位；然后给子元素设置left:50%;top:50%，此时子元素的左上角位于父元素的中心；再给子元素设置margin-left:-(子元素width/2);margin-top:-(子元素height/2);

清楚浮动的方法:

        A.父子级：
                父元素设置overflow:hidden
或

在浮动域的父级元素上::after{
                content:'';
                display:block;
                clear:left;
            }

        B.兄弟级：
                在两个div之间添加一个空标签，给这个空标签添加clear:both