HTML中块标记和行内标记的介绍
HTML标记一般分为块标记和行内标记两种类型，它们也称块元素和行内元素。
块元素
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。并且块级元素容器可以容纳多个嵌套的块级标签或者行内标签。常见的块元素有
~、
、
- 、
- 等，其中标记是网页制作中最常用的块元素。
行内元素
行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构的样式。行内元素不能嵌套块级标签，只能嵌套其他的行内标签。常见的行内元素有、、、、
、、、、、等，其中标记是最常用的行内元素。1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 </head> 7 <body> 8 <div>我是一个div</div> 9 <span>我是一个span</span>10 <strong>我是一个strong</strong>11 </body>12 </html>
Salin selepas log masuk
要是想让strong标签像div标签一样独占一行可不可以呢，答案是当然可以。这就需要用到display这个属性了，比较常用的值有none、inline、block与inline-block，这几个值得解释如下
none ：此元素不被显示，在文档中被移除。
block ：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素
inline ：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素
inline-block：按行内标签进行排版，但是可以设置宽高，而且高度可以影响行高block属性
现在让我们把上面的strong元素变成块级元素试试
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 7 <style type="text/css"> 8 strong { 9 display: block;10 }11 </style>12 </head>13 <body>14 <div>我是一个div</div>15 <span>我是一个span</span>16 <strong>我是一个strong</strong>17 </body>18 </html>Salin selepas log masukinline属性
可以看到设置了display属性为block之后，strong标签就独占一行了，相反如果让div元素变成行内元素的话，就需要用到display属性的inline值了
1 <style type="text/css">2 strong {3 display: block;4 }5 6 div {7 display: inline;8 }9 </style>Salin selepas log masuk可以看到div标签与span在同一行显示了
inline-block属性
再来看看inline-block值，字面意思是行内块级元素，从最开始的介绍得知行内元素的宽高只能靠自身的内容来支撑，这里先给span标签设置宽高
span {width: 200px;height: 100px;background-color: red; }Salin selepas log masuk从浏览器的运行结果来看，给span设置的宽高并没有起到任何的作用，现在给span设置下display属性inline-block看看
span {width: 200px;height: 100px;background-color: red;display: inline-block; }Salin selepas log masuknone属性
可以看到设置的宽高都起作用了，有了块级元素的假象，不过这里的span标签还是一个行内元素。有时候，我们需要暂时性的隐藏页面中的元素，这时就可以设置元素的display属性为none，例如需要隐藏页面中的div元素
div {display: none; }Salin selepas log masuk需要注意的是，CSS中的visibility属性也可以控制页面元素的显示与否
div {visibility: hidden; }Salin selepas log masuk通过浏览器的显示结果可以很容易得出下面的结论
display: none;的设置是直接把当前标签从页面中直接移除了，不影响页面的布局，而visibility: hidden这个设置只是表示元素在页面上不显示，但还是占用页面的空间。
Atas ialah kandungan terperinci HTML中块标记和行内标记的介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
- 、
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
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Jangkaan harga Fujifilm X-M5 meningkat apabila paparan swafoto yang bocor menambah kerumitan kepada barisan kamera yang dahulunya mampu dimiliki
Sep 07, 2024 am 09:34 AM
Peminat Fujifilm baru-baru ini sangat teruja dengan prospek X-T50, kerana ia mempersembahkan pelancaran semula Fujifilm X-T30 II berorientasikan bajet yang telah menjadi agak popular dalam kategori sub-$1,000 APS-C. Malangnya, sebagai pelancaran Fujifilm X-T50
Apakah maksud pemegang tempat dalam vue
May 07, 2024 am 09:57 AM
Dalam Vue.js, atribut pemegang tempat menentukan teks pemegang tempat bagi elemen input, yang dipaparkan apabila pengguna belum memasukkan kandungan, menyediakan petua atau contoh input dan meningkatkan kebolehcapaian borang. Penggunaannya adalah untuk menetapkan atribut pemegang tempat pada elemen input dan menyesuaikan penampilan menggunakan CSS. Amalan terbaik termasuk relevan dengan input, pendek dan jelas, mengelakkan teks lalai dan mempertimbangkan kebolehaksesan.
Samsung: Paparan baharu yang besar berdasarkan teknologi E Ink memaparkan warna dan berkomunikasi secara wayarles
Jun 19, 2024 pm 03:37 PM
Kami kerap melaporkan peranti berdasarkan paparan dengan dakwat elektronik, seperti e-pembaca. Teknologi ini menawarkan beberapa kelebihan: ia boleh dibaca dalam persekitaran terang tanpa lampu latar, dan ia hanya memerlukan kuasa apabila bertukar tanpa cahaya
Apakah maksud span dalam js
May 06, 2024 am 11:42 AM
Teg span boleh menambah gaya, atribut atau gelagat pada teks Ia digunakan untuk: menambah gaya, seperti warna dan saiz fon. Tetapkan atribut seperti id, kelas, dsb. Tingkah laku yang berkaitan seperti klik, tuding, dsb. Tandakan teks untuk pemprosesan atau petikan selanjutnya.
Apakah maksud rem dalam js
May 06, 2024 am 11:30 AM
REM dalam CSS ialah unit relatif berbanding saiz fon elemen akar (html). Ia mempunyai ciri-ciri berikut: relatif kepada saiz fon elemen akar, tidak dipengaruhi oleh elemen induk. Apabila saiz fon elemen akar berubah, elemen menggunakan REM akan melaraskan dengan sewajarnya. Boleh digunakan dengan mana-mana harta CSS. Kelebihan menggunakan REM termasuk: Responsif: Pastikan teks boleh dibaca pada peranti dan saiz skrin yang berbeza. Ketekalan: Pastikan saiz fon adalah konsisten di seluruh tapak web anda. Kebolehskalaan: Tukar saiz fon global dengan mudah dengan melaraskan saiz fon elemen akar.
Apakah nod dalam js
May 07, 2024 pm 09:06 PM
Nod ialah entiti dalam DOM JavaScript yang mewakili elemen HTML. Ia mewakili elemen tertentu dalam halaman dan boleh digunakan untuk mengakses dan memanipulasi elemen tersebut. Jenis nod biasa termasuk nod elemen, nod teks, nod ulasan dan nod dokumen. Melalui kaedah DOM seperti getElementById(), anda boleh mengakses nod dan mengendalikannya, termasuk mengubah suai sifat, menambah/mengalih keluar nod anak, memasukkan/menggantikan nod dan nod pengklonan. Traversal nod membantu menavigasi dalam struktur DOM. Nod berguna untuk mencipta kandungan halaman, pengendalian acara, animasi dan pengikatan data secara dinamik.
Dalam bahasa apakah pemalam penyemak imbas ditulis?
May 08, 2024 pm 09:36 PM
Pemalam penyemak imbas biasanya ditulis dalam bahasa berikut: Bahasa bahagian hadapan: JavaScript, HTML, CSS Bahasa bahagian belakang: C++, Rust, WebAssembly Bahasa lain: Python, Java
Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui
May 09, 2024 pm 02:43 PM
1. Mula-mula, buka ikon tetapan di sudut kiri bawah dan klik pilihan tetapan 2. Kemudian, cari lajur CSS dalam tetingkap lompat .
