css基础知识之标签分类

html-css012

css基础知识之标签分类,第1张

按照显示方式分为块元素 、行内元素和行内块元素(内联元素)

典型代表,Div,h1-h6,p,ul,li

特点:

典型代表 span ,a, ,strong , em, del, ins

特点:

典型代表 input img

特点:

1.块元素转行内元素

display:inline

2.行内元素转块元素

display:block

3.块和行内元素转行内块元素

display:inline-block

块状元素特点:

内联元素特点:

内联块状元素特点:

display:block 可以将元素设置为块状元素

display:inline 可以将元素设置为内联元素

display:inline-block可以将元素设置为内联块状元素

每个HTML元素都会有盒子模型,如下图

[图片上传失败...(image-8891fd-1543076237898)]

可以看到,盒子模型中,一个标签是由内容,内填充(padding)、边框(border)、外边距(margin)组成的

一个元素的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距

一个元素的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距

CSS的选择器其实大类的话可以分为三类,即id选择器、class选择器、标签选择器。

用法如下:

#id名

{

属性名:属性值

}

.class名

{

属性名:属性值

}

标签名

{

属性名:属性值

}

其中,他们之间又可以以不同的方式进行组合,如下:

后代选择器:

父代名

后代名

{

属性名:属性值

}

子代选择器:

父代名>子代名

{

属性名:属性值

}

群组选择器:

#name1,

.name2,

#name

div

{

属性名:属性值

}

伪类选择器:

name:伪类

通用(通配符)选择器:

*

{

属性名:

属性值

}……

常用的也就这些。