对HTML和CSS的学习总结

对HTML和CSS的学习总结
一.块级标签和行内标签的区别：
1.块级独占一行，行内可以与其他元素共享一行
2.块级元素可以包含块级元素和行内元素 ，行内元素只能包含文本或者其它行内元素。
3.块级元素可以直接设置宽高，行内元素不能直接设置宽高

二.行内元素与块级元素总结：
行内：
超链接 <a></a>
加粗 <b></b>
最常用的行内元素<span></span>
图片<ing 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>

块级：
<div></div>
<p></p>
h1~h6
<table></table>
<caption>table的标题</caption></caption>
<form action=""></form>
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<dl>
<dt></dt>
</dl>
<dl>
<dd></dd>
</dl>

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

三.如何将一个块级或者行内元素水平垂直居中？
A.定宽定高块级元素水平垂直居中：
1.定位+0偏移+子元素margin:auto :父元素相对定位，子元素绝对定位，top、left、bottom、right为0，同时子元素设置margin:auto
2.绝对定位+margin:父相对定位，子绝对定位，top、left值为父元素的一半,此时子元素的左上角位于父元素的中心，再利用margin-left和margin-top移动，值为子元素宽高的一半
3.不定宽定高(子元素)
父元素flex布局，子元素margin:auto

B.行内元素水平垂直居中(div内)：
父元素flex布局，且属性justify-content：center和align-items:center 子元素在父元素内垂直且水平居中

四.清除浮动的方法:
A.父子级：
父元素设置overflow:hidden
B.兄弟级：
在两个div之间添加一个空标签，给这个空标签添加clear:both