元素默认显示模式与元素特性总结 一--块级标签总结 二--行级元素特性总结 三--行内块元素特性总结 四--标签转换 五Css显示隐藏 六 vertical-align属性 七 图片下方间隙问题

元素默认显示模式与元素特性总结

(一)

块级标签

  本身属性为display:block;的元素 称为块级元素

  div p h1-h6 hr ul li ol dl dt dd

特性： （1.）宽度在没有设置的情况下，默认撑满整个父元素

（ 2.）高度在在没有设置的情况下，由内容撑开            （ 3.）垂直布局，独立成行

（ 4.）具有盒模型特征(宽高、padding、border、margin)；也就是说这四个属性都能设置

(二）

行级(行内)标签

  本身属性为display:inline;的元素 称为行级元素

  a span b strong em i sup sub del

特性：（1）.宽高由内容撑开           （ 2）水平布局，一行放不下会自动折行

（3.）换行和空格会被解析                （4.）——具有部分盒模型特征(不可以设置宽高,可以设置padding,不能设置上下外间距，可以设置左右外间距)

 （ 5）.行级标签不能嵌套块级标签和行内块标签    （  6）.可以嵌套行级标签

（三)

行内块标签

  本身属性为display:inline-block;的元素 称为行内块元素         列如：  img input

特性：（ 1.）可以设置宽高    （  2.）水平布局，一行放不下会自动折行

  （3.）换行和空格会被解析

 （ 4）.具有盒模型特征(宽高、padding、border、margin)；也就是说这四个属性都能设置

（四）标签转换

 元素类型转换

特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。

display:inline;转换为行内元素。 【不常用】

 display:block;转换为块状元素。 【常用】

display:inline-block;转换为行内块状元素 【比较常用】 -->

（五）Css显示隐藏

（1）  显示    display:block；    隐藏     display：none；

元素隐藏后消失，原来位置也不存在

（2）  显示    visibility: visible；   隐藏：  visibility：hidden；

元素隐藏之后，原来的位置还在

（六）-vertical-align属性

给图片设置 给图片设置   给图片设置

常用的值：

vertical-align: baseline; 默认值，基线对齐 英文字母x的下端

  - vertical-align: top; 顶端对齐

  - vertical-align: bottom; 底端对齐

  - vertical-align: middle; 中部对齐 

应用：

图片与图片垂直方向的对齐

- 图片与文字垂直方向的对齐

- 图片与文本框垂直方向的对齐 input

（七）图片下方间隙问题

 图片间隙问题产生的原因：父元素没有设置高度，由图片撑开，就会有图片三像素问题

 为图片img标签的父元素设置高度，高度为图片的高度

————————————————————给父元素设置line-height:0;或者font-size:0;  不推荐

.给图片元素设置verticla-align:       为img标签设置垂直对齐方式

top bottom middle *

      vertical-align: middle;

      vertical-align: top;

      vertical-align: bottom;

img{ vertical-align: top|bottom|middle; }

、.给图片元素转块及标签 将img标签转成块级元素img{ display: block;}

      display: block;