我们常用的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中的标签元素大体被分为三种不同类型:块状元素,内联元素和内联块状元素
常见的块状元素有:
,,
...,,,,,
,,