HTML中display属性的属性值有哪些？display属性是怎么实现水平垂直居中的？-html tutorial-php.cn

HTML中display属性的属性值有哪些？都有什么含义？还有HTML中display属性是怎么实现水平垂直居中的？今天这篇文章给大家介绍HTML中display属性的值，还有HTML中display属性的值是怎么实现水平垂直居中的，介绍了两种方法。

display在这里我说四个最常用的属性值inline、 block、inlin-block、none。

首先我们来说一下inline（n内联元素）：

该属性值为默认值。此元素会被显示为内联元素，元素前后没有换行符。一般不会设置这个属性值。个人理解，其实跟正常的行内元素没什么区别，用的比较多的还是block和inline-block。

接着是block（块级元素）这个属性值：

这个属性值是比较有意思的，设置为块级元素独占一行，就换行来说和p标签的效果一样，但是这个属性值设置后，作为一个块级元素他就具备了宽、高，和别的块级元素的间距margin着属性的设置，还有间距的设置padding，但是不能设置行高（line-height）。

还有inline-block（内联块）这个属性值：

这个属性值是比较强大的，本人刚开始学的时候基本上见到需要设置的只要不是换行的就会设置这个属性值，一来他可以作为块级元素，可以具有block的特性，另一方面，由于本人初学，对于居中的设置比较麻烦，所有使用这个属性值可以设置行高，从而使文字居中，方便易用。

对于这个导航栏的实现这几个属性很好用，主要用到block和inline-block这两个属性值，inline-block作为同一行的几个元素的实现，block做为元素间换行的实现。大家可以试试。

对于最后一个none这个属性值：

个人觉得用于隐藏元素比较方便，做那种鼠标浮动的时候更改display的属性值来达到显示与隐藏元素的效果。

HTML中display一共有哪些比较常用的值呢，让我们一起来看看

HTML中display在通常的项目开发中比较容易被使用的值主要有：

none（元素不会被显示）;
block（元素将显示为块级元素，元素前后会带有换行符）;
inline（元素会被显示为内联元素，元素前后没有换行符）;
inline-block（行内块元素。CSS2.1 新增的值）;

table（元素会作为块级表格来显示，类似

，表格前后带有换行符）;

table-row（元素会作为一个表格行显示，类似

）;

table-cell（元素会作为一个表格单元格显示，类似

