Grundlegende Verwendung CSS-Box-Modell -05-

Box-Modell (CSS Fokus)

Erfahren Sie drei Schlüssel CSS: CSS-Box-Modell, float, Standort

Theme Ideen:

1. Die Art des Layouts der Seite

• Erstens, stellen Sie die CSS-Box-Größe und die Platzierung der Box.
• Schließlich wird die Seitenelemente wie Text und Grafiken, und so weiter, in der Box.

2. Box-Modell (Box-Modell)

• Das so genannte Box-Modell:

  • Es ist zu Layout-Elemente in HTML-Seiten als rechteckiger Kasten betrachtet, die geladen wird der Inhalt eines Behälters ist.
  • Box-Modell hat Inhaltselemente, Grenzen (Grenze), Polsterung (padding) und Rändern (Rand) -Komponenten.
  • Box innerhalb der Texte und Bilder und andere Elemente des Inhaltsbereich
  • Box Grenze
  • Von dem Kasten und der Rahmeninhalt ist eine Polsterung (ähnlich Zelle Cellpadding)
  • Der Abstand zwischen der Box und der Box sind Ränder (ähnlich Zelle Cellspacing)

Standard-Box-Modell

3. Kastenrahmen (Grenze)

• Syntax:

border : border-width || border-style || border-color 

Immobilien	Wirkung
Rahmenbreite	Definierte Grenzdicke ist die Einheit px
border-style	Border-Stil
Randfarbe	Randfarbe

• Border-style:
  • none: keine Randbreite dass ignoriert wird (Standard) Alle Grenzen
  • Feststoff: durchgezogene Linie ist, einen einzigen Rahmen (am häufigsten)
  • gestrichelte: ist die Grenze gestrichelte
  • gepunktete: die Grenze als punktierte Linie

3.1 Integrierte Grenzeinstellungen

border : border-width || border-style || border-color 

Zum Beispiel:

 border: 1px solid red;  没有顺序  

Tabelle 3.2 fasst die Formulierung des Kastenrahmens

In vielen Fällen brauchen wir nicht vier Grenzen zu spezifizieren, wir jeweils eine separate vier bezeichneten Grenze geben können.

An der Grenze	untere Grenze	linke Grenze	rechten Rand
border-top-style: Stil;	border-bottom-style: Stil;	border-left-style: Stil;	border-right-style: Stil;
border-top-Breite: Breite;	Rand- Bodenbreite: 宽度;	border-left-Breite: 宽度;	border-rechts-Breite: Breite;
border-top-color: Farbe;	Rand- bottom-Farbe: Farbe;	border-left-color: Farbe;	border-right-color: Farbe;
border-top: Breite Artfarbe;	border-bottom: Breite Artfarbe;	border-left: Breite Stil Farbe;	border-right: Breite Artfarbe;

3.3 Form der dünnen Grenzlinie,

• Durch die Tabelle cellspacing="0"wird der Abstand zwischen der Zelle und der Zelle auf 0,

• Jedoch kann die Grenze zwischen zwei Zellen überlappen, so daß der dickere Rand

• Mit dem CSS-Eigenschaft:

  table{ border-collapse:collapse; }  
  

  • Zusammenbruch Wort ist die Bedeutung des Zusammenschlusses
  • border-collapse: collapse; zeigen kombiniert benachbarte Schleife.

• Zum Beispiel:

<style>
	table {
		width: 500px;
		height: 300px;
		border: 1px solid red;
	}
	td {
		border: 1px solid red;
		text-align: center;
	}
	table, td {
		border-collapse: collapse;  /*合并相邻边框*/
	}
</style>

4. Polsterung (padding)

4.1 Margen:

Polstereigenschaften eingestellt sind Pannen verwendet. Er bezieht sich auf den Abstand zwischen der Grenze und dem Inhalt.

Set 4.2

