display
属性的取值非常多,不过,通常我们会使用none
、inline
、block
、inline-block
、table
、flex
这几个。
隐藏该元素。
HTML元素可以分为两类:
默认的块级元素有div
、img
、p
等。
块级元素所在的行内不能有其他元素!
块级元素被设置了display : block
内联元素有a
、span
等。
内联元素可以显示在同一行,但是你不能对他设置宽度和高度,即使设置了宽度和高度也是无效的!因为它的宽度和高度是它里面的内容决定的。
内联元素被设置了display : inline
如果想把块级元素改成内联元素,只要修改display
属性的值为inline
即可!
如果想把内联元素改成块级元素,只要修改display
属性的值为block
即可!
通俗的说:如果既想让一个元素与其他元素显示在一行,并且还想要设置他的宽度和高度,那么就修改display
属性的值为inline-block
!
这个值最常见的作用是做水平居中,示例:
.center-horizontal-in-parent {
display: table;
width: auto;
margin-left: auto;
margin-right: auto
}
这是CSS3
草案中新增的。被称为弹性盒子。