和	）。 display实现的水平垂直居中！利用position和margin进行元素水平垂直居中；想必大家还是比较熟悉，经常用的。但不知道你是否使用过display：table与table-cell对元素进行水平垂直居中呢？以下就是利用display：table-cell进行元素水平垂直居中的的两种方法了： 1.利用display：table与table-cell进行元素水平垂直居中结构： <div class="wrap"> <div class="box"> <div class="con">梦幻雪冰</div> </div> </div> Salin selepas log masuk 样式： .wrap { /让元素以表格形式渲染/ display: table; height: 400px; width: 400px; background: #fcf; } .box { /让元素以表格的单元素格形式渲染/ display: table-cell; /使用元素的垂直对齐/ vertical-align: middle; } .con { width: 200px; height: 200px; margin: 0 auto; background: #999; } Salin selepas log masuk 优点：这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。缺点：不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行。 2.利用display：table-cell进行元素水平垂直居中结构： <div class="wrap"> <div class="box"> 梦幻雪冰 </div> </div> Salin selepas log masuk 样式： .wrap { display: table-cell; width: 400px; height: 400px; background: #fcf; vertical-align: middle; } .box { width: 200px; height: 200px; margin: 0 auto; background: #999; } Salin selepas log masuk 优点：这种方法的优点和方法三是一样的，不会有高度的限制。缺点： IE6、IE7不支持【相关推荐】 HTML5中web是什么？web存储中的元素有哪些？ HTML IMG标签的属性是有哪些？了解IMG标签的用法 Atas ialah kandungan terperinci HTML中display属性的属性值有哪些？display属性是怎么实现水平垂直居中的？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP! Label berkaitan： HTML中的display属性值有哪些 HTML中的display属性怎么实现水平垂直居中的 sumber：php.cn Artikel sebelumnya：浏览器内核以及浏览器兼容的问题分析 Artikel seterusnya：XHTML的用法和HTML具体有哪些不同的地方、如何区分？ Kenyataan Laman Web ini 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 Artikel terbaru oleh pengarang react框架可以干什么？react框架的详细介绍（附完整的使用实例） 2018-09-11 16:45:17 如何使用react构建应用？React+Redux构建大型应用的步骤详情 2018-09-11 16:39:07 React如何实现登录？react登录模块的详解 2018-09-11 16:29:40 react怎么使用？react的使用情况详解（内附实例） 2018-09-11 16:10:13 React 16 新特性有哪些？react16的新特性和功能的介绍 2018-09-11 16:05:55 react该学哪些知识？react的知识点总结（附完整实例） 2018-09-11 16:01:50 react的函数有哪些？react函数的详细解析（附实例） 2018-09-11 15:55:13 Reactjs的生命周期是什么？reactjs生命周期的详细介绍 2018-09-11 15:50:18 React.js怎么使用？react.js的简单使用方法介绍（附实例） 2018-09-11 15:43:40 React组件refs有什么用？react组件refs的作用及其使用详解 2018-09-11 15:34:44 Isu terkini Bagaimana untuk menyesuaikan atribut id VSCode? Saya baru-baru ini berpindah dari Atom ke VSCode, dan walaupun saya telah berjaya menyesua... daripada 2024-03-31 14:13:45 0 1 373 Topik-topik yang berkaitan Lagi> Bagaimana untuk menyelesaikan masalah yang kod js tidak boleh dijalankan selepas pemformatan jadual sisipan perkataan Apakah protokol udp? Muat turun E-O Exchange ralat aplikasi plugin.exe alat ujian aplikasi Apa itu Avalanche arahan penangkapan paket linux Cadangan popular url是什么意思？ DOM是什么意思如何改变图片大小 HTML中如何将字体加粗 html图片大小如何设置 Tutorial Popular Lagi> Tutorial berkaitan Cadangan popular Kursus terkini Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP) 1417114 Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu 4258046 Tutorial Video Permulaan JAVA 2477809 Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python 503996 Tutorial pengenalan berasaskan sifar PHP 844297 Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP) 1417114 kali belajar Tutorial Video Permulaan JAVA 2477809 kali belajar Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python 503996 kali belajar Pengenalan pantas kepada pembangunan bahagian hadapan web 215302 kali belajar Kuasai tutorial video PS dari awal 877577 kali belajar [Web front-end] Permulaan pantas Node.js 6435 kali belajar Koleksi lengkap kursus timbunan penuh pembangunan web asing 5055 kali belajar Gunakan GraphQL praktikal bahasa 4249 kali belajar Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah 633 kali belajar Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam 21612 kali belajar Muat turun terkini Lagi> kesan web Kod sumber laman web Bahan laman web Templat hujung hadapan [butang borang] kod hubungan borang mesej perusahaan jQuery [Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5 [Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk [butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan [Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS [kesan khas html5] Permainan kotak menolak html5 klasik [Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej [Kesan album foto] Kesan zum hover kulit album peribadi CSS3 [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu [bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG) [bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG) [gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS) [bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG) [bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG) [bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza [gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS) [bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG) [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu Tentang kita Penafian Sitemap Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

和

）。

display实现的水平垂直居中！

利用position和margin进行元素水平垂直居中；想必大家还是比较熟悉，经常用的。但不知道你是否使用过display：table与table-cell对元素进行水平垂直居中呢？

以下就是利用display：table-cell进行元素水平垂直居中的的两种方法了：

1.利用display：table与table-cell进行元素水平垂直居中

结构：

<div class="wrap">
 <div class="box">
  <div class="con">梦幻雪冰</div>
 </div>
</div>

Salin selepas log masuk

样式：

.wrap {
    /*让元素以表格形式渲染*/
    display: table;
    height: 400px;
    width: 400px;
    background: #fcf;
}
.box {
    /*让元素以表格的单元素格形式渲染*/
    display: table-cell;
    /*使用元素的垂直对齐*/
    vertical-align: middle;
}
.con {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

Salin selepas log masuk

优点：

这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。

缺点：

不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行。

2.利用display：table-cell进行元素水平垂直居中

结构：

<div class="wrap">
 <div class="box">
  梦幻雪冰
 </div>
</div>

Salin selepas log masuk

样式：

.wrap {
    display: table-cell;
    width: 400px;
    height: 400px;
    background: #fcf;
    vertical-align: middle;
}
.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

Salin selepas log masuk

优点：

这种方法的优点和方法三是一样的，不会有高度的限制。

缺点：

IE6、IE7不支持

【相关推荐】

HTML5中web是什么？web存储中的元素有哪些？

HTML IMG标签的属性是有哪些？了解IMG标签的用法

Atas ialah kandungan terperinci HTML中display属性的属性值有哪些？display属性是怎么实现水平垂直居中的？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

HTML中的display属性值有哪些 HTML中的display属性怎么实现水平垂直居中的

sumber：php.cn

Artikel sebelumnya：浏览器内核以及浏览器兼容的问题分析 Artikel seterusnya：XHTML的用法和HTML具体有哪些不同的地方、如何区分？

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang