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

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

html标签元素的分类

1. 块状元素
   常见的块状元素有：<div> <p> <h1>...<h6> <ol> <ul> <table> <form> 等
2. 内联元素（行内元素）
   常见的内联元素有: <a> <span> <br> <i> <strong> <label>
3. 内联块状元素
   常见的内联块状元素有:<img> <input>

各种元素分类的特点

块状元素特点：

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

内联元素特点：

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

内联块状元素特点：

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

改变标签元素类型的方法

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

盒子模型

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

可以看到，盒子模型中，一个标签是由内容，内填充（padding）、边框（border）、外边距（margin）组成的
一个元素的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
一个元素的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距
我的简书博客：https://www.jianshu.com/p/601c217b33e1