Adalah disyorkan untuk memahami mod kotak CSS secara menyeluruh (pengenalan cepat kepada reka letak DIV)_Pertukaran pengalaman-tutorial css-php.cn

Kata Pendahuluan
Jika anda ingin cuba susun atur halaman web anda tanpa menggunakan jadual, tetapi gunakan CSS untuk susun atur halaman web anda, yang sering didengar menggunakan p untuk susun atur struktur halaman web anda, atau anda ingin mempelajari Reka bentuk piawaian halaman web, atau bos anda mahu anda menukar kaedah susun atur meja tradisional untuk meningkatkan daya saing syarikat, maka satu titik pengetahuan yang anda mesti didedahkan ialah mod kotak CSS Ini adalah teras susun atur p, susun atur meja tradisional Ia menggunakan jadual saiz yang berbeza dan sarang jadual ke kedudukan dan susun atur kandungan halaman web Selepas bertukar kepada susun atur CSS, halaman web disusun melalui kotak dan sarang kotak dengan saiz berbeza yang ditentukan oleh CSS. Oleh kerana kod halaman web yang ditaip dengan cara ini adalah ringkas, mudah dikemas kini dan boleh serasi dengan lebih banyak penyemak imbas, seperti peranti PDA, ia juga boleh dilayari secara normal, jadi adalah berfaedah untuk melepaskan penataan jadual yang saya suka Sebelum ini, yang lebih penting, penyusunan taip halaman web. Kelebihannya jauh lebih banyak daripada ini. Anda boleh mencari maklumat yang relevan sendiri.
Memahami model kotak CSS
Apakah model kotak CSS? Mengapa ia dipanggil kotak? Mari kita bincangkan tentang nama atribut yang sering kita dengar dalam reka bentuk web: kandungan, padding, jidar dan mod kotak CSS semuanya mempunyai atribut ini.

Kita boleh memahami sifat-sifat ini dengan memindahkannya ke kotak (kotak) dalam kehidupan seharian kita. Kemudian isinya adalah apa yang ada di dalam kotak itu adalah buih atau bahan tambahan tahan gempa yang lain untuk mengelakkan kandungan (berharga) daripada rosak, seperti untuk sempadan itu sendiri; kotak tidak boleh diletakkan apabila ia diletakkan bersama-sama, meninggalkan ruang tertentu untuk pengudaraan dan untuk mudah dikeluarkan. Dalam reka bentuk web, kandungan sering merujuk kepada teks, gambar dan elemen lain, tetapi ia juga boleh menjadi kotak kecil (p-nested) Berbeza daripada kotak dalam kehidupan sebenar, perkara dalam kehidupan sebenar secara amnya tidak boleh lebih besar daripada kotak, jika tidak kotak itu akan diregangkan Patah, dan kotak CSS adalah anjal Perkara di dalam adalah lebih besar daripada kotak itu sendiri dan akan meregangkannya paling banyak, tetapi ia tidak akan rosak. Pengisian hanya mempunyai atribut lebar, yang boleh difahami sebagai ketebalan bahan bantu anti-seismik dalam kotak dalam kehidupan, manakala sempadan mempunyai saiz dan warna, yang boleh difahami sebagai ketebalan kotak yang kita lihat dalam kehidupan. dan bahan warna apa kotak itu dibuat. Sempadan ialah jarak antara kotak dengan benda lain. Dalam kehidupan sebenar, andaikan kita berada dalam segi empat sama dan letakkan kotak dengan saiz dan warna yang berbeza pada selang waktu tertentu dan dalam susunan tertentu Akhirnya, apabila kita melihat ke bawah dari segi empat sama, kita akan melihat grafik dan struktur yang serupa dengan apa yang kita mahu lakukan . Reka letak halaman web direka, seperti yang ditunjukkan di bawah.

Susun atur halaman web yang diperbuat daripada “kotak”