Immobilien	Wirkung
padding-links	linke Polsterung
padding-right	Im rechten Rand
padding-top	Innerhalb der Marge
padding-bottom	Die unteren Ränder

Wenn der Abstandswert an die angegebene Box, passieren zwei Dinge:

1. Inhalt und Grenzen mit Abstand aufgenommen Polsterung.
2. Box wird groß.

Die Anzahl der Werte	Ausdruck Bedeutung
Ein Wert	padding: der linke und unterer Rand;
2 Werte	padding: die oberen und unteren Ränder linken und rechten Rand;
3 Werte	padding: die Polsterung auf der unteren linken und rechten Rand Polsterung;
4 Wert	padding: die Polsterung auf der linken und rechten Ränder des inneren Polsterung Polsterung;

4.3 Polsterung Gehäuse: Navigationsleiste

In der Navigationsleiste, weil es nicht so viel von Worten, es ist nicht bequem, direkt die Breite festgelegt, dann einen Füllwerts, die Box automatisch Ablenkung.

4.4 Berechnung Kastengröße (tatsächliche Größe Elemente)

• Höhe

  Element Höhe = Höhe Gehalt + + padding Rand (Höhe ist die Höhe des Inhalts)

• Breite

  Element Width = Gehalt Breite + + padding Rand (Breite Breite Inhalt)

• Breite und Höhe der tatsächlichen Größe des Kastens content = + + Rahmenpolsterung

Probleme mit der Polsterung 4.5

• Problem

  

  Es wird die Originalverpackung strecken

• Lösung:

  Durch Einstellen der Breite und Höhe eines Kastens, einen Wert entsprechend dem Polster Subtrahieren , behalten die ursprüngliche Größe des Kastens

  

4.6 Polsterung wirkt sich nicht auf die Größe der Box Fall

Wenn keine spezifizierte Breite einer Box, Fall, wenn die Polsterung an die angegebenen Box, wird das Feld nicht aufgeweicht werden.

Die Ränder (Marge)

5.1 Margin

Marge Eigenschaft auf Set Margen verwendet. Marge zu steuern ist, den Abstand zwischen dem Kasten und dem Kasten

5.2 Rahmen:

Immobilien	Wirkung
margin-left	Linker Rand
margin-right	rechte Ränder
margin-top	auf Margin
margin-bottom	Unterer Rand

Stenografie Randwert (Composite-Schrift) repräsentiert genau die gleiche Bedeutung mit Polsterung.

5,3-Level-Box horizontal zentriert

• Kann ein Block-Level-Box machen horizontal zentriert erreichen müssen:

  • Box muss die Breite angeben (Breite)
  • Dann gibt die außen um das Feld auf Auto gesetzt ,

• Zum Beispiel:

  .header{ width:960px; margin:0 auto;}
  

Gemeinsame Formulierung kann die folgenden drei sein.

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

5.4 zentriert Textfeld ein und zentriert Unterschied

1. Textbox wird horizontal im Text-align zentriert: Zentrum, sondern ermöglicht auch die Elementreihe und das Reihenblock zentriert

2. Block-Level-Feld horizontal nach links und rechten Rand Auto zentriert

   text-align: center; /*  文字 行内元素 行内块元素水平居中 */
   margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */
   

5.5 Einfügen von Bildern und Hintergrundbild Unterschied

1. Bild einfügen verwenden wir die meisten, wie Position Produktklasse nur durch das Box-Modell padding-Marge bewegt
2. Unsere Hintergrundbilder werden für große oder kleine Symbole Hintergrund Hintergrundbild Hintergrundbild Position im Allgemeinen nur verwendet, kann durch Hintergrund-Position eingestellt werden

 img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 用 background-position */
	}

Der Standard klar Elemente innerhalb und außerhalb des 5,6-Marge

Für flexiblere Kontrolle über Seitenelemente, während Web-Seiten zu machen, müssen wir die Standardränder und äußeren Elemente entfernen

Code:

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

Hinweis:

