区块和行级、行内块

区块和布局

div> 和span>标签

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

1. div> 标签用来布局，但是现在一行只能放一个div>。 大盒子

2. 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;

1. 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

2. 默认宽度就是它本身内容的宽度。

3. 高度，行高、外边距以及内边距都可以控制。