block,inline,inline-block
- block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
- inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
- inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
- inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
inline-block的元素特点:
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性).
block,inline,inline-block的更多相关文章
- block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- block、inline、inline-block
block: block - 块级元素 常见的块级元素包括:div,form,p,table,ul,ol,dl,h1~h6,pre block 可以包含 inlne 和 block 和 inline- ...
- block,inline和inlinke-block细节对比
block,inline和inlinke-block细节对比 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- block,inline和inline-block概念和区别(转)
转自 http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- block,inline,inline-block的区别
block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...
- block,inline和inline-block对比
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline、block、inline-block 的区别
一.块级元素 与 行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
随机推荐
- 日志管理-NLog日志框架简写用法
本文转载:http://www.blogjava.net/qiyadeng/archive/2013/02/27/395799.html 在.net中也有非常多的日志工具,今天介绍下NLog.NLog ...
- CentOS minimal版安装图形界面的步骤(自动获取IP)
1.连接网络: CentOS minimal.iso安装好后,进入终端,默认是不开网络的, 首先启用网卡, 自动获取ip. ifconfig eth0 up www.2cto.com dhcli ...
- .Net MVC4 加.html后缀报404问题
一.配置方法: routes.MapRoute( name: "User_Default1", url: "user/{action}.html", defau ...
- asp.net 获取当月的第一天和最后一天示例
DateTime now = DateTime.Now; DateTime d1 = ); DateTime d2 = d1.AddMonths().AddDays(-); d1是本月的第一天,d2本 ...
- java中内存结构及堆栈详解
一. java内存结构 1. Heap(堆):实例分配的地方,通过-Xms与-Xmx来设置 2. MethodArea(方法区域):类的信息及静态变量. 对应是Permanet Generation, ...
- libevent evbuffer bug
今天发现 libevent 2.0.22 一个坑爹的bug,导致消息混乱.查找问题浪费一天,复现代码如下 #include <event2/buffer.h> #include <s ...
- web开发(Java&Jquery)实现验证码
1. Ajax Fancy Capcha 一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制. from : http://www.webdesignbe ...
- 杭电oj 2719
Tips:本程序没有什么难度,只要按照逻辑进行替换即可,需要注意的是,由于输入串中含有空格符号,所以不能使用scanf("%s",ch);来读取一串,可以使用gets()函数读取一 ...
- js LocalStorage
此对象主要有两个方法:保存数据:localStorage.setItem(Key, value);读取数据:localStorage.getItem(Key);Key:表示你要存入的键名称,此名称可以 ...
- java 获取特定天数的时间戳
public Timestamp strToDate(int type){ Timestamp time = null; DateFormat format2= new SimpleDateForma ...