Rumah hujung hadapan web tutorial js JavaScript 盒模型 尺寸深入理解_基础知识

JavaScript 盒模型 尺寸深入理解_基础知识

May 16, 2016 pm 05:44 PM
saiz model kotak

概念

引自维基百科:根据由万维网联盟(W3C)于1996年发行并于1999年修订的CSS1所指定的,当任意一个块级元素的宽度或高度被显式指定,它应当只确定这个可见元素自身(内容区)的宽度或高度,而padding, border和margin随后被应用。Internet Explorer在“怪异模式” 则把内容,内边距(padding)和边框(border)全部包括在一个指定的宽度或高度之内;这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。如下图:

299px-W3C_and_Internet_Explorer_box_models.svg

应用

理解盒模型,不管是对于设置一个元素外边据、边框、内边距,高宽CSS样式的准确应用,还是对于使用JavaScript去计算盒子的宽度、高度都有很大的帮助。比方说jQuery中提供的outerWidth,innerWidth,width,有了上面那个图,随时都可以很清楚的了解这个值的准确信息,在计算一个元素的位置和尺寸时都很有用处。

在弹出层中的应用,动态调整弹出层尺寸,以及拖拽过程中计算最大范围边距时都有用到。

一张图理解

jquery-box-size

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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

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)

Apakah saiz kertas a4 dalam sentimeter? Apakah saiz kertas a4 dalam sentimeter? Feb 11, 2024 pm 11:51 PM

Kertas A4 kini digunakan di banyak tempat, seperti pejabat, belajar, dan lain-lain. Kertas yang digunakan untuk menyalin pada dasarnya adalah kertas A4 Ramai rakan tidak tahu berapa sentimeter saiz kertas A4. 1. Saiz kertas A4 ialah 21cm × 29.7cm (210mm × 297mm Saiz kertas yang digunakan di kebanyakan negara di dunia menggunakan piawaian antarabangsa ini). 2. Asal kertas A4 ialah 210mm×297mm. Sebab 1: Segi empat tepat dengan panjang 2 dan lebar Nisbah yang terhasil ialah . Walau bagaimanapun, 297 dibahagikan dengan 210, hasilnya ialah 1.414, iaitu hampir dengan, dan nisbah ini betul-betul sekeping kertas

Bagaimana untuk mengira saiz komputer Bagaimana untuk mengira saiz komputer Mar 20, 2023 pm 01:43 PM

Cara mengira saiz komputer: 1. Cari meja rata dan stabil, letakkan monitor di atas meja, dan pastikan monitor stabil 2. Gunakan pembaris untuk mengukur panjang pepenjuru 3. Tukar unit antara sentimeter dan kaki; hanya mengira saiz monitor.

Apakah saiz kertas a4? Apakah saiz kertas a4? Apr 25, 2024 am 11:55 AM

1. Nisbah bidang kertas A4 adalah berbeza daripada 2:3 atau 3:4 biasa. Nisbah uniknya iaitu √2:1 menjadikannya menonjol di antara banyak saiz kertas. 2. Nisbah khas ini memberikan kesan visual yang ideal dan praktikal untuk kertas A4.

Cara mengurangkan saiz foto 'Mesti lihat untuk pemula: Langkah terperinci untuk memampatkan saiz imej' Cara mengurangkan saiz foto 'Mesti lihat untuk pemula: Langkah terperinci untuk memampatkan saiz imej' Feb 06, 2024 pm 06:55 PM

