html——inline、block与block-inline区别

块级元素

会占领页面的一行，其后多个block元素自动换行、可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。

ps:常见的块级元素:div,img,ul,form,p等

行级元素

与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。

ps：em，strong，br,input等

display:inline-block，block，inline元素的区别

1、display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

2、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

3、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>display:inline-block</title><style type="text/css">li{width:200px;text-align: center;list-style: none;display: inline-block;background-color: #eee;}</style>
</head>
<body><ul><li><a href="#">inline-block</a></li><li><a href="#">inline-block</a></li><li><a href="#">inline-block</a></li><li><a href="#">inline-block</a></li><li><a href="#">inline-block</a></li></ul>
</body>
</html>

display:inline-block，block，inline示例

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">#inline p{display: inline;background-color:red ;width:300px;/*这里设置无用*/}#inline-block p{display: inline-block;background-color:red ;width:100px;padding:10px;}#block p{display: block;background-color: red;width:100px;padding:20px;}div{margin:20px;background-color: #eee;}</style>
</head>
<body><div id="inline">display:inline 在同一行，并且宽度就等于文字内容的宽度且设置宽度无用<p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容</div><div id="inline-block">display:inline-block  既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高，margin，padding<p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容</div><div id="block">display:block 块级元素会自动换新行，占领一行,可以设置宽高，margin，padding <p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容</div>
</body>
</html>

需要注意的是：

低版本的ie浏览器（ie6 ie7）是不支持display:inline-block;所以理论上ie是不识别的，但是在 ie 内核下有个部分叫做 hasLayout，只要触发了它，这个元素就可以设置高宽从而使行级元素拥有了display:inline-block属性的表象。

顺便说一下text-align与align区别

align ：规定 div 元素中的内容的水平对齐方式。

text-align：规定“元素中”的文本的水平对齐方式。
两个属性使用的地方不一样，但是作用一样！
<div align="center">
This is some text!
</div>

align直接写在是div的属性

<div style="text-align:center">
text-align则是Css的属性

html——inline、block与block-inline区别相关推荐

display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
block，inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
inline-block什么意思中文_block，inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
Ruby 之 Block, Proc, Lambda 联系--区别，转载
Ruby 之 Block, Proc, Lambda Block Block 不是对象,是Ruby的语言特性,近似于闭包(Closure). 范例: def meth res= yield ...
HTML中display常用值inline，block与inline-block的区别
inline 表示行级元素,改变以下值无效果,width,height,padding,margin,line-height block 表示块级元素,每次独占一块,改变这些值有用width,heig ...
block标签、inline标签、inline-block标签的特点
欢迎关注朋友的公众号"证件照一键换底色",可处理证件照(换背景.换底色.换正装) block标签(比如div) 1.默认独占一行显示 2.没有宽度时,默认撑满一排 3.支持所有cs ...
snort inline模式和passive模式区别
passive mode provides a reactive protection. It can be configured to reset the attacker's connection ...
block与delegate的区别
1.从源头上理解和区别block和delegate delegate运行成本低,block的运行成本高. block出栈需要将使用的数据从栈内存拷贝到堆内存,当然对象的话就是加计数,使用完或者bloc ...
Spark block和partition的区别
hdfs中的block是分布式存储的最小单元,类似于盛放文件的盒子,一个文件可能要占多个盒子,但一个盒子里的内容只可能来自同一份文件.假设block设置为128M,文件是250M,那么这份文件占3个b ...

html——inline、block与block-inline区别

html——inline、block与block-inline区别相关推荐

最新文章

热门文章