元素类型

Posted 2021-01-20

块状元素
1.块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等；
2.块元素的特点：
①默认情况下，块状元素都会独占一行，块状元素会按顺序自上而下排列。
②块状元素都可以直接定义自己的宽度和高度。?
③块状元素遵循盒模型的所有规则，一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。（p标签除外）

内联元素
1.常见的内联元素如：a,span,i,em,strong,b等
2.内联元素的特点：
①内联元素其后如果是内联元素则会在一行内逐个进行显示；
②内联元素显示的宽度、高度只能根据所包含内容的高度和宽度来确定，不能直接定义它的宽和高，它的最小内容单元也会呈现矩形形状；
③内联元素也会遵循盒模型基本规则，但个别属性不能正确显示;

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

总结
1、大部分块元素display属性值默认为block，其中li默认值为list-item。
2、大部分内联元素(行内元素、行间元素)的display属性值默认为inline,其中img,input，默认为inline-block。