基础页面布局之div+css_html/css_WEB-ITnose
如果文章对你有帮助，请点喜欢并关注，这将是我最大的动力。
1.理解盒模型
1.1什么是盒模型
如图：
upload/attachment/zhishi/upload/20160115/5698a2b319b6a.jpg
1.2.盒模型知识点分析
1.2.1.content
文档的主体部分，可以是文字图片，或者是标签
1.2.2.padding
填充，也就是content和border之间的距离填充距离也可以使用简写 padding：10px 20px 5px 15px 从上开始顺时针上右下左
1.2.3.border
边框，就是这个盒子的外壳，当然他也有自己的宽度常见样式： 1.width：1px-------边框宽度 2.style:solid-----边框样式，常见的有solid(实线)/dashed(虚线)/dotted(点线) 3.border-color:red-----------边框颜色
1.2.4.margin
盒模型与盒模型之间的距离margin距离同样也可以使用简写 margin：10px 20px 5px 15px 从上开始顺时针上右下左
1.3盒模型的高宽
1.3.1.css定义的高（hright）宽（width）
指的是padding以内的高宽，也就是content的高宽。
1.3.2.盒子实际的高宽
盒子高度=(margin-top)+(padding-top)+content+(padding-bottom)+(margin-bottom)盒子宽度=(margin-left)+(padding-left)+content+(padding-right)+(margin-right)
2.元素的布局模型
2.1.流动模型(flow)
2.1.1.流动模型简介
是默认的网页布局模式。也就是说，默认状态下网页都是根据流动模型来分布网页内容的。
2.1.2.什么是流动模型
流动模型具有以下特点：1).块状元素都会在父元素内自上而下按顺序垂直延伸（默认独占一行），因为块状元素默认宽度100%。2).内联元素都会在父元素内水平方向从左到右分布。
2.2.浮动模型(float)
2.2.1浮动模型定义
float 属性定义元素在哪个方向浮动。
2.2.2为什么需要浮动模型
在流动模型中，块状元素都是独占一行的，如果想要让两个块状元素并排显示，就需要使用浮动模型。
2.2.3浮动模型用法
用法：float:left/right/inherit-------分别是元素向左浮动，向右浮动，以及继承父元素。
2.3.层模型
2.3.1.什么是层模型
层模型就像photoshop中的图层编辑功能，对每个图层都可以精准定位操作。层模型有三种形式：1).绝对定位 position:absolute2).相对定位 position:relative3).固定定位 positoin:fixed
2.3.2绝对定位(absolute)
直接看代码：
div{ position:absolute; left:20px; top:30px;}这个div元素就会在其最接近的父元素内进行绝对定位，使其left的值直接设置为为20px，top的值直接设置为30px；
2.3.3.相对定位(relate)
定义：生成相对定位的元素，相对于其正常位置进行定位。因此，left:20 会向元素的left位置增加20px;
2.3.4.固定定位(fixed)
定义：生成绝对定位的元素，相对于浏览器窗口进行定位。因此，如果设置bottom:0;那么该元素会始终显示在浏览器底部。
3.用div来布局页面
3.1.用div元素代表各个区域：
<body> <div id="container"> <div id="header">头部</div> <div id="sidebar">侧栏</div> <div id="content">文本主体</div> <div id="footer">尾部</div </div></body>
3.2.用css来设定区域大小（这里用边框加以区分）：
<style type="text/css"> body{ margin: 0px; } div#container{ overflow: auto;-------------容器大小自适应 } div#header{ width: 1421px; border: 1px solid red; height:100px; } div#sidebar{ width:300px; height:520px; border: 1px solid red;------------简写 float: left; } div#content{ width:1119px; height:520px; border: 1px solid green; float: right;-------------浮动 } div#footer{ height: 89px; border: 1px solid yellow; clear: both;--------------清除左右侧浮动 }</style>如图
upload/attachment/zhishi/upload/20160115/5698a899378c3.jpg
3.3.对例子中div代码知识点分析
3.3.1.border
这里的border:1px solid red;是简写，他等价于
border-width:1px; border-style:solid; border-color:red;
3.3.2.float
float属性是div布局中最基本也是最常用的属性，用于实现多列功能，我们知道
3.3.3.clear
使用float属性设置一行有多个div后（多列），最好在下一行开始之前使用clear属性清楚一下浮动，否则上面的布局会影响到下面。常用属性：clear:left/right/both 分别对应左侧/右侧/左右两侧不允许出现浮动元素
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Mar 04, 2025 pm 12:32 PM
Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Mar 04, 2025 pm 02:39 PM
Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?
Mar 12, 2025 pm 04:05 PM
Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
