标签显示模式

(元素)标签显示模式

显示模式即：显示方式

块级元素、行内元素、行内块元素、元素显示模式转换

 

块-显示模式

只要看到换行的，大多就是块显示模式

特点：可以设置宽高

/*
块级元素(标签)显示特点：
    1.独占一行(一行只能显示一个)
    2.宽度默认是父元素的宽度，高度默认由内容撑开
    3.可以设置宽高
代表标签：
    div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...
*/

行内-显示模式

只要看到不行换的，大多都是行内显示模式

特点：不可以设置宽高，设置宽高不生效，尺寸和内容的大小相同

/*
行内元素(标签)显示特点：
    1.一行可以显示多个
    2.宽度和高度默认由内容撑开
    3.不可以设置宽高
代表标签：
    a、span、b、u、i、s、strong、ins、em、del...
*/

 

行内块-显示模式

特点：一行显示多个，加宽高生效

/*
行内块元素显示特点：
    1.一行可以显示多个
    2.可以设置宽高
代表标签：
    iuput、textarea、button、select...
    特殊情况：img标签由行内块元素特点，但Chrome调试工中显示结果是inline
*/

总结

/*
如果不知道这个标签是块显示模式，还是行内显示模式，就输入两个同样的标签，看是否换行，换行标签的就是块显示模式，不换的标签就是行内显示模式
*/

显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

属性	属性值	效果	使用频率
display:	block	转换称块级元素	较多
display:	inline-block	转换成行内块元素	较多
display:	inline	转换成行内元素	极少