css display属性
The display
property of an object determines how it is rendered by the browser.
对象的display
属性确定浏览器如何呈现它。
It’s a very important property, and probably the one with the highest number of values you can use.
这是一个非常重要的属性,并且可能是您可以使用的值数量最多的属性。
Those values include:
这些值包括:
block
block
inline
inline
none
none
contents
contents
flow
flow
flow-root
flow-root
table
(and all thetable-*
ones)table
(以及所有table
table-*
的表)flex
flex
grid
grid
list-item
list-item
inline-block
inline-block
inline-table
inline-table
inline-flex
inline-flex
inline-grid
inline-grid
inline-list-item
inline-list-item
plus others you will not likely use, like ruby
.
加上其他您不太可能使用的东西,例如ruby
。
Choosing any of those will considerably alter the behavior of the browser with the element and its children.
选择这些选项中的任何一个都将大大改变带有元素及其子元素的浏览器的行为。
In this post I’ll analyze the most important ones not covered elsewhere:
在这篇文章中,我将分析其他地方未涵盖的最重要的内容:
block
block
inline
inline
inline-block
inline-block
none
none
I cover others in separate posts:
我在其他帖子中介绍了其他人:
table
in the Tables guidetable
中的表导flex
in the Flexbox guideFlexbox指南中的
flex
grid
in the CSS Grid guidegrid
中CSS格尺
inline
(inline
)
Inline is the default display value for every element in CSS.
内联是CSS中每个元素的默认显示值。
All the HTML tags are displayed inline out of the box except some elements like div
, p
and section
, which are set as block
by the user agent (the browser).
除某些元素(例如div
, p
和section
)被用户代理(浏览器)设置为block
外,所有HTML标记均以开箱即用的方式内联显示。
Inline elements don’t have any margin or padding applied.
内联元素未应用任何边距或填充。
Same for height and width.
高度和宽度相同。
You can add them, but the appearance in the page won’t change - they are calculated and applied automatically by the browser.
您可以添加它们,但是页面中的外观不会改变-它们是由浏览器自动计算和应用的。
inline-block
(inline-block
)
Similar to inline
, but with inline-block
width
and height
are applied as you specified.
与inline
相似,但使用inline-block
时,将按您指定的width
和height
进行应用。
block
(block
)
As mentioned, normally elements are displayed inline, with the exception of some elements, including
如前所述,除了某些元素(包括
div
div
p
p
section
section
ul
ul
which are set as block
by the browser.
由浏览器设置为block
。
With display: block
, elements are stacked one after each other, vertically, and every element takes up 100% of the page.
使用display: block
,元素彼此垂直垂直堆叠,每个元素占据页面的100%。
The values assigned to the width
and height
properties are respected, if you set them, along with margin
and padding
.
如果进行设置,则会遵守分配给width
和height
属性的值以及margin
和padding
。
none
(none
)
Using display: none
makes an element disappear. It’s still there in the HTML, but just not visible in the browser.
使用display: none
使元素消失。 它仍然存在于HTML中,但在浏览器中不可见。
css display属性