Der Unterschied zwischen häufig verwirrenden Attributen und Werten in CSS (1)-HTML-Tutorial-php.cn

CSS hat viele Attribute und jedes Attribut hat viele Werte. Es gibt Tausende von Kombinationen. Durch die Kombination verschiedener Attribute können auch unterschiedliche Stile entstehen. CSS ist wirklich eine schöne Designsprache. Das Folgende ist eine Zusammenfassung der Eigenschaften und Werte, die in der Arbeit häufig verwechselt werden:

1. Der Unterschied zwischen Zeilenhöhe mit und ohne Einheit:

Wir wissen, dass die Zeilenhöhe vererbt werden kann. Wenn der Zeilenhöhenwert des übergeordneten Elements keine Einheit hat, verwendet das untergeordnete Element seine eigene Schriftgröße und berechnet die Zeilenhöhe (die Zeilenhöhe des untergeordneten Elements = der Wert der Zeilenhöhe im übergeordneten Element * die Schriftgröße des untergeordneten Elements). Wenn der Zeilenhöhenwert des übergeordneten Elements eine Einheit hat, berechnet das übergeordnete Element zunächst die Zeilenhöhe basierend auf seiner eigenen Schriftgröße (keine Berechnung erforderlich, wenn die absolute Einheit px ist), und das untergeordnete Element erbt sie (die Zeilenhöhe). des untergeordneten Elements = die Zeilenhöhe des übergeordneten Elements).

(1). Wenn der Zeilenhöhenwert des übergeordneten Elements Einheiten hat:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>当哈罗德站在斑马线前按下行人按钮时——如果一直是她(莫琳，哈罗德的妻子)在做哈罗德该做的事，那么——“我是谁？”他就这样走过了邮局，连停都没有停下。原本很短的一段路由于内心的呼唤便再也无法停住脚步。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>一路上我记起了很多东西，很多我都没有意识到自己忘了的回忆，有戴维的，还有你和我的。我还记起了我的母亲，有些回忆很不容易，但大部分都很美。我很害怕，我怕有一天，或许很快，我就会把他们弄丢，这一次永远都找不回来了。”哈罗德泪流满面.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #efefef</span>; }<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.5em</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 22px</span>; }

Nach dem Login kopieren

Wie oben: Wenn die Schriftgröße des übergeordneten Elements 12 Pixel, die Zeilenhöhe 1,5 em und die Schriftgröße des untergeordneten Elements 22 Pixel beträgt, ist der Anzeigeeffekt wie folgt:

Im obigen Beispiel beträgt die Zeilenhöhe von p 18 Pixel, da es die Zeilenhöhe des übergeordneten Elements div, 1,5em = 12 * 1,5 = 18 Pixel, erbt und seine eigene Schriftgröße 22 Pixel beträgt ist Quetscheffekt. Darüber hinaus hat die vom Text eingenommene Höhe keinen direkten Zusammenhang mit der Schriftgröße, aber die vom Text eingenommene Breite entspricht dem Wert der Schriftgröße.

(2). Wenn der Zeilenhöhenwert des übergeordneten Elements keine Einheit hat:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你以为走路是世界上最简单的事呢？只不过是把一只脚放到另一只脚前面。但我一直很惊讶这些原本是很本能的事情实际上做起来有多困难。而吃，吃也是一样的。说话也是。还有爱。这些东西都可以很难。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我们大家都以为哈罗德徒步是因为很多年前他与奎妮有一段罗曼史。但那不是事实。哈罗德走这条路，是因为奎妮救了他，而他从来没有说过一句谢谢。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #efefef</span>; }<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.5</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 22px</span>; }

Nach dem Login kopieren

Wie oben: Wenn die Schriftgröße des übergeordneten Elements 12 Pixel beträgt, die Zeilenhöhe 1,5 beträgt und die Schriftgröße des untergeordneten Elements 22 Pixel beträgt, ist der Anzeigeeffekt wie folgt:

Im obigen Beispiel beträgt die Zeilenhöhe von p 33 Pixel, da es die Zeilenhöhe des übergeordneten Elements div von 1,5 erbt und seine eigene Schriftgröße 22 Pixel beträgt, sodass sein eigener Zeilenhöhenwert 22 * beträgt 1,5 = 33px, der gequetschte Effekt im ersten Fall tritt nicht auf.

2. Der Wert der Anzeige (Anzeigemodus) ist die Nutzungsumgebung und der Unterschied zwischen Inline-Block, Tabelle und Flex:

(1) Anzeige: Inline-Block;

Wenn ein Element in display: block; angezeigt wird, ist der Effekt, wenn die Breite nicht definiert wird, derselbe wie die Definition der Breite als: width: 100 % oder width: auto;, da es sich um ein Element auf Blockebene handelt erbt das übergeordnete Element. Der Breitenwert ist als 100 % definiert (d. h. die gleiche Breite wie das übergeordnete Element). In tatsächlichen Projekten muss die Breite jedoch manchmal nicht 100 % betragen, sondern wir möchten auch die Breite, Höhe (oder Polsterung) und andere Attribute des Elements festlegen. Zu diesem Zeitpunkt müssen Sie display: inline-block;

