css块级标签，行内标签，行内块标签的转换
在基础1中，我详细讲了css的常见属性，几种不同的选择器，在此基础之上我们来进一步地认识它们的特性从而更好地学习和掌握相关开发技能。
HTML标签的分类
在讲标签分类的时候，我们作为初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！
首先我们可以按照显示的不同将HTML标签分为：块级标签，行内标签，行内块标签；现对其分别介绍。
块级标签
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
典型的块级标签有：e388a4556c0f65e1904146cc1a846bee ，h系列，25edfb22a4f469ecb59f1190150159c6，73de882deff7a050a357292d0a1fca94，67bc4f89d416b0b8236eaa5f43dee742，e388a4556c0f65e1904146cc1a846bee ，ff9c23ada1bcecdd1a0fb5d5a0f18437，ff6d136ddc5fdfeffaf53ff6ee95f185
行内标签
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！
典型的行内标签有：45a2772a6b6107b401db3c9b82c049c2，3499910bf9dac5ae3c52d5ede7383485，a4b561c25d9afb9ac8dc4d70affff419，5a8028ccc7a7e27417bff9f05adf5932，88f336217b3880082bb52d49b5de60a5，907fae80ddef53131f3292ee4f81644b，8e99a69fbe029cd4e2b854e244eab143，2e1cf0710519d5598b1f0f14c36ba674，0c6dc11e160d3b678d68754cc175188a
行内块标签 ：
特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
典型的行内标签有：a1f02c36ba31691bcfe87b2722de723b，d5fd7aea971a85678ba271703566ebfd
那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;
只要给对应的标签使用这个display这个属性，取相应的值，就可以将显示模式互相转换。
下面请看如下示例：
1：将行内标签转换为块级标签
<!DOCTYPE html>
<html>
<head>
<title>行内标签转块级标签</title>
<style type="text/css">
a{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
</style>
</head>
<body> <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
<a href="https://www.baidu.com">百度</a>
</body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>运行结果如下;点红色任意一区域都能实现跳转到百度，所以他可以实现扩大链接范围。
2：将行内标签转换为行内块标签
上面已经讲过行内块级标签和块级标签的区别，我在强调一遍：块级标签和行内块级标签都是可以设置长和宽的，但块级标记当你设置好后
它是自动换行的，你不能在这一行再放其它东西，而行内块级标签在同一行中可以放置多个行内标签，具体我有案例来解释。
<html>
<head>
<title>块级和行内块级</title>
<style type="text/css">
a{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
div{
width:100px;
height:100px;
background-color: red;
margin-top:10px; /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a> <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
<a href="https://www.baidu.com">百度一下</a>
<div>我是div1</div> <!--这个是一般的块级标签，会上下分行-->
<div>我是div2</div>
</body>
</html>运行结果：
3.将块级标签转换为行内标签
<!DOCTYPE html>
<html>
<head>
<title>块级标签转行内标签</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
display: inline;
}
</style>
</head>
<body>
<div>谷歌</div> <!--按道理div是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->
<div>https://www.google.com</div>
</body>
</html>效果如下：
有关块级标签，行内标签，行内块级标签我就先写到这里，也欢迎大家看了之后能够多指点，感谢。
更多css块级标签，行内标签，行内块标签的转换相关文章请关注PHP中文网！
Widget sepuluh tanApr 15, 2025 am 09:43 AMPada ceramah persidangan baru-baru ini (maaf, saya lupa mana yang satu), terdapat contoh cepat prestasi web yang lemah dalam bentuk widget pihak ketiga. Contohnya
Resipi untuk ujian prestasi aplikasi tunggal di webpageTestApr 15, 2025 am 09:42 AMWebpageTest adalah alat dalam talian dan projek sumber terbuka untuk membantu pemaju mengaudit prestasi laman web mereka. Sebagai penginjil prestasi web di
Hentikan animasi semasa saiz semula tetingkapApr 15, 2025 am 09:40 AMKatakan anda mempunyai halaman yang mempunyai banyak peralihan dan animasi pada pelbagai elemen. Sebilangan daripada mereka dapat dicetuskan apabila tingkap diubahsuai kerana mereka
Menenun satu elemen di atas dan di bawah elemen lainApr 15, 2025 am 09:38 AMDalam jawatan ini, kami akan menggunakan kuasa besar CSS untuk mewujudkan kesan visual di mana dua elemen bertindih dan menenun bersama. Epiphany untuk reka bentuk ini datang
Adakah terdapat nombor rawak dalam CSS?Apr 15, 2025 am 09:37 AMCSS membolehkan anda membuat susun atur dan antara muka yang dinamik di web, tetapi sebagai bahasa, ia adalah statik: sekali nilai ditetapkan, ia tidak dapat diubah. Idea
Elemen terapung di tengah -tengah perengganApr 15, 2025 am 09:36 AMKatakan anda ingin mempunyai imej (atau mana -mana elemen lain) secara visual terapung ke dalam perenggan teks. Tetapi seperti ... di tengah -tengah perenggan, tidak betul
Biarkan ' s membuat loader halaman mewah, tetapi tidak rumitApr 15, 2025 am 09:33 AMAdalah biasa untuk melihat keadaan pemuatan di laman web hari ini, terutamanya sebagai aplikasi web progresif dan tapak reaktif semakin meningkat. Ini satu cara untuk
Landskap pembangunan aplikasi silang platformApr 15, 2025 am 09:29 AMSaya tidak mengesan perkara ini dengan baik, tetapi saya dapat. Sekiranya anda mahukan aplikasi asli untuk Android dan iOS, pasti akan hanya perlu menulisnya
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Dreamweaver CS6
Alat pembangunan web visual
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
