img自带的3px的底部留白
- vertical-align:垂直方向对齐方式 (只对图片生效)
- baseline 基线 默认值
- bottom 底线 可以解决bug
- middle 中线 可以解决bug
- top 顶线 可以解决bug
- 应用
- 解决图片底部三像素的留白
- 调整小图标和文字对齐的方式
元素类型
- 内联元素(inline) span b strong i em a sub sup img
- 宽高不生效,由内容决定
- 在同一行显示
- 盒模型属性padding的左右生效,上下显示不准确;margin的左右显示准确,上下不准确
- 块级元素(block) h1-h6 div p ul li dl dt dd ol form table
- 宽高生效
- 独占一行
- 盒模型属性都生效
- 一般作为容器去包裹其他元素,p标签一般不包裹块级元素,也不包裹自己
- 行内块元素(inline-block) input (img)
- 在同一行显示
- 宽高生效
- 盒模型属性都生效
- 元素类型转换 display
- block 块
- inline 内联
- inline-block 内联块
- none 隐藏 隐藏之后不占位
- visibility: hidden; 隐藏元素 隐藏之后会占位
- 解决横向排列的元素之间的空格
- 将标签代码写到同一行
- 添加浮动
- 给元素添加一个父元素,设置font-size:0;然后单独设置该元素的字体大小
- 内联元素添加浮动之后,会转换成块级元素
溢出属性
- overflow(overflow-x/overflow-y)
- visible 默认值 显示
- hidden 溢出隐藏
- scroll 显示滚动条
- auto 内容没有溢出正常显示,溢出显示滚动条
- 单行文本溢出显示省略号
- 设置宽度
- 设置不换行 white-space:nowrap
- 设置溢出隐藏 overflow:hidden
- 设置文本溢出显示省略号 text-overflow:ellipsis