css基础知识之标签分类

html-css020

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)组成的

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

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