Standardisiertes Layout der DIV-CSS-Webseite (1)-HTML-Tutorial-php.cn

1. DIV-CSS-Definition und Vorteile

Was ist Div-CSS?

Div CSS ist eine derzeit beliebte Webseiten-Layout-Technologie

Div wird verwendet, um die Daten zu speichern, die angezeigt werden müssen (Text, Diagramme ...), und CSS wird verwendet, um anzugeben, wie sie angezeigt werden sollen, um gegenseitige Effekte zwischen Daten und Anzeige zu erzielen

Div-CSS-Vorteile

Websites, die das DIV-CSS-Muster verwenden, haben die folgenden Vorteile:
Trennung von Leistung und Inhalt
Prägnanter Code, verbessert die Geschwindigkeit beim Durchsuchen von Seiten
Einfach zu warten und zu überarbeiten
Verbessern Sie die Indexierungseffizienz von Webseiten durch Suchmaschinen

Wir können Div-CSS einfach so verstehen:

div ist ein Container, der zum Speichern von Inhalten (Text, Bilder, Elemente) verwendet wird.

css wird verwendet, um anzugeben, wie der im Div platzierte Inhalt angezeigt wird, einschließlich der Position und des Erscheinungsbilds des Inhalts

2. „Bedeutungslose“ HTML-Elemente div und span

HTML ist nur ein Mittel zur Bereitstellung von Inhalten. Die meisten HTML-Tags haben ihre eigene Bedeutung (z. B. erstellt das p-Tag einen Absatz, das h1-Tag einen Titel usw.), aber div und das Tag span scheinen keine inhaltliche Bedeutung zu haben und klingen so nutzlos wie ein Hammer aus Schaumstoff. Tatsächlich sind sie jedoch in Kombination mit CSS weit verbreitet. Sie müssen sich lediglich daran erinnern, dass span und div „bedeutungslose“ Tags sind. Sie dienen lediglich der Anwendung von Stilen und haben daher keine Auswirkung, wenn das Stylesheet ungültig ist
Sie werden verwendet, um einen großen Teil des HTML-Codes zu kombinieren und bestimmte Informationen zuzuordnen. Die meisten von ihnen werden mithilfe des Klassenattributs und des Identifikationsattributs id mit Elementen verknüpft. Der Unterschied zwischen span und div besteht darin, dass span inline ist und in einem kleinen Teil des Inline-HTML verwendet wird. Das div-Element (Division) befindet sich auf Blockebene (einfach ausgedrückt entspricht es einem Zeilenumbruch davor und danach) und wird verwendet, um einen großen Codeblock zu kombinieren und Struktur und Struktur für große bereitzustellen Inhaltsblöcke in HTML-Dokumenten können Absätze, Titel, Tabellen und sogar andere Teile enthalten, wodurch div einfach verschiedene integrierte Klassen erstellt werden kann.
div wird zur Bildung dieses Blocks verwendet, und die Eigenschaften der enthaltenen Elemente werden durch die Attribute des div-Tags oder durch die Verwendung eines Stylesheets zur Formatierung des Blocks gesteuert

3. Box-Modell des Seitenlayouts

(1) Verwandte Attribute des Boxmodells

Rand (Rand/Rand)
Grenze
Polsterung (Polsterung/Polsterung)

Schauen wir uns das Bild an, um die Rolle jedes Attributs zu verstehen:

Die oben genannten Attribute sind in vier Richtungen unterteilt: oben, rechts, unten und links
>Frage: Wie berechnet man die Breite und Höhe von Seitenelementen?
Antwort: Die tatsächliche Belegungsgröße des Elements = Elementgröße, Randbreite der Auffüllung Beispiel: Die tatsächliche Belegungshöhe des Elements = obere und untere Höhenattribut, obere und untere Randbreite der Auffüllung

　

(2) Die hierarchische Beziehung des Boxmodells

Wir verstehen es anhand eines klassischen 3D-Strukturdiagramms des Boxmodells, wie in der Abbildung dargestellt:

Von oben nach unten betrachtet ist die hierarchische Beziehung wie folgt:

Ebene 1: der Rand der Box, Ebene 2: Inhalt, innen Inhalt des Elements Margin (padding)
Ebene 3: Hintergrundbild (background-image)
Ebene 4: Hintergrundfarbe (background-color)
Ebene 5: Rand der Box (margin)

Aus dieser hierarchischen Beziehung ist ersichtlich, dass bei gleichzeitiger Festlegung von Hintergrundbild und Hintergrundfarbe das Hintergrundbild
über der Hintergrundfarbe
angezeigt wird

