CSS(二)标签显示模式

时间:2019-06-16
本文章向大家介绍CSS(二)标签显示模式,主要包括CSS(二)标签显示模式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

标签显示模式

一)块级元素(block-level)

每个块级元素都会独自占一行或者多行,可以对其设置宽度(默认是容器的100%)、高度及对齐等,

可以容纳内联元素或者其他块元素(p、h1不要包裹其他块级元素)。

典型的又:div、table、ul、p、h1等。

二)内联元素(inline-level)

内联元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度(默认为本身内容的宽度)、高度、对齐等属性,

但水平方向上的padding和margin可以设置,只能放文本和其他行内元素(a除外)。

典型的有:span、strong、em等。

三)行内块元素(inline-block)

属于行内元素的特殊标签---img、input、td,可以对它们设置宽高和对齐属性。

四)标签显示模式的转换(display)

1.块转行内: display:inline

2.行内转块: display:block

3.转换为行内块: display:inline-block

在设置样式的时候行内元素,行内块元素可以当作文本来看(可以设置text-align该变其位置),块级元素不行。

原文地址:https://www.cnblogs.com/Shadowplay/p/10994732.html