CSS基础-标签的分类

 标签的类型：

 

在CSS中，html中的标签元素大体被分为三种不同的类型：

块状元素

行内元素

行内块元素

 

 

 

块级元素： 

在 html 中 < div>、

、

、< ul > 和 < li > 就是块级元素。

设置 display:block 就是将元素显示为块级元素。

 

块级元素特点：

1 、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）

2 、元素的高度、宽度可设置。

3 、元素宽度在不设置的情况下，是它本身父容器的 100% （和父元素的宽度一致），除非设定一个宽度。

 margin:0 auto;

• 让一个有宽度，宽度不为 100% 的块级元素 居中对齐

 

代表： ( div  h  p ),  ( ul  ol  li ), ( dl  dt  dd ) ...

 

 

行内元素：

在 html 中， 、 、 、 和 < em > 就是典型的行内元素（ inline ）元素。

当然块状元素也可以通过代码 display:inline 将元素设置为行内元素。

 

行内元素特点：

1 、一行可以放多个；

2 、元素的高度、宽度不可设置；

3 、元素的宽度就是它包含的文字或图片（一般 a 标签里面可以包图片）的宽度，不可改变。

给包裹行 内元素、行内块元素 的元素 添加 text-align ： center 可以让行内、行内块元素 在该元素 中居中

 

代表标签： span   strong   em    del  ins   b  u   i   s  a

 

 

行内块元素：

行内块元素（ inline-block ）就是同时具备行内元素、块状元素的特点

代码 display:inline -block 就是将元素设置为行内块元素。

 

inline-block 元素特点：

1 、和其他元素都在一行上；

2 、元素的高度、宽度可设置

 

代表标签： img     input  button textarea

 

给包裹行内元素、行内块元素的元素添加 text-align ： center 可以让行内、行内块元素在该元素中居中

 

 显示模式的切换：

1.display:block ;   将行内、行内块元素转为块

2.display:inline ;   将块元素转为行内（一般不将块元素转为行内元素）

        3.display:inline-block;  将块和行内元素转为行内块

 

 标签的类型

标签的类型标签的类型 

标签

 

标签的类型的类型标签的类型