Ramai rakan menggunakan kamera untuk merakam tabiat hidup mereka Sesetengah rakan fotografi profesional mungkin juga menggunakan kamera SLR untuk mengambil gambar yang lebih jelas. Walau bagaimanapun, walaupun gambar yang diambil oleh kamera SLR adalah jelas, untuk gambar berpuluh-puluh megabait, ia sudah pasti akan meningkatkan tekanan pada peranti storan. Jadi, adakah cara untuk mengurangkan saiz foto sambil mengekalkan butiran gambar sebanyak mungkin? Malah, hanya memampatkan imej. Jadi bagaimana untuk memampatkan saiz imej? Berikut adalah dua kaedah yang baik untuk dikongsi. Kaedah 1: Kami boleh mengimport imej dalam alat kecantikan tanpa sebarang pemprosesan dan penyuntingan lain. Apabila menyimpan gambar, sistem akan menyediakan pilihan pelarasan kualiti imej, dan kami boleh menyeret peluncur untuk melaraskan ketajaman yang dikekalkan. Apabila anggaran saiz memenuhi keperluan anda, klik Simpan. Kaedah 2: ① Mula-mula buka ini ".

Apakah saiz a5 Apakah saiz a5 Apr 24, 2024 pm 05:53 PM

1. Kertas A5 ialah saiz kertas standard antarabangsa, saiznya ialah 148 mm x 210 mm (5.83 inci x 8.27 inci). 2. Ia sering digunakan dalam pelbagai aplikasi seperti alat tulis, buku nota, risalah dan buku. 3. Saiz kertas A5 adalah lebih besar sedikit daripada separuh daripada kertas A4, dan ia adalah saiz kelima dalam siri A saiz kertas. 4. Siri saiz ini telah dibangunkan oleh jurutera Jerman Walter Portmann pada awal abad ke-20 untuk mencipta satu siri saiz kertas standard berdasarkan nisbah emas.

Apakah model kotak div Apakah model kotak div Oct 09, 2023 pm 05:15 PM

Model kotak div ialah model yang digunakan untuk reka letak halaman web Ia menganggap elemen dalam halaman web sebagai kotak segi empat tepat Model ini mengandungi empat bahagian: kawasan kandungan, padding, sempadan dan margin. Kelebihan model kotak div ialah ia boleh mengawal reka letak halaman web dengan mudah dan jarak antara elemen Dengan melaraskan saiz kawasan kandungan, jidar dalam, jidar dan jidar luar, pelbagai kesan susun atur boleh dicapai model kotak juga menyediakan beberapa Sifat dan kaedah boleh mengubah gaya dan tingkah laku kotak secara dinamik melalui CSS dan JavaScript.

Apakah dimensi Huawei P40: panjang, lebar dan tinggi? Apakah dimensi Huawei P40: panjang, lebar dan tinggi? Jun 26, 2023 am 11:31 AM

Saiz Huawei p40 ialah 148.9 mm panjang, 71.06 mm lebar, 8.50 mm tebal, dan berat kira-kira 175 gram termasuk bateri Ia adalah telefon pintar yang dibangunkan oleh Huawei dan dikeluarkan secara dalam talian pada 26 Mac 2020. Ia boleh didapati di Frost. Perak, Emas Fajar, Tersedia dalam 5 warna termasuk putih sifar, hitam terang dan biru laut dalam, ia dilengkapi dengan cip SoC Kirin 9905G, yang menggabungkan pemproses dan jalur asas menjadi satu, seni bina kecekapan tenaga tiga peringkat CPU yang direka secara inovatif, 16 Kluster super GPU teras, kecekapan tenaga dan ketumpatan transistor, menyokong lebih banyak Semua jalur 5G.

Konsep dan fungsi model kotak HTML Konsep dan fungsi model kotak HTML Feb 18, 2024 pm 09:49 PM

Model kotak HTML ialah konsep yang digunakan untuk menerangkan susun atur dan kedudukan elemen dalam halaman web. Ia membungkus setiap elemen HTML dalam kotak segi empat tepat, yang terdiri daripada kawasan kandungan, padding, sempadan dan margin. Apabila menulis halaman web, memahami model kotak adalah penting untuk mengawal saiz, kedudukan dan gaya elemen. Contoh model kotak tertentu boleh ditunjukkan dengan kod berikut:

See all articles