css元素的分类以及盒子模型
html标签元素的分类
- 块状元素
常见的块状元素有：<div> <p> <h1>...<h6> <ol> <ul> <table> <form>等 - 内联元素（行内元素）
常见的内联元素有:<a> <span> <br> <i> <strong> <label> - 内联块状元素
常见的内联块状元素有:<img> <input>
##各种元素分类的特点
块状元素特点： - 每个块级元素都是霸占一行的，块状元素的下一个元素是从下一行开始
- 元素的高度、宽度、行高以及顶和底边距都是可设置的
- 元素宽度在不设置的情况下，是它本身父容器的100%
内联元素特点：
- 和其他元素都在一行上
- 元素的高度，宽度以及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度，不可设置
内联块状元素特点：
- 和其他元素都在一行上
- 元素的高度、宽度、行高以及底边距都可设置
###改变标签元素类型的方法
display:block 可以将元素设置为块状元素
display:inline 可以将元素设置为内联元素
display:inline-block可以将元素设置为内联块状元素
##盒子模型
每个HTML元素都会有盒子模型，如下图
[图片上传失败…(image-94792d-1543076431850)]
可以看到，盒子模型中，一个标签是由内容，内填充（padding）、边框（border）、外边距（margin）组成的
一个元素的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
一个元素的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距
我的简书博客：https://www.jianshu.com/p/601c217b33e1