inline元素、block元素、inline-block元素

inline 内联元素:是不可以控制宽和高、margin等;并且在同一行显示,不换行,直到该行排满。

block 块级元素:是可以控制宽和高、margin等,并且会换行。块级对象元素会单独占一行显示,多个block元素会各自新起一行。

inline-block 内联块级元素: 具有宽度高度特性,又具有同行特性(一行内显示)

常見的inline元素:span,a,strong,em等。

常見的block元素:div,p,h1到h6,form,ul,ol等。

常見的inline-block元素:img,input等。

注意:

(1)块级元素的默认长度是它父元素的长度。

(2)块级元素能包含块级元素,内行元素。

(3)行内元素不能包含块级元素吗。

(4)行内元素能包含其他行内元素。

参考:

https://www.cnblogs.com/jerry666/p/5223409.html

https://www.jianshu.com/p/37de1610a1e1

原文地址:https://www.cnblogs.com/swing07/p/10498948.html

时间: 2024-11-06 07:15:37

inline元素、block元素、inline-block元素的相关文章

块级元素和行内元素的区别 (block vs. inline)

块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了width属性,仍然独占一行. 可以设置margin, padding. 行内元素 (display: inline) HTML元素分为替换元素和非替换元素. 替换元素是指浏览器根据其标签的元素与属性来判断显示具体的内容.例如img,input等. HTML中大多数元素是不可替换元素,他们将内容直接告

block(块级元素)和 inline(内联元素) 的区别

<td style="word-break:break-all"> 强制换行 <td  style="width:80px;display:block;boverflow: hidden;">超出隐藏,注意要设置宽度. 内联转化为块状:display:block 或 float:left / right 块状转化为内联:display:inline; 但是要注意内联元素是不能设置宽度和高度的.那就要强制把内联元素转换为块级元素了 div这样的

CSS 中 block 元素(块级元素)与 inline 元素(内联元素)详解

块元素 (block element) 一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素 , 常见块元素是段落标签“P”.“form”这个块元素比较非凡,它只能用来容纳其他块元素. 假如没有 CSS 的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了 CSS 以后,我们可以改变这种 HTML 的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table 标签也是块元素的一种,Table Based Layout 和 

块级元素和行内元素以及display中block、inline和inline-block的区别

块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念.块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示.而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了.比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列. block元素

使用float和display:block将内联元素转换成块元素的不同点

使用float和display:block将内联元素转换成块元素的不同点:建议:尽可能的手写代码,可以有效的提高学习效率和深度.内联元素可以转换成块级元素,常用的方法比如可以为内联元素使用float属性让内联元素浮动起来,或者为内联元素添加display:block.虽然两者都可以让内联元素转换成块级元素,但是有区别的.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">

2017-08-20 block,inline和inline-block概念和区别

display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和

block、inline、inline-block对比

display:block 1.block元素会独占一行,多个block元素会各种新起一行.默认情况下,block元素宽度自动填满其父元素容器: 2.block元素可以设置width和height属性,块级元素即使设置宽度还是会独占一行: 3.block元素可以设置margin和padding: display:inline 1.inline元素不会独占一行,多个相邻的行内元素会排在同一行里,直到一行排列不下,才会新起一行,起宽度随元素内容而变化: 2.inline元素设置width和heigh

block,inline和inline-block概念和区别

block,inline和inline-block概念和区别 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, F

CSS中display属性:block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

block、inline、inline-block

block: block - 块级元素 常见的块级元素包括:div,form,p,table,ul,ol,dl,h1~h6,pre block 可以包含 inlne 和 block 和 inline-block(有的不适合,比如 p): block 独占一行,多个block 会另起一行: 默认情况下,block元素宽度自动填满父元素: block 可以设置 width 和 height,但还是独占一行: block 可以设置margin 和 padding: inline: inline - 行