CSS中，display的作用是啥？

Posted 2023-04-08

如题！

display:block是这里的重点，它使得a链接对象的显示方式由一段文本改为一个块状对象，和div的特性相同，div默认状态下是一个块状对象，a链接对象默认状态下是一个普通文本——内联对象，这样就没有办法使得a链接对象能够像一个方块状按钮一样去运作，使用display:block之后，a链接对象将能够像div和其它元素一样成为一个块状对象（block），就可以使用css外边距、内边距等属性给a链接标签加上一系列的样式了。

　　通过display:block的应用，我们让a标签元素有了宽度width:97px，高度height:22px，并在每一个a之间使用margin-left:2px;形式了左侧的外边距为2px。

　　display属性是css中对对象显示模式操作的一个属性，主要用于改变对象的显示方式。在css中，所有对象都有自己默认的显示方式，如a与span等对象，它们默认为一种行间内联对象，显示时它们不会影响其它任何对象的显示，如当应用span之后，span之后的内容会自动排在span的右边，像一段文本一样，而div这类对象的默认显示为块状对象，它们默认状态下便占据了一行的空间，并像一个方块一样显示在页面中，通过display:block，将a也变成了块状对象。 参考技术A display:block可以理解为块，举个简单的例子！比如你做一个超链接，
<li><a href="#">超链接</a></li>
当你鼠标移过到文字的时候，超链接有效果！
而当我把样式这样设置：
li awidth:100px;height:100px; display:block; color:red; text-decoration:none;
鼠标移到文字周围100*100的地方，就有超链接效果了，就是把100*100做为一块来的超链接！
还有，display : none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行
compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象
marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器
list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象
table : 　CSS2　将对象作为块元素级的表格显示
table-caption : 　CSS2　将对象作为表格标题显示
table-cell : 　CSS2　将对象作为表格单元格显示
table-column : 　CSS2　将对象作为表格列显示
table-column-group : 　CSS2　将对象作为表格列组显示
table-header-group : 　CSS2　将对象作为表格标题组显示
table-footer-group : 　CSS2　将对象作为表格脚注组显示
table-row : 　CSS2　将对象作为表格行显示
table-row-group : 　CSS2　将对象作为表格行组显示 参考技术B 设置元素的显示方式
display:none 不显示
block 块元素，单独一行显示，可以有宽、高
inline 行级元素，在同一行显示，宽高设置无效
inline-block 在同一行显示，宽高有效

:: 和 ~ 在 css 中的作用是啥？

【中文标题】:: 和 ~ 在 css 中的作用是啥？

【英文标题】：What does :: and ~ do in css?:: 和 ~ 在 css 中的作用是什么？

【发布时间】：2012-05-03 07:16:27

【问题描述】：

我在 twitter 上查看一个人制作的代码，它是这样的：

div::after 
-webkit-transform: rotate(2deg);


div ~ div 
-webkit-transform: rotate(0deg);

这是什么？

【问题讨论】：

给你：w3.org/TR/selectors :: 是一个伪元素，而div ~ div 是一个 div 在一个 div 之后。

相关：***.com/questions/10782054/… 和 ***.com/questions/16704049/…

【参考方案1】：

双冒号替换了单冒号选择器 CSS3 中的伪元素来明确区分 伪类和伪元素。为了向后兼容， 单冒号语法对于 CSS3 之前的选择器是可以接受的。所以，:之后 是一个伪类， ::after 是一个伪元素。

---

通用兄弟选择器在 CSS3 中可用，组合器 此选择器中使用的是波浪号 (~)。

选择器匹配给定元素的兄弟元素。 这个例子将匹配一个 p 元素，如果它是 h2 的兄弟元素 元素：

http://reference.sitepoint.com/css/generalsiblingselector

http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

【讨论】：

Evotech 搞错了。带有单个冒号的:after 不是伪类，它一直是伪元素，即使您可以使用伪类语法。

是的 ::after 和 :after 是同一个东西，都是伪元素，正如规范在这里所说的 w3.org/TR/selectors/#pseudo-elements

【参考方案2】：

波浪号 (~) 是兄弟选择器

h2 ~ p  color:red; 

例如会使下面代码中的段落变为红色

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above matches this paragraph.</p>

:: 用于::before 和::after 伪元素，它们与content: 一起允许您在每个链接之前放置例如图标

a::before  content:url(link.png); 

【讨论】：

~ 不完全匹配兄弟姐妹 - 仅以第一类型元素开头的兄弟姐妹。在您的示例中，<h2> 之前的 <p> 不匹配。

【参考方案3】：

:: 在 CSS3 中用于 pseudo elements。

~ 是 CSS3 中的general sibling combinator，用于选择跟在同级另一个元素之后的元素。