Sejauh manakah anda memahami corak kotak CSS sekarang Jika ia tidak cukup teliti, saya akan memberi contoh kemudian dan menggunakan konsep kotak untuk menerangkannya.
Ubah pemikiran kita
Reka bentuk web front-end tradisional dijalankan seperti ini: mengikut keperluan, pertimbangkan dahulu warna utama, jenis gambar yang hendak digunakan, fon apa, warna , dan lain-lain. Kemudian kita boleh melukisnya secara bebas menggunakan perisian seperti Photoshop, dan akhirnya memotongnya menjadi gambar-gambar kecil Kita tidak boleh lagi bebas menjana halaman dengan mereka bentuk HTML Selepas beralih kepada CSS untuk reka letak, kita perlu mengubah idea ini masa, pertimbangan utama kami adalah kandungan halaman Semantik dan struktur, kerana halaman web dengan kawalan CSS yang kuat, selepas halaman web selesai, anda boleh dengan mudah menyesuaikan gaya halaman web yang anda mahukan susun atur adalah untuk menjadikan kod mudah dibaca, mengosongkan blok, dan mengukuhkan kod, jadi struktur adalah penting. Jika anda ingin mengatakan bahawa reka bentuk halaman web saya sangat rumit, adakah mungkin untuk mencapai kesan itu kemudian? Apa yang saya ingin beritahu anda ialah jika kesannya tidak dapat dicapai dengan CSS, secara amnya sukar untuk mencapainya dengan jadual, kerana keupayaan kawalan CSS adalah begitu kuat, terdapat faedah yang sangat praktikal menggunakan CSS untuk penetapan huruf, jika anda mengambil pesanan untuk membina laman web, jika anda menggunakan CSS untuk susun atur halaman web, jika pelanggan tidak berpuas hati kemudian, terutamanya ton warna, ia akan menjadi agak mudah untuk mengubahnya, dan anda juga boleh menyesuaikannya. beberapa gaya fail CSS Untuk pelanggan memilih, atau menulis program untuk melaksanakan panggilan dinamik, supaya tapak web mempunyai fungsi mengubah gaya secara dinamik.
Mencapai pemisahan struktur dan persembahan
Sebelum memulakan latihan susun atur yang sebenar, mari kita fahami satu perkara lagi - pemisahan struktur dan persembahan Ini juga menggunakan ciri-ciri susun atur CSS. kod akan ringkas. Ia adalah mudah untuk dikemas kini. Sebagai contoh, P ialah teg berstruktur Di mana terdapat teg P, ia menunjukkan bahawa ini adalah blok perenggan ialah atribut prestasi spaces dan kemudian teruskan Tanpa menambah ruang, anda kini boleh menentukan gaya CSS untuk teg P: P {text-indent: 2em;}, supaya kandungan kandungan yang terhasil adalah seperti berikut, tanpa sebarang teg kawalan prestasi tambahan:
Jika anda masih mahu mengubah suai ini Untuk mengubah suai perenggan dengan fon, saiz fon, latar belakang, jarak baris, dsb., cuma tambahkan CSS yang sepadan terus ke gaya P Tidak perlu menulisnya seperti ini:

Kandungan perenggan

Ini adalah campuran struktur dan ungkapan Jika banyak perenggan mempunyai struktur bersatu dan Dari segi prestasi, ia akan menjadi rumit untuk menulis kod dengan cara ini.
Mari kita senaraikan terus sekeping kod untuk memperdalam pemahaman kita tentang pemisahan struktur dan prestasi:
Gunakan CSS untuk tetapan taip

< ;p id="photoList">
>

;/p>

Tiada reka letak CSS

Kaedah pertama adalah untuk memisahkan struktur dan persembahan Kod untuk bahagian kandungan haruslah mudah. Jika terdapat lebih banyak senarai imej, maka kaedah susun atur CSS yang pertama akan mempunyai lebih banyak kelebihan anda faham: Saya Dalam BADAN, saya ingin memperkenalkan anda kepada seseorang, saya hanya akan memberitahu anda bahawa dia adalah seorang wanita, anda boleh mengetahuinya dengan menyemaknya dalam CSS. Dengan cara ini, kerja saya dalam BODY akan menjadi mudah, yang bermaksud bahawa kod BODY akan menjadi mudah. Jika BODY mempunyai ahli pasukan di sana, saya hanya boleh merekodkan item dalam CSS Ini adalah sedikit seperti konsep komponen dan kejadian dalam perisian Flash yang berbeza berkongsi komponen yang sama, jadi fail animasi tidak akan menjadi besar adalah untuk memindahkan idea kepada reka bentuk web CSS, iaitu, kodnya tidak rumit, dan fail halaman web adalah kecil dan boleh dimuat turun oleh pelanggan dengan lebih cepat.

Gunakan reka letak CSS untuk mengurangkan saiz fail halaman web

Seperti reka letak yang saya buat di atas, ia dibahagikan kepada empat blok, dan bingkai setiap blok adalah yang sama Ya, rangka kerja ini ditulis dalam CSS Setelah gaya ditulis, ia boleh dipanggil berkali-kali (dipanggil dengan kelas, bukan ID Selagi kandungan teks diubah, banyak bahagian dengan gaya bersatu boleh dihasilkan). Kod gaya dan strukturnya ialah (sila jangan salin dan jana halaman web secara langsung, tampal kod berikut ke dalam halaman web yang sepatutnya):

结构代码是这样的：

首页

文章

相册

Blog

论坛

帮助