[html+css]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.块级元素

通过设置display: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在边框外。