Saya ingat pertanyaan yang diajukan oleh pewawancara selama wawancara kerja sebelumnya: apa elemen dalam industri dan apa perbedaan antara mereka dan elemen tingkat blok? Ini adalah pertanyaan wawancara yang sangat mendasar, tetapi banyak pemula biasanya hanya fokus pada semantik label dan mengabaikan karakteristik label di dalam dan level blok. Oleh karena itu, sangat mungkin bahwa pertanyaan di atas tidak dapat dijawab atau dijawab secara tidak lengkap.
Elemen in-line umum dalam HTML adalah:<span>, <a>, <mmg>, <sput>, <ptextarea>, <folly>, <label>
Ini juga termasuk beberapa elemen teks seperti: <br>, <b>, <strong>, <sup>, <sub>, <i>, <em>, <del>, <u>, dll.
Jika Anda hanya menjawab <span> dan <mmg>, itu tidak masuk akal.
Elemen tingkat blok umum dalam HTML adalah:<div>, <able>, <norm>, <p>, <ul>,
<h1> ...... <h6>, <hr>, <pr Pre>, <dressule>, <usen>, <sarquee>, <lockquote>, dll.
Jika Anda hanya menjawab <VET>, itu tidak masuk akal.
Jadi apa perbedaan di antara mereka?Elemen tingkat blok
1. Selalu mulai dengan garis baru, yaitu, setiap elemen tingkat blok mengambil satu baris, dan diatur secara vertikal ke bawah secara default;
2. Tinggi, lebar, margin dan bantalan semuanya dapat dikendalikan, dengan pengaturan yang efektif dan efek margin;
3. Ketika lebar tidak diatur, standarnya 100%;
4. Elemen tingkat blok dapat berisi elemen tingkat blok dan elemen in-line.
· Elemen in-line
1. Ini berada di garis yang sama dengan elemen -elemen lain, yaitu elemen -elemen di garis dan elemen -elemen lain di garis akan diatur pada garis horizontal;
2. Tinggi dan lebar tidak terkendali, dan pengaturannya tidak valid dan ditentukan oleh konten.
Pengaturan margin efektif di kiri dan kanan, dengan efek margin;
Pengaturan margin akan mendukung ruang atas dan ke bawah tidak akan menghasilkan efek margin (yaitu, margin-top/bawah memiliki nilai pada model kotak, tetapi tidak ada efek margin pada halaman).
Mengatur padding kiri dan kanan efektif. Pengaturan padding ke atas dan ke bawah akan membuat ruang lebih besar tetapi tidak akan menghasilkan efek margin (sama seperti di atas).
Efek padding ditampilkan sebagai berikut:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> </head><style>span{border:1px solid red;padding:10px;}div{border:1px solid blue;}</style> <body> <div>Block level element</div> <span> In-line element</span> <span> In-line element</span> <div>Block level element</div> </body> </html>3. Menurut konsep semantik label, yang terbaik adalah memasukkan hanya elemen in-line dan bukan elemen tingkat blok.
MengubahTentu saja, karakteristik antara elemen tingkat blok dan elemen in-line dapat dikonversi satu sama lain. HTML dapat membagi elemen menjadi tiga jenis: elemen in-row, elemen blok dan elemen blok in-row.
Gunakan atribut tampilan untuk mengonversi ketiganya menjadi konversi sewenang -wenang:
(1) Tampilan: inline; Konversi ke elemen inline;
(2) Tampilan: blok; Konversi ke blok elemen;
(3) Tampilan: blok inline; Konversi ke elemen blok inline.
Elemen blok in-line menggabungkan karakteristik elemen in-line dan elemen in-line:(1) Jika bungkus garis tidak dibungkus secara otomatis, itu akan diatur pada garis horizontal dengan elemen garis lainnya;
(2) tinggi, lebar, margin dan bantalan semuanya dapat dikendalikan, dengan pengaturan yang efektif dan efek margin;
(3) Pengaturan default adalah dari kiri ke kanan.
Ini adalah akhir dari artikel ini tentang perincian apa perbedaan antara elemen HTML dan elemen tingkat blok. Untuk elemen HTML yang lebih terkait dan elemen tingkat blok, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!