常见的行内元素于块级元素:
<!-- 常见的行内元素 -->
<span> <img > <input > <select> <strong> <a> <label>
<!--常见的块级元素 -->
<div> <ul> <ol> <dl> <dt> <dd> <h1>~<h6> <p> <table> <form> <hr> 等~~
行内元素和块级元素的区别:
1.行内元素不可以设置宽高,宽高由内容撑开,不独占一行
2.块级元素可以设置宽高,宽高默认由内容撑开,默认独占一行,垂直向下
display:block 和display:inline 的区别:
block元素的特点:
1.处于常规流中,如果width没有设置,会自动填充满父容器
2.可以用于margin/padding
3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4.处于常规流中布局时在前后元素位置之间(独占一个水平空间)
5.忽略vertical-align
inline元素特点:
1.水平方向上根据direction依次布局
2.不会再元素前后进行换行
3.受white-space控制
4.margin/padding在竖直反向无效,水平反向有效
5.width/height属性对非替换行内元素无效,宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定,替换行内元素的行框高由height、margin、padding、border决定
7.浮动或绝对定位时会转换block
8.vertcal-align属性无效