CSS display 常用属性小结

"文档流"或"流式布局"

"文档流"或"流式布局"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。

在文档流中，内联元素按内联方向显示，即词语在依据文件写作模式的句子中表示的方向。块元素则一个接一个地显示，就像该文档的写作模式中的段落一样。因此在英语中，内联元素从左边开始一个接一个地显示，块元素从顶部开始向下显示并移动页面。

`display` 属性

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

语法：

举个例子：

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: table;}
</style>
</head>
<body>
<h1>The display Property</h1><h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div><h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div><h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div><h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div><h2>display: table:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex5">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div></body>
</html>

效果展示如下：

解释：

Value	Description	Play it
inline	Displays an element as an inline element (like <span>). Any height and width properties will have no effect	Play it »
block	Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width	Play it »
contents	Makes the container disappear, making the child elements children of the element the next level up in the DOM	Play it »
flex	Displays an element as a block-level flex container	Play it »
grid	Displays an element as a block-level grid container	Play it »
inline-block	Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values	Play it »
inline-flex	Displays an element as an inline-level flex container	Play it »
inline-grid	Displays an element as an inline-level grid container	Play it »
inline-table	The element is displayed as an inline-level table	Play it »
list-item	Let the element behave like a <li> element	Play it »
run-in	Displays an element as either block or inline, depending on context	Play it »
table	Let the element behave like a <table> element	Play it »
table-caption	Let the element behave like a <caption> element	Play it »
table-column-group	Let the element behave like a <colgroup> element	Play it »
table-header-group	Let the element behave like a <thead> element	Play it »
table-footer-group	Let the element behave like a <tfoot> element	Play it »
table-row-group	Let the element behave like a <tbody> element	Play it »
table-cell	Let the element behave like a <td> element	Play it »
table-column	Let the element behave like a <col> element	Play it »
table-row	Let the element behave like a <tr> element	Play it »
none	The element is completely removed	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

CSS display 常用属性小结相关推荐

【CSS】display常用属性
1 display常用属性值描述 block 设置元素为块级元素 inline 设置元素为行内元素 inline-block 行内块元素 none 在不删除元素的情况下隐藏或显示元素(不占空间) ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
html block属性,css display block属性的意思、作用和效果
css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...
三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block
文章目录三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block Block Inline Inline-block Block,Inline,Inline-B ...
CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
html消除绝对定位的影响,css定位常用属性 CSS清除定位position
css中定位position有哪几个属性值? absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位: 元素的位置通过 "left", &quo ...
尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
CSS HTML 常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
html样式 css一些常用属性与style内部样式表
html样式 style="color:red ;" style属性的书写称为行内样式也叫内联样式只负责当前标签的外观 <span style="color:r ...
从零开始html css,HTML/CSS从零开始-常用属性(三)
一.css文本属性 (1)文本大小{font-size:value;} 单位:pt:9pt=12px;浏览器默认字体大小为16px em:1em=16px; 在CSS2.0中 xx-small:9px ...

CSS display 常用属性小结

"文档流"或"流式布局"

`display` 属性

语法：

举个例子：

解释：

CSS display 常用属性小结相关推荐

最新文章

热门文章

CSS display 常用属性小结

"文档流"或"流式布局"

display 属性

语法：

举个例子：

解释：

CSS display 常用属性小结相关推荐

最新文章

热门文章

`display` 属性