元素分类
- 块元素
- 块元素独占一行，可以自己定义宽高，一般作为别的元素的容器
- 常用元素
<div></div> <dl> <dt></dt> <dd></dd> </dl> <form></form> <h1></h1>-<h6></h6> <hr> <ul> <li></li> </ul> <ol> <li></li> </ol> <p></p> <fieldset></fieldset> - 行内元素
- 行内逐个显示，不能定义宽高，以元素内容撑开，可以设置padding margin属性，但仅left right属性会生效，top和bottom无法生效
- 常用元素
<a href="#"></a> <br> <i></i> <em></em> <label for="#"></label> <span></span> <strong></strong> <textarea></textarea> <u></u> <select></select> - 根据上下文语境决定该元素为块元素或者内联元素
- 常用元素
<button></button> <del></del> <iframe src="#" frameborder="0"></iframe> <ins></ins> <map name="#"></map> <object data="#" type="#"></object> <script></script> - 行内块元素
- 行内逐个显示，可以设置宽高，拥有块元素和行内元素的特点
- 常见的行内块元素
<img src="#"> <input type="text"> - 元素类型的转换
- 设置display属性
- display有18个属性值
常用 block/inline/inline-block/none/flex 不常用 list-item/table-header-group/table-footer-group- 大部分块元素display属性值默认为block，其中列表li的默认值为list-item
- 大部分内联元素的display属性默认为inline,其中img和input默认的属性为inline-block
- 垂直居中
- 父元素需要设定 text-align:center
- 当前元素需要设定 display:inline-block和vertical-align:middle
- 同级的标尺元素需要设定 vertical-align:middle/width:0/height:100%/display:inline-block
