Apakah nilai atribut paparan dalam h5

Nilai atribut paparan dalam h5 termasuk blok, sebaris, blok sebaris, tiada, jadual, lentur, grid, item senarai, warisan, permulaan, dsb. Pengenalan terperinci: 1. blok, gunakan nilai blok untuk membuat paparan elemen pada tahap blok, iaitu, elemen akan menduduki baris eksklusif, dan lebar lalai kepada 100% daripada bekas induk; nilai sebaris untuk menjadikan elemen paparan sebaris, iaitu elemen tidak akan baris Eksklusif dan sebagainya.

Sistem pengendalian untuk tutorial ini: sistem Windows 10, komputer DELL G3.

Dalam HTML5, atribut paparan digunakan untuk mengawal cara elemen dipaparkan. Ia mentakrifkan cara elemen dibentangkan dan dibentangkan pada halaman. Atribut paparan boleh mengambil pelbagai nilai Beberapa nilai biasa akan diperkenalkan di bawah.

1 (elemen peringkat blok): Gunakan nilai blok untuk memaparkan elemen pada tahap blok, iaitu, elemen akan menduduki baris eksklusif dan lebar lalai kepada 100% daripada bekas induk. Elemen peringkat blok biasa termasuk

,

,

hingga

, dsb.

2 sebaris (elemen sebaris): Gunakan nilai sebaris untuk menjadikan elemen dipaparkan sebaris, iaitu elemen tidak akan menduduki satu baris dengan sendirinya, tetapi akan dipaparkan dalam baris yang sama seperti yang lain. elemen. Elemen sebaris biasa termasuk , , , , , dsb.

3 blok sebaris (elemen peringkat blok sebaris): Gunakan nilai blok sebaris untuk memaparkan elemen dalam cara peringkat blok sebaris, iaitu, elemen dipaparkan dalam baris yang sama , dan atribut seperti lebar dan tinggi boleh ditetapkan. Elemen peringkat blok sebaris biasa termasuk , , , , dsb. </p> <p>4 (elemen tersembunyi): Gunakan nilai tiada untuk menyembunyikan elemen, iaitu elemen tidak akan dipaparkan pada halaman. Apabila nilai ini ditetapkan, elemen tidak akan menduduki sebarang ruang. Ini berguna apabila anda perlu menunjukkan dan menyembunyikan elemen secara dinamik. </p> <p>5 jadual (elemen jadual): Gunakan nilai jadual untuk memaparkan elemen sebagai jadual, iaitu elemen akan mempunyai ciri-ciri jadual, termasuk baris dan lajur jadual. Elemen jadual biasa termasuk <jadual>, <tr>, <td>, dsb. </p> <p>6. Fleksibel (reka letak fleksibel): Gunakan nilai fleksibel untuk menyusun elemen menggunakan reka letak fleksibel. Susun atur fleksibel boleh melaraskan saiz dan kedudukan elemen secara automatik mengikut saiz bekas untuk mencapai kesan susun atur yang fleksibel. </p> <p>Selain nilai di atas, atribut paparan juga boleh mengambil nilai lain, seperti: </p> <p>- grid (susun atur grid): Gunakan nilai grid untuk menggunakan susun atur grid Susun elemen. Reka letak grid membahagikan halaman kepada baris dan lajur, menjadikannya mudah untuk menyusun elemen. </p> <p>- item senarai (item senarai): Gunakan nilai item senarai untuk memaparkan elemen sebagai item senarai, iaitu, akan ada titik atau nombor di hadapan elemen. </p> <p>- mewarisi (warisi atribut paparan unsur induk): Gunakan nilai warisan untuk mewarisi atribut paparan unsur induk. </p> <p>- awal (nilai awal): Gunakan nilai awal untuk menetapkan semula atribut paparan kepada nilai awalnya. </p> <p>Di atas ialah beberapa nilai atribut paparan yang biasa digunakan Dengan menetapkan atribut paparan, kami boleh mengawal mod paparan elemen secara fleksibel dan mencapai pelbagai kesan reka letak. </p><p>Atas ialah kandungan terperinci Apakah nilai atribut paparan dalam h5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">继承</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">flex</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">table</a> <a href="javascript:void(0);">td</a> <a href="javascript:void(0);">tr</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="Apakah keburukan paparan" href="http://m.php.cn/ms/faq/627949.html">Apakah keburukan paparan</a></span><span>Artikel seterusnya：<a class="dBlack" title="Apakah keburukan paparan" href="http://m.php.cn/ms/faq/627970.html">Apakah keburukan paparan</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/371604.html" title="CSS的display属性list-item的list-style-type显示不出来的问题解决" class="aBlack">CSS的display属性list-item的list-style-type显示不出来的问题解决</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/417849.html" title="H5开发app可以使用什么框架" class="aBlack">H5开发app可以使用什么框架</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/450804.html" title="H5可以导出成视频吗？" class="aBlack">H5可以导出成视频吗？</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/468985.html" title="微信h5页面是什么" class="aBlack">微信h5页面是什么</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/500660.html" title="Apakah kegunaan kawalan paparan pintar asus?" class="aBlack">Apakah kegunaan kawalan paparan pintar asus?</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><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>