display:none
表示此元素将不被显示
display:block
此元素将会被显示成块级元素,此元素前后会带有换行符。
块级元素:
- 常见的块级元素有
<div><p><h1><li>
display:inline
作用即可以将一个块级元素转换成行内元素,那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。
行内元素:
- 不会单独占据一行,而是占领自身宽度和高度本身,高度一般由其字体决定。
- 若干同级行内元素会从左往右,从上到下依次排列。
- 只能设置margin和padding值的左右,而设置不了上下。
- 常见的行内元素:
<a><em><img>
- 默认的display属性值默认为inline
display:inline-block
设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性,又保持了inline元素不换行的特性。
display:flex
2009年,W3C提出了一种新的方案--Flex布局,可以简便、完整、响应式地实现各种页面布局。详情