标签显示器模式以及转换 display

标签的类型（显示模式）

    HTML标签一般分为三种类型，1.块标签（块元素） 2.行内标签（行内元素）3.行内块标签（行内块元素）

1.      块标签（块元素）：
           1.追常见的块标签：<h1>-<h6>,<div>,<p>,<ul>,<ol>,<li>,最典型的块标签是div
           2.块标签特性：1.块标签通常会独占一行或多行 .2.宽度默认值100% 3.块标签可以设置高度，宽度，行高，内边距，外边距等。4.可以容纳其他的块元素或者行内元素。
2.  行内标签（行内元素）：
           1.常见的行内标签:<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<u>,<ins>,<span>,最典型的的span。
           2.行内标签的特性：1.和相邻的行内元素会在一行.2.设置宽高没有效果，但是水平方向的内边距和外边距可以设置。3.默认宽度就是它本身的文本内容的宽度。4.行内元素只能容纳文本或者其他行内元素。
3.  行内块标签（行内块元素）：  1.常见的行内块元素：<img>,<input>,<td>2.行内块元素的特性：1.行内块元素会和相邻的行内块元素或者行内元素在一行。2.默认宽度就是它文本内容。3.宽高，外边距和内边距都可以设置。

 

 

display的作用：设置或检索元素的类型

属性值19个：block/inline/inline-block/none/list-item/table-header-group...
五个常用属性值：
1）block 块元素的display默认属性值，当给元素加display：block后元素变为块元素。
    （注意：当元素设置了float属性后，就相当于给元素加了display：block属性）
2）inline 内联元素的display默认属性值，当给元素加display：inline元素变为内联元素
3)inline-block 内联块元素默认值：行内的其他元素显示在同一行，但是可以直接设置宽高，如：img，input（注意：只有这一个元素类型支持vertical-align属性）
4）none 元素被隐藏不显示
5）list-item 将元素转换成列表。li的display默认属性值；

 

visibility:hidden/visible;隐藏/可见
visibility:hidden和display:none区别：前者会使对象不可见，但是在网页中占据空间，而后者会使对象彻底消失。