HTML mempunyai jenis elemen lain yang dipanggil Elemen Blok Sebaris. Ia hanya ruang yang diduduki dan dibatasi oleh setiap teg yang dipanggil oleh elemen yang ditentukan dan bukannya memecahkan aliran kandungan HTML. Ciri elemen peringkat blok terutamanya yang kami anggap sebagai
Sintaks asas diikuti di bawah:
Sintaks:
<html> <body> <p><span> ---some html codes ---</span> </p> </body> </html>
Kod di atas ialah sintaks asas untuk menulis elemen blok sebaris dalam html. Kami telah menggunakan beberapa set elemen blok sebaris yang telah ditetapkan di bawah.
Teg di atas adalah elemen sebaris html yang dipratakrif berdasarkan keperluan pengguna dalam html terutamanya; kami akan fokus pada teg dalam elemen blok sebaris html. Kita semua tahu elemen peringkat blok sentiasa memulakan baris baharu dan mengambil lebar penuh untuk pembolehubah tertentu, tetapi elemen sebaris tidak memulakan baris baharu. Selain itu, ia mengambil kurang lebar jika dibandingkan dengan elemen peringkat blok, tetapi ia perlu untuk mengisytiharkan lebar dalam elemen sebaris html. Elemen sebaris akan diisytiharkan di bahagian dalam elemen perenggan. The elemen sering digunakan dalam bekas sebagai beberapa teks dan tidak mempunyai atribut khusus yang diperlukan, tetapi gaya css, kelas dan id yang diberikan adalah biasa apabila elemen digunakan bersama-sama dengan css dalam beberapa bahagian gaya teks.
Kod:
<html> <head> section { background: green; box-sizing: border-box; padding: 150px; } div { box-sizing: border-box; display: inline-block; height: 100px; padding: 54px; text-align: center; width: 53%; } .green { background: lightgreen; } .black { background: black; } </head> <body> <span style="border: 2px lightgreen"> </span> <section> <div class="green">Width: 40%</div> <div class="black">Width: 60%</div> </section> </body> </html>
Penjelasan kod di atas: Dalam kod di atas, kami telah menetapkan lebar untuk dua tag div; setiap satu akan menjadi 50%, dan atribut paparan akan menjadi blok sebaris. Output yang dijangkakan akan berbeza-beza kerana lebar kedua-dua teg div ialah 50%, jadi akan mengubah mana-mana nilai teg hendaklah 51% atau 49%. Namun, ia bukan amalan yang baik dan juga tidak mencukupi untuk ruang elemen HTML; ia memerlukan sekurang-kurangnya 50% kerana elemen sebaris menghormati jarak perkataan antara dua teg div dalam HTML.
We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use
We will discuss the below examples.
Code:
<html> <body> <p>Sample <span style="border:3px green">Welcome</span>To my domain</p> <p>Welcome to My Domain</p> </body> </html>
Output:
Code:
<html> <head> <style> span.first { display: inline; width: 150px; height: 120px; padding: 8px; border: 3px blue; background-color: green; } span.second { display: inline-block; width: 140px; height: 110px; padding: 7px; border: 3px blue; background-color: green; } span.third { display: block; width: 103px; height: 110px; padding: 6px; border: 2px yellow; background-color: black; } </style> </head> <body> <div> Welcome to My Domain <span class="first">Welcome</span> <div> <div> Same Same <span class="second">Same Same</span> <div> <div> Welcome to My Domain <span class="third">Welcome</span> <div> </body> </html>
Output:
Code:
<html> <head> <style> .first { float:center; display: inline; width: 150px; height: 120px; padding: 8px; border: 3px blue; background-color: green; } .1{ clear:center; } </style> </head> <body> <div class="first"> <marquee> Welcome to My Domain</marquee> </div> </body> </html>
Output:
Explanation of the above code: The first example will discuss the essential inline element called tag that will use for the web page; the second example will use span in the CSS style, and the same will be called in the tag in body sections each of the CSS styles will be defined in each span third example we will use some text values in the box-limit areas in the inline-block element features.
In Conclusion, partly based on the above topics, we have some ideas about inline-block elements in Html. We use both tag elements for their dependencies and features in user areas. However, IE and other browser versions may or may not support some tags.
Atas ialah kandungan terperinci Blok Sebaris HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!