第七章 元素类型,溢出属性

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