CSS 元素类型归纳

CSS 元素类型

一.概念

根据CSS显示分类,XHTML元素被分为:块状元素,内联元素(置换元素&&非置换元素)

1.块级元素特点

(1) 块状元素在网页中就是以块的形式显示,所谓块状就是元素显示未矩形区域

(2) 默认情况下,块状元素都会占据一行,通俗的说,两个相邻块状元素不会出现并列显示的现象,默认情况下,块状元素会按顺序自上而下排列

(3) 块状元素都可以定义自己的宽度和高度

(4) 块状元素一般作为其他元素的容器,它可以容纳其它内联元素和其它块状元素,我们可以把这种容器比喻为一个盒子.

2.内联元素特点(行内元素)

(1) 内联元素的表现形式是始终以行内逐个进行显示

(2) 内联元素没有自己的形状,不能定义它的宽和高,它,显示的高度和宽由内容决定,它只能根据所包含内容的高度,最小内容单元也会呈现矩形形状

(3) 内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示(padding-top,margin-top/bottom)

二.元素分类

1.常见块级元素

元素	描述
div	最常用的块级元素
dl-dt-dd	搭配使用的块级元素
form	表单
h1-h6	大小标题
hr	水平分割线
ol	有序列表
p	段落
ul	无序列表
fieldset	表单字段集

2.常见的内联元素(行内元素)

元素	描述
a	超链接
br	换行
i	斜体
em	强调
label	表单标签
span	常见内联容器,定义文本内区域块
strong	粗体强调
textarea	多行文本输入框
u	下划线
select	下拉框

3.行内块元素

在行内元素中有几个特殊的标签 img input td

(1) 可以设置宽高和对齐属性,默认宽度就是本身内容宽度

(2) 和相邻行内元素(行内块)在同一行上,但是之间会有间隙

元素	描述
img	图片
input	输入框
td	表格单元格

三.元素的转换

需要根据上下文关系确定该元素是块元素或者内联元素

盒子模型可以通过display属性来改变默认的显示类型

1display属性

display属性拥有18个属性值

属性值:block/inline/inline-block/none/flex/grid/list-item/table-header-grounp/table-footer-group/table

作用:该属性设置或者检索对象元素应该生成的盒模型的类型

元素	描述
block 块状,显示	类似在元素后面添加换行符,也就是说其他元素不能在其后面并列显示(将元素转为块状元素,是该元素拥有块状元素的特点)
inline 内联,显示	在元素后面删除换行符,多个元素可以在一行内并列显示(元素转为内联元素)
float 浮动	就相当于给该元素加了display:block声明,但是脱离了文档流
inline-block 行内块显示	元素的内容以块状显示,行列的其他元素同在一行(只有这一个元素类型支持(vertical-align) img,input(行内块元素)
none	不会被显示
list-item	将元素转为列表,li的默认类型

2.基本类型

(1) 大部分块元素display属性值默认为block,其中列表li的默认值为list-item

(2) 大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block(行内块元素)

3.垂直居中

设置一个元素在一个容器中垂直居中,必须更改默认的display属性值为inline-block,并加上同级元素(标尺).

同级元素(标尺)样式设置为:

span{
  vertical-align:middle;
  width:0;
  height:100%;
  display:inline-block;
}

三个条件

(1) 必须给父容器加上text-align:center

(2) 必须给当前元素转为行内块元素(display:inline-block),再给当前元素加上vertical-align:middle;

(3)在当前元素的后面(没有回车)加上同级元素span作为参照物(标尺),并对span进行设置上述样式