摘抄于慕课网《HTML+CSS基础课程》
一、元素分类
在html中的标签元素大体被分为三种不同的类型：
块状元素、
内联元素（又叫行内元素）和
内联块状元素。
常用的
块状元素有：div、p、h1~h6、ol、ul、li、dl、table、address、blockquote、form
常用的
内联元素有：a、span、br、i、em、strong、label、q、var、cite、code
常用的
内联块元素有：img、input
1.块级元素
通过设置d
isplay:block就是将元素显示为块级元素。也可以通过此设置将内联元素设置为块状元素。
块级元素特点：
1.每个块级元素都从新的一行开始，并且其后的元素也另起一行
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.元素高度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。
2.内联元素
块状元素可以通过代码
display:inline将元素设置为内联元素。
内联元素特点：
1.和其他元素都在一行上；
2.元素的
高度、宽度以及顶部和底部边距
不可设置；
3.元素的宽度就是它包含文字或图片的宽度，不可改变。
3.内联块元素
同时具备内联元素、块状元素的特点。通过设置
display:inline-block将元素设置为内联块状元素。
内联块元素特点：
1.和其他元素都在一行上；
2.元素的高度、宽度、行高以及顶和底边都可设置
4.隐性改变display
当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute 和
float : left 或 float:right
后元素的display显示类型就会自动变为以
display:inline-block（内联块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
二、盒子模型
1.边框 border
盒子模型的边框就是围绕着内容及补白的线，可以设置边框的三个属性，分别是：
粗细、
样式和
颜色。
常见设置：border:2px solid red;
全称设置：border-width:2px; border-style:solid; border-color:red;
border-style常见样式有：dashed（虚线）|dotted（点线）|solid（实线）
此外，边框还有方向。border-top、border-rigth、border-bottom、border-left
2.高度和宽度 height width
css内定义的宽width和高height，指的是填充以里的
内容范围。
一个元素实际宽度=左边界（margin-left）+左边框（border-left）+左填充（padding-left）+内容宽度（width）+右填充（padding-rigth）+右边框（border-right）+右边界（margin-right）。
3.填充 padding
元素内容与边框之间是可以设置距离的，称之为“填充”。填充可以分为上、右、下、左（顺时针）。
4.边界 margin
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。
padding和margin的区别，padding在边框里，margin在边框外。