1. display:block

1.1 block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度

1.2 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行

1.3 block元素可以设置margin和padding属性

2. display:inline

2.1 inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化

2.2 inline元素设置width,height属性无效

2.3 inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果

3. display:inline-block

3.1 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性

3.2 在当两个元素标签之间有换行符时，如果用inline-block的方式将元素并排显示时，如果父容器的宽度正好为并排显示子元素的宽度之和，则有可能不能并排显示，原因是inline-block会将换行渲染成空格占用一定的空间，所以为了让子元素并排显示则可以再父容器上设置font-size：0，这样空格就不会占用空间，如果子元素中又要显示的文本内容，则再在子容器上设置font-size就好

总结：

1. 常见的内联元素有 SPAN, A，INPUT，IMG等

CSS 中的内联元素、块级元素以及display的各个属性的特点相关推荐

CSS行内元素/块级元素
盒子模型并不一定就是div,它是一个泛指.所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. Margin(外边距) - 清除边框外 ...
HTML中行内元素块级元素行内块元素
行内元素块级元素 1.当给行内元素定义一个具体的宽高时,是没有用的.只有对于块级元素是有用的.除非在行内元素里面写上内容,那个内容有多大,那就会被撑开有多大例: 如果是块级元素 <style& ...
html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...
行内元素块级元素之间的嵌套
默认的span标签是一个行内标签,页面构成时,尽量把它作为最后一个标签. 当然不绝对,你可以在内套用同是行内标签的元素:<i>.<span>.<em>...等等等. ...
p标签内不能包含块级元素
发现一个不常用的冷知识学html的时候,以为块级元素可以包含任意的块级元素事实并非如此,p标签是不可以包含任何跨级元素的有些块元素不可以包含另一些块元素 ,DTD中规定了块级元素是不能放在P里 ...
html中的input是一个块级元素,input属于什么元素,input是行内块元素吗
我们已经讨论了一些HTML5改进的地方,比如placeholder,prefetching以及webStorage,下面我要介绍的是两个新的input元素类型: email和url. 让我们跟着代码来 ...
CSS中的BFC规范（块级格式化上下文）
触发BFC规范的元素,可以看成是一个独立的容器,不受其他元素影响触发BFC的方法浮动float 定位position:absolute.fixed display:inline-block.fle ...
js追加html内容换行符,javascript – 从HTML中提取文本,同时保留块级元素换行符
考虑: /** * Returns the style for a node. * * @param n The node to check. * @param p The property to r ...
CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫"盒子".但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的.比如:div 与s ...

CSS 中的内联元素、块级元素以及display的各个属性的特点

1. display:block

1.1 block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度

1.2 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行

1.3 block元素可以设置margin和padding属性

2. display:inline

2.1 inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化

2.2 inline元素设置width,height属性无效

2.3 inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果

3. display:inline-block

3.1 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性

总结：

1. 常见的内联元素有 SPAN, A，INPUT，IMG等

CSS 中的内联元素、块级元素以及display的各个属性的特点相关推荐

最新文章

热门文章