Block和inline元素对比
所有的HTML元素都属于block和inline之一。
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
相反地,inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢?
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色
Block和inline元素对比的更多相关文章
- block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- block,inline和inlinke-block细节对比
block,inline和inlinke-block细节对比 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 ...
- block,inline和inline-block概念和区别(转)
转自 http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...
- block,inline,inline-block的区别
block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...
- block,inline和inline-block对比
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- css(二) block,inline和inline-block概念和区别
转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...
- display:inline-block,block,inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- block,inline和inline-block概念和区别(转载)
转自: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...
- 2017-08-20 block,inline和inline-block概念和区别
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
随机推荐
- mysql数据库引擎(InnoDB MyISAM)
MySQL的默认存储引擎’在5.5版本以前是MYISAM,5.5之后是INNODB. 两种存储引擎的索引结构都是B+树,B+树的详细介绍可参考https://www.cnblogs.com/yange ...
- Android Studio 常见命令
android studio 常用命令 Description Mac Linux/Win Lookup IDE commands Cmd+Shift+A Ctrl+Shift+A Open Clas ...
- [JSOI 2015] 子集选取
4475: [Jsoi2015]子集选取 Time Limit: 1 Sec Memory Limit: 512 MBSubmit: 363 Solved: 255[Submit][Status] ...
- 如何轻松的把图片导入execl表格中
在项目中有时候会遇到往数据库中导数据的时候,往往需要把图片也一起导入execl表格中,那怎么才能把图片一块导入至execl中呢?那么今天我们就来看看怎么实现吧! 如何实现?今天我们就来用jxl和poi ...
- BZOJ 2131 [scoi2010] 传送带
@(BZOJ)[三分法] Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段. 两条传送带分别为线段AB和线段CD. lxhgww在AB上的移动速度为P,在CD上的移 ...
- JavaWeb过滤器.监听器.拦截器-?原理&区别
过滤器可以简单理解为“取你所想取”,忽视掉那些你不想要的东西:拦截器可以简单理解为“拒你所想拒”,关心你想要拒绝掉哪些东西,比如一个BBS论坛上拦截掉敏感词汇. 1.拦截器是基于java的反射机制,过 ...
- DEV GridControl 常用属性 z
1隐藏最上面的GroupPanel gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值 sValue=Table.Rows[grid ...
- WindowManager.LayoutParams 详解
WindowManager.LayoutParams 是 WindowManager 接口的嵌套类:继承于 ViewGroup.LayoutParams .它的内容十分丰富.其实WindowManag ...
- Projective Texture的原理与实现 【转】
Projective Texture是比较常见的一种技术,实现起来代码也就区区的不过百行,了解其原理及技术细节是我们的重点,知其然,知其所以然. 粗略的说就是想象场景 ...
- Linux Apache 给 awstats 创建 訪问password
CentOS7 安装最新版本号 awstats ,在httpd.conf 中增加了alias,能够直接訪问网址就进入 浏览.十分不安全. 给訪问加上password的方法: [root@localho ...