img自带的3px的底部留白
vertical-align:垂直方向对齐方式 (只对图片生效)
baseline 基线 默认值bottom 底线 可以解决bugmiddle 中线 可以解决bugtop 顶线 可以解决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