元素的特性

元素的特性

行内标签

特性

• ​ 同排显示

  • ​ 不能设置宽度、高度

    • ​ 支持左右的外边距 以及 内边距

所有行内标签: a,b,strong,span,img,label,button,input,select,textarea

块级标签

特性

• ​ 单独占据一行

  • ​ 可以设置宽度、高度

    • ​ 支持左右的外边距 以及 内边距

所有块级元素:header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

行块特性的转换

span和div最典型的行内元素和块级元素

display

display:block;把元素转换为块状特性

display:inline;把元素转换为行内特性

行块级的特性与转换

display:inline-block;

inline-block是把元素转换为行块级的意思。

注意：

1.父级宽度不够时会自动换行

2.li会有个小间隙(字体大小的一半)，这个间隙是因为li的写法

<ul>
    <li>
        ...           <!--这种结构写法会有小间隙-->
    </li>
    <li>
        ...
    </li>
</ul>

<ul>
    <li>...</li><li>...</li> <!--这种结构写法没有小间隙-->
</ul>

3.当给元素填充内容的时候，会出现下移情况，原因是原来的对齐方式很迷(逞强脸)，因为这时候加个vertical-align:"top"/"bottom"（推荐使用属性值）/"middle";即可解决，

外边距特性

上下的外边距会进行合并，以边距大的为准

默认情况下，自己元素的外边距不能直接作用于父级，而是传递给父级

解决方案:父级加边框或者加上内边距，虽然这两者能解决问题，但是在实际开发中

最常见的是给元素加上overflow:hidden;样式。