display:block;和display:inline;的区别
block元素特点:
1)处于常规流中时,如果width没有设置,会自动填充满父容器
2)可以应用margin/padding
3)在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4)处于常规流中时,布局在前后元素位置之间(独占一个水平空间)
5)忽略vertical-align
inline元素特点:
1)水平方向上根据direction依次布局
2)不会在元素前后进行换行
3)受white-space控制
4)margin/padding在竖直方向上无效,水平方向上有效
5)width/height属性对非替换行内元素无效,宽度由元素内容决定
6)非替换行内元素的行框高由line-height确定,替换行内元素的行框高由height,margin,padding,border决定
7)浮动或绝对定位时会转换为block
8)vertical-align属性生效
相关文章
- 11-15前端之旅HTML与CSS篇之清除浮动塌陷
- 11-15前端之旅HTML与CSS篇之block与inline的区别
- 11-15前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
- 11-15你不知道的css中block与inline的区别(转)
- 11-15前端之旅HTML与CSS篇之a便签中放入其他块元素会撑大高度的原因
- 11-15前端之旅HTML与CSS篇之自己总结的关于居中的方法
- 11-15高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
- 11-15前端之旅HTML与CSS篇之IE6常见BUG
- 11-15【轻松前端之旅】CSS选择器中的空格与尖括号有何区别?