DIV+CSS布局规则真奇葩_html/css_WEB-ITnose
今天刚接触这个东西,看了N多网页,都说不清楚,自己实验总结了一下,当然不全面,但是感觉真奇特:
其实下面这几个属性最重要:
float:left; position:relative; top:0px; left:10%; width:30%;
float:left其实基准点,为左上角,这个应该比较常用,其实只这一种基本就能满足任何要求,只是其它方式可能特定的场合方便一些。
position:relative; 相对于父级或者上一个DIV的左上角来计算。
top 这个DIV相对于前个DIV的左上角Y坐标。
left 奇葩的计算方式,相对于前面DIV的宽度之和+这个值,才是自己的x坐标,而前面div的偏移无视。这就导致你必须知道前面div的x偏移和宽度才能正确定位。
right和bottom的值直接无视。那要这个属性干什么?就像一个控制面板,你不知道那个钮能用,那个钮不能用,但是都摆在那里。
子div的宽度和高度,默认和父级div相同,即使有x和y偏移,仍然倔强的伸出来,这父级根本包不住子div。
回复讨论(解决方案)
楼主明显对DIV+CSS带着点情绪在学习吧,你说的奇葩当然我并不认为是那样的,left的计算方式,当然只算自己的坐标就好了,为什么要算他父div的偏移呢?真这样弄的话,那才是真奇葩了呢。
我认为,DIV+CSS这个方式,慢慢的变主流的,table布局会越来越少见
楼主明显对DIV+CSS带着点情绪在学习吧,你说的奇葩当然我并不认为是那样的,left的计算方式,当然只算自己的坐标就好了,为什么要算他父div的偏移呢?真这样弄的话,那才是真奇葩了呢。
我认为,DIV+CSS这个方式,慢慢的变主流的,table布局会越来越少见
目测能准确说成div布局规则的人都不多,大家只不过调试一下能用就行了。
楼主明显对DIV+CSS带着点情绪在学习吧,你说的奇葩当然我并不认为是那样的,left的计算方式,当然只算自己的坐标就好了,为什么要算他父div的偏移呢?真这样弄的话,那才是真奇葩了呢。
我认为,DIV+CSS这个方式,慢慢的变主流的,table布局会越来越少见
DIV+CSS布局在于灵活,也更适用于网页的设计,楼主的所看的代码,是其网页里经常见到的,也经常用的
right和bottom的值直接无视。那要这个属性干什么?就像一个控制面板,你不知道那个钮能用,那个钮不能用,但是都摆在那里。
为什么不要呢,如果没个这个属性,那么我想将所有按钮的背景图放在一张图里面呢,你怎么设置背景呢?他每个属性都有他存在的意义,
现在我也没搞清楚, 用到什么布局再研究. 基本上, 网页这块, 就是乱七八糟, 真难为写浏览器的那些人了.
再加上各种浏览器不兼容, IE6以前还占有率特恐怖, 更苦了网页程序员了.

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

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

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





HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...

Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...

Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