• Inline-Elemente für die Kompatibilität, oder versuchen Sie nur über innere und äußere Ränder einzurichten, nicht die obere gesetzt und den unteren inneren und äußeren Ränder.

5.7 Margin Fusion

Verwendung Rand Definitionsblock Element senkrecht äußeren Rand , Zusammenführen der Ränder auftreten.

(1). Die kombinierten vertikal benachbarten Blockelemente Ränder

• Wenn zwei vertikal benachbarte Blockelemente treffen, wenn das obige Element untere Ränder Rand-Boden
• Die folgenden Elemente haben einen margin-top Ränder, der Rand-Boden als der vertikale Abstand der margin-top dazwischen und
• Aber es nimmt den größeren der beiden Werte , ein Phänomen , bekannt als vertikale Integration Blockelemente benachbarter Ränder (auch collapse Pannen bezeichnet).

Lösung: Versuchen Sie nur eine Box zu geben Randwert hinzuzufügen .

(2) verschachtelte Blockelemente kombinierten vertikale Ränder (collapse)

• Für die nested-Beziehung von zwei Blockelementen, wenn nicht das Mutterelement und Rahmenpolsterung
• Aus den Unterelemente werden auf der Außenseite des Elternelements auf der Außenseite sein aus der Fusion aufgetreten
• Die kombinierte Abstand außerhalb des größeren der beiden

Lösung:

1. Das Mutterelement kann die Grenze definieren.
2. Es kann auf dem Mutterelement definiert werden padding
3. Das übergeordnete Element hinzufügen overflow: hidden.

Es gibt andere Möglichkeiten, wie schwebend, fest, die absolute Positionierung der Box wird kein Problem haben,

6. Die Box-Modell Layout Stabilität

• Box-Modell, Polsterung und fertige Lernen von außen, mit Polsterung unter welchen Umständen, mit Margen unter welchen Umständen?

  • In den meisten Fällen kann es gemischt werden in. Das heißt, können Sie auch padding verwenden, die Margen auch verwendet werden können. Glauben Sie, ist einfach zu bedienen, welche.

Stabilität nach den Punkten, die folgenden Empfehlungen:

Vorzugsweise entsprechend der Breite (Breite) verwendet zweitens Polsterung (padding) wieder Rändern (Rand).

  width >  padding  >   margin   

• Grund:
  • Margin Marge würde es IE6 Marge unterhalb der doppelten Fehler so in der Endanwendung verschmelzen.
  • Polsterung wird die Größe der Box beeinflussen, muss es durch die Verwendung von Addition und Subtraktion folgen.
  • Probleme oft nicht Breite Höhe Breite der verbleibenden Rest Methode Methode verwenden.

Expand @

Im Folgenden sind einige der neuen CSS3-Eigenschaften, die folgenden, werden wir nicht das Seitenlayout beeinflussen, aber es sah besser Stil.

1. Die abgerundeten Ecken (CSS3)

• Syntax:

  border-radius:length;  
  

• Wobei jeder Wert kann ein Wert oder ein Prozentsatz sein.

• Jede Sequenz von vier Werten des Radius ist: die oben links, oben rechts, unten rechts, unten links.

• Beispiel 1: Lassen Sie wird das Quadrat einen Kreis

  border-radius: 50%;
  

• Beispiel 2:
  

• Fig abgerundet obigen Effekte Rechteck, nicht den Prozentsatz nicht verwenden, als Prozentsatz ausgedrückt wäre die Hälfte der Höhe und Breite.
• Und hier werden wir nur die Hälfte des Rechtecks ​​verwenden hoch genug. Präzise Einheiten.

2. Box Schatten (CSS3)

• Syntax:

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

• Die ersten beiden Eigenschaften sind geschrieben werden. Der Rest kann weggelassen werden.
• Äußere Schatten (Anfang) ist die Standardeinstellung, nicht schreiben, Sie im Schatten Schreibeinsatz sein wollen

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}