Jadual Kandungan
回复讨论(解决方案)
Rumah hujung hadapan web html tutorial DIV+CSS布局规则真奇葩_html/css_WEB-ITnose

DIV+CSS布局规则真奇葩_html/css_WEB-ITnose

Jun 24, 2016 pm 12:14 PM

今天刚接触这个东西,看了N多网页,都说不清楚,自己实验总结了一下,当然不全面,但是感觉真奇特:

其实下面这几个属性最重要:

	float:left;	position:relative;	top:0px;	left:10%;	width:30%;
Salin selepas log masuk


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以前还占有率特恐怖, 更苦了网页程序员了.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Apr 04, 2025 pm 11:30 PM

Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...

Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Apr 05, 2025 am 06:15 AM

Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles