3.html--块级元素与行内元素

图片选项卡

1. 从大到小
2. 从外到里
3. 从简单到复杂

学习技巧

1. what 是什么
2. when 什么时候用
3. where 什么地方
4. how 怎么用

dispaly

1. block 块级元素

• div h p ul li
• 独占一行
• 支持宽高
• 没有设置宽度的时候 默认宽度为父级100%
• 支持margin padding 支持css样式

2. inline 行内元素

• span a em
• 默认由内容撑开宽高
• 排成一行
• 不支持设置宽度 高度
• 不支持垂直方向的margin 支持左右margin
• padding的使用会出现诡异的情况 会把其他的样式遮掩住
• 空格被解析了一次 要去掉空格：a 不要留空格 b 父级字体大小设置为0，自身设置字体大小 c设加注释置浮动 d

3. inline-block 行内块

• 支持宽高 可以排成一行
• 没有设置宽度高度的时候 默认内容撑开宽度
• 空格会被解析
• 不支持margin:auto 支持margin padding
• 在一行内 padding会影响其他元素的高度 但是不会遮住其他样式

转换类型

1. 行内样式可转变为块级元素
2. 块级元素可转换为行内元素
3. 三个元素可互相转换