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" ...
随机推荐
- 【iOS】objective-c 文档生成工具 appledoc
最近做ios framework的一些测试,提供给其他开发者使用的framework,API文档变得更加重要,以前没有接触过,这次尝试使用了一把appledoc来生成一下文档,感觉还不错. 首先,是从 ...
- cocos2d.js
1.节点是Cocos2d最基础的东西 2.坐标与普通数学坐标一致 3.children属性表示节点的孩子,父节点位置变化,它包含的子节点也会跟着变化,以整体的形势移动 4.层(layer), 新建层: ...
- jQuery工具函数上
1.字符串操作 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- php 对数组按某个字段进行排序
//$arrays 需要排序的数组,$sort_key 需要排序的键名称 function my_sort($arrays,$sort_key,$sort_order=SORT_DESC,$sort_ ...
- 正式学习React(一) 开始学习之前必读
为什么要加这个必读!因为webpack本身是基于node环境的, 里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑. 本文是我已经写完正式学习Rea ...
- SARscape5.2哨兵1A数据的读取
SARscape5.2支持哨兵1A数据的读取,支持的数据类型有: SM SLC ——条带模式的斜距单视复数产品 IW SLC——干涉宽幅模式(TOPS Mode)的斜距单视复数产品 EW SLC——超 ...
- OSCHina技术导向:Java模板引擎velocity
OSChina 采用 velocity 作为页面模板 Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template langua ...
- 续前篇---数据挖掘之聚类算法k-mediod(PAM)原理及实现
上一篇博文中介绍了聚类算法中的kmeans算法.无可非议kmeans由于其算法简单加之分类效率较高 已经广泛应用于聚类应用中. 然而kmeans并非十全十美的.其对于数据中的噪声和孤立点的聚类带来的误 ...
- diff函数(matlab)
diff函数式用于求导数和差分的.无论是求导数还是差分,其原理是一样的. 这里简单介绍下其用法: 前后相邻元素之差 上下相邻行之差. 与diff(A,1,1)类似. 第三个参数为2时,则变为列差分运算 ...
- Wikioi 1294 全排列
先给出链接地址:Wikioi 1294 虽然题目很短,论难度也就是个深搜,算法方面我就不多说了,而且我知道c++有个函数叫next_permutation,谁用谁知道. 代码如下: #include& ...