block、inline、inline-block对比
2024-10-19 02:18:33
display:block
1.block元素会独占一行,多个block元素会各种新起一行。默认情况下,block元素宽度自动填满其父元素容器;
2.block元素可以设置width和height属性,块级元素即使设置宽度还是会独占一行;
3.block元素可以设置margin和padding;
display:inline
1.inline元素不会独占一行,多个相邻的行内元素会排在同一行里,直到一行排列不下,才会新起一行,起宽度随元素内容而变化;
2.inline元素设置width和height无效;
3.inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果;
display:inline-block
1.将对象呈现为inline对象,但是对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。比如我们给a标签inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性;
最新文章
- 隔天开启tomcat spring报错
- windows下virtualbox安装Ubuntu虚拟机
- graph-tool文档(一)- 快速开始使用Graph-tool - 3.图的过滤
- postgresql 分区表创建及测试
- 使用单用户模式破解Linux密码
- 安卓工程修改包名后 Failed to find provider info for...问题
- BZOJ 1588 营业额统计
- document_createElement
- 从源代码角度分析ViewStub 疑问与原理
- arm指令bne.w改成b,即无条件跳转
- Linux下自动备份MySQL数据库并上传到远程FTP服务器
- C# 处理Word自动生成报告 三、设计模板
- Acperience HDU - 5734
- Centos 7 安装图形化环境
- 利用grep参数查看某关键词前后几行内容
- CF418D Big Problems for Organizers 树的直径、ST表
- topcoder srm 490 div1
- Android游戏开发基本知识
- Struts2(四)属性驱动和模型驱动
- html处理富文本内容,避免XSS工具类
热门文章
- js函数——setinterval和setTimeout
- Datetime.GetDateTimeFormats()的集合
- session cookie用法
- JQuery Easy Ui dataGrid 数据表格 -->;转
- [repost]Xcode因为证书问题经常报的那些错
- Ubuntu各个版本支持时间
- 超强JavaScript编辑器WebStorm代码提示迟缓问题及其它想到的
- Zepto 使用中的一些注意点(转)
- Android应用的基本组件介绍和签名Android应用程序
- 使AIX下ksh可以翻查上一条命令