Rumah > Artikel > hujung hadapan web > Blok Sebaris HTML

Blok Sebaris HTML

PHPzasal: 2024-09-04 16:18:57562semak imbas

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

teg perkara yang sama kita mempunyai teg Elemen Sebaris yang dipanggil tertumpu terutamanya pada elemen blok sebaris; terdapat sedikit perbezaan antara elemen sebaris dan sebaris blok ia membolehkan pengguna menetapkan lebar, ketinggian elemen Html juga kami telah menyesuaikan bahagian atas, bawah dan paparan kandungan akan menjadi blok sebaris dan juga padding akan dimulakan jika keperluan yang diperlukan.

Sintaks HTML Inline-Block

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.

</li> <li><masa></li> <li><tt></li> <li><var></li> </ul> <p>Teg di atas adalah elemen sebaris html yang dipratakrif berdasarkan keperluan pengguna dalam html terutamanya; kami akan fokus pada <span> 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 <span> 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 <span> elemen digunakan bersama-sama dengan css dalam beberapa bahagian gaya teks.</p> <h3>Bagaimana untuk Membuat Blok Sebaris HTML?</h3> <ul> <li>Seperti yang dibincangkan dalam artikel terdahulu, kami telah mencipta elemen blok sebaris HTML dalam elemen peringkat blok. Elemen HTML hanya membawa pengguna untuk memperuntukkan ruang yang diperlukan dan muncul bersebelahan antara satu sama lain pada baris tag HTML yang sama. Kami tidak boleh mengawal ketinggian dan lebar elemen HTML; ia adalah sifat unsur sebaris.</li> <li>Atribut gaya CSS yang dipanggil paparan: sebaris mengabaikan tetapan pelapik dan jidar apabila perlu; ia akan membenarkan padding dan nilai margin dalam HTML. Ia mengandungi hanya elemen sebaris dan menjadikan elemen blok muncul dalam satu baris dengan bantuan tetapan seperti paparan: sebaris<strong>. </strong>Kami boleh menggunakan gaya CSS untuk menetapkan teg div pada lebar 50% jika anda tidak mahu meminimumkan kod HTML. ia adalah penyelesaian CSS untuk elemen blok sebaris.</li> <li>Kadang-kadang kita boleh menggunakan ruang putih:no-wrap ialah bekas induk; ia akan membenarkan <div> tag untuk dipaparkan dalam setiap blok sebaris div seperti yang kami jangkakan tanpa merantai div bersama-sama juga dirujuk sebagai teg div bersarang. Kami telah membincangkan beberapa elemen blok sebaris yang akan digunakan untuk membuat reka letak dengan bantuan gaya CSS.</li> <li>Andaikan kami menggunakan dua teg div dalam HTML yang dipaparkan dengan tetapan elemen blok sebaris dalam gaya CSS. Kita boleh menetapkan lebar setiap teg sebagai 50%, tetapi teg div kedua berada di bawah teg div pertama.</li> </ul> <p><strong>Kod:</strong></p> <pre class="brush:php;toolbar:false"><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></pre> <p><strong>Penjelasan kod di atas:</strong> 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.</p> <p>We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use <section> tag called block-level elements for the above codes. We use the <span> tag as the inline element tag; we will use some contents inside the tags that will be required on the web page.</p> <h3>Examples to Implement in Inline-Block</h3> <p>We will discuss the below examples.</p> <h4>Example #1</h4> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><html> <body> <p>Sample <span style="border:3px green">Welcome</span>To my domain</p> <p>Welcome to My Domain</p> </body> </html></pre> <p><strong> Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543793934952.png" alt="Blok Sebaris HTML" ></p> <h4>Example #2</h4> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><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></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543794134319.png" alt="Blok Sebaris HTML" ></p> <h4>Example #3</h4> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><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></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543794366814.png" alt="Blok Sebaris HTML" ></p> <p><strong>Explanation of the above code:</strong> The first example will discuss the essential inline element called <span> 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 <span> 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.</p> <h3>Conclusion</h3> <p>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.</p><p>Atas ialah kandungan terperinci Blok Sebaris HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">css</a> <a href="javascript:void(0);">less</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Object</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">var</a> <a href="javascript:void(0);">map</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">margin</a> <a href="javascript:void(0);">padding</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">word</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>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</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Elemen Blok HTML" href="http://m.php.cn/ms/faq/1796600057.html">Elemen Blok HTML</a></span><span>Artikel seterusnya：<a class="dBlack" title="Elemen Blok HTML" href="http://m.php.cn/ms/faq/1796600060.html">Elemen Blok HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="http://m.php.cn/ms/about/us.html">Tentang kita</a><a href="http://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="http://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>