区块和布局
div> 和span>标签
div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。
-
div> 标签用来布局，但是现在一行只能放一个div>。 大盒子
-
span> 标签用来布局，一行上可以多个 <span。小盒子
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
组成:外边距(margin)+边框(border)+内边距(padding)+内容(contet)
常用实例: div（盒子）、 address（ 定义地址）
ul（无序列表）、ol（有序列表）、li（列表的项）
dl（定义列表）、dd（定义列表中定义条目）、dt（定义列表中的项目）
p（段落）、h1~h6（网页中的标题，从大到小）
table（表格）、td（标准单元格)、tr（行）、th(表头单元格)
form（表单）、pre（预格式化文本）、hr（分割线）
caption （表格标题）、thead(表格表头)、tbody（表格主体）
特点：
-
每个元素独占一行，默认情况下宽度等于父元素的宽度
-
不设置高度时，高度为0，有内容时高度由内容撑开，不解析换行符
-
可以设置width、height、margin、padding属性
-
dispaly:block
HTML 内联元素
-
内联元素在显示时通常不会以新行开始。
-
相邻的元素会排列在同一行，排不下时会自动换行
-
不支持宽高属性，宽高完全由内容撑开，会解析换行符
-
使用部分样式会出错（上下margin和padding等）,只能设置margin-left、margin-right、padding-left、padding-right.(可以出现效果)
-
dispaly:inline
常见实例:span（行间元素） 、textarea（多行文本输入控件）
b（加粗）、strong（加重）、i（斜体）、em（着重）
sub（下标）、sup（上标）
ins（插入）、del（删除）、br（换行）、a（定义锚以及超链接）
img（图片）、input（表单项）、label（表单标记）
big（大号字体加粗）、small9(呈现小号字体效果）
code（定义计算机代码文本）、q（定义短的引用）、select（定义单选或者多
行内块元素
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
-
和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
-
默认宽度就是它本身内容的宽度。
-
高度，行高、外边距以及内边距都可以控制。