4. Deklarieren Sie die CSS-Attribute des Boxmodells

Zum Beispiel:

水平居中和垂直居中

    水平居中包含两种情况：
块级元素的水平居中：margin:0px auto;
        文字内容的水平居中：text-align: center;

    垂直居中：
        常见的单行文字的垂直居中可设置文字所在行的height与
        行高样式属性一致，比如：
        div{
            width: 400px;
            height: 400px;
            line-height: 400px;/*行高与div高度一致*/
        }

5、和页面布局有关的CSS属性

<span style="color: #008080;"> 1</span> <span style="color: #000000;">#box {                              /* 声明ID选择器，名称为box           */         
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">    position:absolute;              /* 设置层的定位为绝对定位            */ 
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">    top:30px;                       /* 层距离顶点纵向坐标的距离为30个像素  */ 
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">    left:100px;                     /* 层距离左点横向坐标的距离为100个像素 */ 
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    width:300px;                    /* 设置层的宽度为300个像素           */ 
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">    height:150px;                   /* 设置层的高度为150个像素           */ 
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">    overflow:auto;                  /* 当内容超出层的范围时显示滚动条     */ 
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">    z-index:1;                      /* 设置层的先后顺序为覆盖关系        */ 
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">    visibility:visible;            /* 无论父层是否可见，子层都可见       */ 
</span><span style="color: #008080;">10</span> }

Nach dem Login kopieren

6、盒子区块框的定位

层模型--绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

<span style="color: #008080;">1</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    border:2px red solid;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    position:absolute;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    left:100px;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    top:50px;
</span><span style="color: #008080;">8</span> <span style="color: #000000;">}
</span><span style="color: #008080;">9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

效果如下：

层模型--相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

Nach dem Login kopieren

效果图：

什么叫做“偏移前的位置保留不动”呢？

大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：

<body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>

Nach dem Login kopieren

效果图：

从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

层模型--固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

<span style="color: #008080;"> 1</span> <span style="color: #000000;">#div1{
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">    border:2px red solid;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    position:fixed;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">    left:100px;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">    top:50px;
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">}
</span><span style="color: #008080;"> 9</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: #008080;">10</span> <span style="color: #000000;">....
</span><span style="color: #008080;">11</span>

Nach dem Login kopieren

7、盒子模型的浮动布局

　　理解浮动属性首先要搞清楚，什么是文档流？
文档流：浏览器根据元素在html文档中出现的顺序，
从左向右，从上到下依次排列

浮动属性是CSS中的定位属性，用法如下：
float: 浮动方向(left、right、none);

left为左浮动、right为右浮动、none是默认值表示不浮动
，设置元素的浮动，该元素将脱离文档流，向左或向右移动
直到它的外边距碰到父元素的边框或另一个浮动元素的边
框为止

浮动示例，没有使用浮动的3个DIV：
HTML结构代码：

第1块div

第2块div

第3块div

CSS样式代码：
#first, #second, #third{
width:100px;
height:50px;
border:1px #333 solid;
margin:5px;
}

执行效果如图：

样式中加入 float:left;
执行效果如图：

你再修改为 float: right试试右浮动是什么效果

16、让商品分类DIV、内容DIV和右侧DIV并排放置

HTML结构代码：

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="header"</span><span style="color: #0000ff;">></span>顶部（header）<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat"</span><span style="color: #0000ff;">></span>商品分类(cat)<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">5</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">></span>内容(content)<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">6</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sidebar"</span><span style="color: #0000ff;">></span>右侧(sidebar)<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">7</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="footer"</span><span style="color: #0000ff;">></span>底部（footer）<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="header"</span><span style="color: #0000ff;">></span>顶部（header）<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat"</span><span style="color: #0000ff;">></span>商品分类(cat)<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">5</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">></span>内容(content)<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">6</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sidebar"</span><span style="color: #0000ff;">></span>右侧(sidebar)<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">7</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="footer"</span><span style="color: #0000ff;">></span>底部（footer）<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

CSS样式代码(在第13节CSS代码基础上加入)：

<span style="color: #008080;"> 1</span> <span style="color: #000000;">.cat, .sidebar {
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">        float:left;
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">        width:20%;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">        height:100%;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    }
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> .content {
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">        float:left;
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">        width:60%;
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">        height:100%;
</span><span style="color: #008080;">10</span>     }

Nach dem Login kopieren

17、clear清除

clear只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行
clear属性的取值：rigth、left、both、none