资讯专栏INFORMATION COLUMN

css中的display属性(行内元素和块级元素)

Magicer / 2284人阅读

摘要:元素分类关于这点我还有些问题,暂且放上来,慢慢修改,非常欢迎纠正中的标签元素大体被分为三种不同类型块状元素,内联元素和内联块状元素常见的块状元素有常见的内联元素有有类特殊的元素如等,他们被称为可置换元素。

我们常用的display属性值有:

inline
block
inline-block
none

把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留。

我们最关心的还是display:inline、display:block和display:inline-block的区别:

inline特性
内联对象inline给它设置属性height和width是没有用的,致使它变宽变大的
原因是:
它实际宽度为:内部元素的宽+2*(padding+border+margin)
inline对象不多带带占一行。

block特性
而块对象block是可以设置宽高的,但是它的实际宽高是:width+2*(padding+border+margin)
block元素多带带占一行。

然而,当我们即需要div有宽高,又不希望它独占一行怎么办?

inline-block特性
这个时候我们就需要使用inline-block了:
因为inline-block既具有block的宽高特性又具有inline的同行元素特性。

行内元素特点

1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

块级元素特点

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。

元素分类(关于这点我还有些问题,暂且放上来,慢慢修改,非常欢迎纠正)

HTML中的标签元素大体被分为三种不同类型:块状元素,内联元素和内联块状元素

常见的块状元素有:

,

,

...

,
    ,