Häufig gestellte Fragen zum Einstieg in CSS

Zuvor geschrieben: In diesem Artikel werden die drei Hauptmerkmale von CSS kurz vorgestellt: Kaskadierung, Vererbung und Priorität. Sowie Rand, Auffüllen, Gleiten und Positionieren mehrerer Wissenspunkte. Es ist auf die Ebene beschränkt und wird nicht ausführlich besprochen. Es dient nur als Lernzusammenfassung.

1. Drei Merkmale

1) Kaskadierung: Wenn die Stile mit demselben Tag und derselben Gewichtung in Konflikt stehen, überschreiben die späteren Stile die vorherigen.

2) Vererbung: Beim Festlegen von Stilen für übergeordnete Elemente werden untergeordnete Elemente vom Stil des übergeordneten Elements beeinflusst, wenn standardmäßig keinen Stil hat . Beachten Sie, dass Breite und Höhe nicht vererbt werden können.

Vererbbare Attribute:
◇Textfarbe kann vererbt werden Farbe
◇Textbezogene Attribute können vererbt werden
◆Zeilenhöhe (Linienhöhe ) kann vererbt werden
◆text-align

Besondere Umstände:

ein-Tag wird standardmäßig nicht von der Farbe des übergeordneten Elements beeinflusst

Es kommt häufig vor, dass das Festlegen der Farbe eines Tags für li beim Erstellen von Navigation nicht funktioniert, da es vom Standardstil des Browsers beeinflusst wird Farbe: -webkit-link .

h1-h6 Die Standardeinheit ist em. Die spezifische Größe erfordert Produktbedienung

3) Priorität:

Tag-Auswahl<KlassenauswahlAuswahl< Inline-Stile

2, Randmerkmale:

1) Vertikale Ränder zusammenführen (nehmen Sie den größeren)

2) Zusammenbruch des vertikalen Randes?

Lösung:

Legen Sie einen Rahmen für das übergeordnete Element fest.
set overflow:hidden auf das übergeordnete Element (Trigger bfc)

3, Besonderheit des Füllwerts

Wenn bei Elementen auf Blockebene für das Standard-Unterelement keine Breite festgelegt ist, hat das Festlegen des Füllwerts für das aktuelle Unterelement keinen Einfluss auf die Breite des aktuellen Unterfelds. (Der „geerbte“ Box-Auffüllwert wird nicht beeinflusst)

4, schweben

Warum Float verwenden?

Es begann als Design für einen Bildtext-Umhüllungseffekt und wird heute hauptsächlich in der Layout- und Navigationsproduktion verwendet

Wann müssen Schwimmer gereinigt werden?
1. Für den übergeordneten Container ist keine Höhe festgelegt
2. Alle untergeordneten Elemente des übergeordneten Containers sind auf Float eingestellt

Wie reinige ich Schwimmer? (Hier sind die 4 häufigsten)
1. klar: beides
2. Überlauf festlegen: versteckt für das übergeordnete Element (das übergeordnete Element ist nicht positioniert)
3. Pseudoelemente verwenden

.clearfix 
:after{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
  zoom: 1;
  /*兼容ie6*/
}

4,Anzeige: Tabelle;

.clearfix:before,
.clearfix:after{
clear: both;
display: table;
/*表格模式*/
}
.clearfix{
  zoom: 1;
  /*兼容ie6*/
}

　　

定位：

1，静态（static）标准流下的显示方式，可转换成其他定位方式
2，绝对 （absolute） ：
1）标准流下的盒子，设置绝对定位以body 为参照
2）除了父盒子设置static ，其他定位方式，子盒子以父盒子为参照
3）绝对定位的元素脱标
4）实现模式转换的效果
使用场景：1，盒子压盒子 2，绝对定位可以使用margin padding
3，相对（relative）：相对自己作为参照，不会脱标
使用子绝父相
4，固定（fixed）：
1）以body标签可视区域作为参照
2）脱标
3）实现模式转换的效果
层级：
1）定位的元素有层级关系
2）只有给定位的元素才能设z-index
特点：
1）元素设置定位后有个默认的z-index ：auto（除去static）
2）z-index 值相同 元素后来居上
3）z-index 值越大 当前的元素层级越高
4）父元素的z-index值越大 当前的元素层级越高简单

绝对定位如何居中？

◆通过设置left:50% ; 父元素宽度的一半
◆设置margin-left: -元素自己宽度一半；

双飞翼布局

目的：加载文档时先加载中间区域，再加载左右两边

特点：两侧固定，中间自适应

	<div class="container">
		<div class="columns mainbox">
			<div class="inner">
				我看见个会计课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个会计课件发卡
				机看见看见我看见个会计 课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个
				会计课件发卡机看见看见我看见个会计课件发卡机看见看见
			</div>

		</div>
		<div class="columns leftbox"></div>
		<div class="columns rightbox"></div>
	</div>

　　

<span style="color: #008080"> 1</span> <span style="color: #800000"><style>
</span><span style="color: #008080"> 2</span> <span style="color: #800000">        body </span>{
<span style="color: #008080"> 3</span> <span style="color: #ff0000">            min-width</span>:<span style="color: #0000ff"> 1000px</span>;
<span style="color: #008080"> 4</span>         }
<span style="color: #008080"> 5</span>         
<span style="color: #008080"> 6</span> <span style="color: #800000">        .columns </span>{
<span style="color: #008080"> 7</span> <span style="color: #ff0000">            height</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080"> 8</span> <span style="color: #ff0000">            float</span>:<span style="color: #0000ff"> left</span>;
<span style="color: #008080"> 9</span>         }
<span style="color: #008080">10</span>         
<span style="color: #008080">11</span> <span style="color: #800000">        .container </span>{
<span style="color: #008080">12</span> <span style="color: #ff0000">            height</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000">            border</span>:<span style="color: #0000ff"> 1px solid red</span>;
<span style="color: #008080">14</span>         }
<span style="color: #008080">15</span>         
<span style="color: #008080">16</span> <span style="color: #800000">        .mainbox </span>{
<span style="color: #008080">17</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 100%</span>;
<span style="color: #008080">18</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> yellow</span>;
<span style="color: #008080">19</span>         }
<span style="color: #008080">20</span>         
<span style="color: #008080">21</span> <span style="color: #800000">        .inner </span>{
<span style="color: #008080">22</span> <span style="color: #ff0000">            margin</span>:<span style="color: #0000ff"> 0 300px 0 250px</span>;
<span style="color: #008080">23</span> <span style="color: #ff0000">            word-break</span>:<span style="color: #0000ff"> break-all</span>;
<span style="color: #008080">24</span>         }
<span style="color: #008080">25</span>         
<span style="color: #008080">26</span> <span style="color: #800000">        .leftbox </span>{
<span style="color: #008080">27</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080">28</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> red</span>;
<span style="color: #008080">29</span> <span style="color: #ff0000">            margin-left</span>:<span style="color: #0000ff"> -100%</span>;
<span style="color: #008080">30</span>         }
<span style="color: #008080">31</span>         
<span style="color: #008080">32</span> <span style="color: #800000">        .rightbox </span>{
<span style="color: #008080">33</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 300px</span>;
<span style="color: #008080">34</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> blue</span>;
<span style="color: #008080">35</span> <span style="color: #ff0000">            margin-left</span>:<span style="color: #0000ff"> -300px</span>;
<span style="color: #008080">36</span>         }
<span style="color: #008080">37</span> <span style="color: #800000">    </style></span>