verwenden

dom ist wie folgt:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>成都王府井百货<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>成都王府井购物中心是北京王府井百货(集团)斥资4.5亿元打造的第一个购物中心项目。购物中心集购物、餐饮、娱乐、服务、文化、教育等多项功能于一身，建筑面积约10万平方米，共计5层营业。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="查看详情"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="look-details"</span><span style="color: #0000ff;">></span>查看详情<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #800000;">.text > div </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 1.2rem</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.text a.look-details </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> .5rem 1rem</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> .8rem</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e04728</span>;
}

Nach dem Login kopieren

Wenn der Link „Ansichtsdetails“ oben als „display: inline-block;“ definiert ist, können Sie die gewünschte Höhe und Breite erreichen, indem Sie den Abstand festlegen, ohne die Breite und Höhe festzulegen. Der Anzeigeeffekt ist wie folgt:

Und das Festlegen von text-align: center; auf dem übergeordneten Element kann eine horizontale Zentrierung erreichen.

Stellen Sie das Element auf display: inline-block; ein, was die Auswirkungen von display: block; und display: inline; hat. Sie können seine Höhe festlegen, es zentrieren und vermeiden, dass die Breite 100 % beträgt.

Erweiterung:

Übergeordnetes Element text-align: center; untergeordnetes Element display: inline-block; wird normalerweise für Paginierungseffekte wie Nachrichtenlistenseiten verwendet.

<span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当前页面时，给 li 添加 active 类 </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> aria-label</span><span style="color: #0000ff;">="Previous"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&laquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> aria-label</span><span style="color: #0000ff;">="Next"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&raquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #800000;">.pagination </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.pagination:before,
.pagination:after </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>;
}<span style="color: #800000;">
.pagination:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }<span style="color: #800000;">
.pagination </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.pagination > li </span>{<span style="color: #ff0000;">            
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;
}<span style="color: #800000;">
.pagination > li > a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -1px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">消除两个 a 在一起时引起的双倍左外边距</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #337ab7</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;
}<span style="color: #800000;">
.pagination > li:first-child > a </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">第一个 a 不需要消除左外边距</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    border-top-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    border-bottom-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.pagination > li:last-child > a </span>{<span style="color: #ff0000;">
    border-top-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    border-bottom-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.pagination > li > a:hover,
.pagination > li > a:focus </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #23527c</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #eee</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ddd</span>;
}<span style="color: #800000;">
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">当前这一页，让鼠标悬浮在 a 元素上时，显示为默认光标样式，给人感觉不能点击的效果</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #337ab7</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #337ab7</span>;
}

Nach dem Login kopieren

(2). Anzeige: Tabelle;

In der Erweiterung des ersten Falles wurde display:table; verwendet, um dieses Element als Tabelle auf Blockebene anzuzeigen (ähnlich wie

), mit Zeilenumbrüchen davor und danach der Tisch.

Wird häufig beim Löschen von Floating-Anforderungen verwendet. Der Grund, warum ein Element seinen Float löschen muss, liegt darin, dass es keine definierte Höhe hat, seine untergeordneten Elemente jedoch Floats haben.

Als Erweiterung des obigen Beispiels definiert ul.pagenation keine Höhe und das untergeordnete Element hat Floats, daher muss es die Floats löschen. Der Weg zum Löschen von Floats ist wie folgt:

<span style="color: #800000;">.parent-box:before,
.parent-box:after </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>; /*伪元素 before 和 after 的样式里必须添加 content 属性才会起作用*/
}<span style="color: #800000;">
.parent-box:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }

Nach dem Login kopieren

这种清除浮动的方式， ie8 不支持。如果需要支持 ie6 - ie8，需要使用下面这种复杂一些的样式(这样的写法暂时不理解)：

<span style="color: #800000;">.clearfix::after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ” ”</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.clearfix </span>{<span style="color: #ff0000;"> zoom</span>:<span style="color: #0000ff;"> 1</span>; }

Nach dem Login kopieren

(3). display: flex;

2009年，W3C 提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

菜鸟教程http://www.runoob.com/w3cnote/flex-grammar.html 中说得非常详细。

内容很多，但是我们平时一般会用到的就三个属性，display: flex; align-items: center; justify-content: center; 这三个属性都是用在父元素中，display: flex; 定义子元素的布局方式为弹性伸缩布局，align-items: center; 使子元素垂直居中，justify-content: center; 使子元素水平居中。

Verwandte Etiketten：

css常见的易混淆属性和值的区别(一)

Quelle：php.cn

Vorheriger Artikel：HTML5-Studiennotizen: Leinwand Nächster Artikel：CSS implementiert eine feste Breite auf der linken (rechten) Seite und eine adaptive Breite auf der rechten (linken) Seite --- Clear Floating

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors