css元素的分类以及盒子模型

css元素的分类以及盒子模型

html标签元素的分类

  1. 块状元素
    常见的块状元素有:

    ...

      • 内联元素(行内元素)
        常见的内联元素有:
      • 内联块状元素
        常见的内联块状元素有:
      • 各种元素分类的特点

        块状元素特点:

        1. 每个块级元素都是霸占一行的,块状元素的下一个元素是从下一行开始
        2. 元素的高度、宽度、行高以及顶和底边距都是可设置的
        3. 元素宽度在不设置的情况下,是它本身父容器的100%

        内联元素特点:

        1. 和其他元素都在一行上
        2. 元素的高度,宽度以及顶部和底部边距不可设置
        3. 元素的宽度就是它包含的文字或图片的宽度,不可设置

        内联块状元素特点:

        1. 和其他元素都在一行上
        2. 元素的高度、宽度、行高以及底边距都可设置

        改变标签元素类型的方法

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

        盒子模型

        每个HTML元素都会有盒子模型,如下图
        [图片上传失败...(image-8891fd-1543076237898)]
        可以看到,盒子模型中,一个标签是由内容,内填充(padding)、边框(border)、外边距(margin)组成的
        一个元素的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
        一个元素的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距

        你可能感兴趣的:(css元素的分类以及盒子模型)