Rumah hujung hadapan web tutorial css 行内元素与块级元素有什么区别

行内元素与块级元素有什么区别

May 07, 2020 am 09:15 AM
elemen aras blok elemen sebaris

行内元素与块级元素有什么区别

块级元素

1、总是从新行开始

2、高度、行高、外边距以及内边距都可以控制

3、宽度默认是浏览器的100%

4、可以容纳内联元素以及其他块元素

行内元素

1、和相邻元素在一行上

2、高、宽无效,但是水平方向的padding和margin可以设置,垂直方向无效

3、默认宽度就是它本身内容的宽度

4、行内元素只能容纳文本或其他行内元素(a除外)

(视频教程推荐:css视频教程

注意:

1、只有文字才能组成段落,因此p里面不能放置块级元素,同理还有这些标签h1-h6,dt等,它们都是文字块级标签,里面不能放置其他块级元素

2、链接里面不能再放置链接

块级元素和行内元素的区别

块级元素的特点:

1、总是从新行开始

2、高度、行高、外边距以及内边距都可以控制

3、宽度默认是浏览器的100%

4、可以容纳内联元素以及其他块元素

行内元素的特点:

1、和相邻行内元素在一行上

2、高、宽无效,但是水平方向的padding和margin可以设置,垂直方向无效

3、默认宽度就是它本身内容的宽度

4、行内元素只能容纳文本或其他行内元素(a除外)

行内块标签 inline-block

在行内元素中有几个特殊的标签--、,可以对他们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

特点:

1、和相邻行内元素(行内部)在一行上,但是之间会有空白间隙;

2、默认宽度是它本身内容的宽度

3、高度、行高、外边距以及内边距都可以控制

标签显示模式转换 display

块转行内:display:inline;

行内转块:display:block;

块、行内元素转换为行内块:display:inline-block;

推荐教程:css快速入门


Atas ialah kandungan terperinci 行内元素与块级元素有什么区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1664
14
Tutorial PHP
1268
29
Tutorial C#
1246
24
Apakah elemen sebaris dan elemen peringkat blok? Apakah elemen sebaris dan elemen peringkat blok? Aug 17, 2023 am 11:33 AM

Elemen sebaris termasuk div, p, h1-h6, ul, ol, li, jadual, bentuk, dsb. elemen peringkat blok termasuk span, a, img, strong, em, input, label, dll.; Ciri-ciri kedua-dua elemen: 1. Elemen sebaris akan menduduki satu baris, secara automatik mengisi lebar bekas induk, boleh menetapkan lebar, ketinggian, jidar dalam dan luar serta atribut lain, dan boleh mengandungi elemen peringkat blok dan elemen sebaris yang lain. ; 2. Elemen sebaris tidak akan Ia akan menduduki garisan eksklusif, lebar dan ketinggian ditentukan oleh kandungan, dan margin dalam dan luar hanya mempengaruhi susunan elemen itu sendiri, dsb.

Apakah perbezaan antara elemen sebaris dan elemen peringkat blok? Apakah perbezaan antara elemen sebaris dan elemen peringkat blok? Oct 16, 2023 am 09:51 AM

Terdapat lima perbezaan antara elemen sebaris dan elemen peringkat blok: "model kotak", "susunan", "paparan kandungan", "kedudukan relatif" dan "saiz lalai": 1. Elemen sebaris tidak menghasilkan kotak, lebar dan ketinggian bebas Ditentukan oleh kandungan, elemen peringkat blok akan menghasilkan bingkai segi empat tepat bebas, dan atribut seperti lebar, tinggi, jidar dan padding boleh ditetapkan 2. Elemen sebaris disusun secara mendatar pada baris yang sama, manakala elemen peringkat blok akan ditekan dari atas ke bawah. Susun mengikut urutan;

Perbezaan antara elemen sebaris dan elemen peringkat blok: pemahaman yang mendalam tentang klasifikasi elemen dalam HTML Perbezaan antara elemen sebaris dan elemen peringkat blok: pemahaman yang mendalam tentang klasifikasi elemen dalam HTML Dec 23, 2023 am 10:01 AM

Perbezaan antara elemen sebaris dan elemen peringkat blok: Pemahaman mendalam tentang klasifikasi elemen dalam HTML Dalam HTML, elemen boleh dibahagikan kepada dua kategori: elemen sebaris dan elemen peringkat blok. Memahami perbezaan mereka adalah sangat penting untuk menguasai reka letak dan gaya HTML dengan betul. Artikel ini akan memberikan pemahaman yang mendalam tentang ciri-ciri elemen sebaris dan elemen peringkat blok, dan memberikan contoh kod khusus. Elemen sebaris Elemen sebaris ialah elemen yang dipaparkan sebaris secara lalai dalam dokumen HTML. Mereka tidak menduduki keseluruhan baris, tetapi kelihatan rapat dalam satu baris berdasarkan cara aliran dokumen disusun. Biasa dalam industri

html行内元素和块状元素有哪些 html行内元素和块状元素有哪些 Feb 20, 2021 pm 04:03 PM

html行内元素有:a(锚点元素)、b(粗体)、br(换行)、code、em(强调)、font(字体设置)、i(斜体)、img(图片)、input(输入框)、span、strong(粗体强调)、textarea、u等;块状元素有:address(地址)、blockquote(块引用)、center(居中对齐块)、div、h1~h6(标题)、hr(水平分隔线)、p、ul、ol等。

Atribut margin tidak menjejaskan elemen sebaris Atribut margin tidak menjejaskan elemen sebaris Feb 18, 2024 pm 04:36 PM

Kesan jidar pada elemen sebaris adalah berbeza daripada unsur tahap blok. Dalam elemen sebaris, atribut jidar hanya mempengaruhi jidar atas dan bawah menegak, bukan jidar kiri dan kanan mendatar. Sebagai contoh, jika terdapat elemen perenggan dalam HTML, kita boleh menetapkan beberapa gaya untuknya dan memerhatikan kesan atribut margin padanya. Kod HTML kelihatan seperti ini:

Contoh biasa unsur sebaris dan peringkat blok CSS: memberikan anda pemahaman yang lebih mendalam tentangnya Contoh biasa unsur sebaris dan peringkat blok CSS: memberikan anda pemahaman yang lebih mendalam tentangnya Dec 23, 2023 am 11:58 AM

Contoh biasa elemen sebaris CSS dan elemen peringkat blok: Untuk memberi anda pemahaman yang lebih mendalam tentangnya, contoh kod khusus diperlukan Pengenalan: Dalam CSS, elemen sebaris dan elemen peringkat blok ialah dua jenis elemen yang sering kita temui. Untuk reka bentuk dan reka bentuk gaya halaman web, adalah sangat penting untuk memahami perbezaan dan penggunaan elemen sebaris dan elemen peringkat blok. Artikel ini akan memperkenalkan elemen sebaris dan elemen peringkat blok dalam CSS dengan contoh kod khusus untuk membantu pembaca memahami ciri dan penggunaannya dengan lebih mendalam. 1. Elemen sebaris Elemen sebaris (inlineelem

Apakah elemen sebaris dan peringkat blok? Apakah elemen sebaris dan peringkat blok? Nov 24, 2023 pm 01:57 PM

Elemen sebaris termasuk a, span, strong, b, em, i, label, img, input, select, textarea, button, abbr, cite, code, big, small, sub, sup, dsb. Elemen peringkat blok termasuk div, p, h1-h6, borang, ul, ol, dl, dt, dd, li, jadual, tr, td, th, hr, petikan blok, alamat, menu, pra, dsb.

Apakah elemen sebaris dan elemen peringkat blok dalam html? Apakah elemen sebaris dan elemen peringkat blok dalam html? Oct 16, 2023 am 09:57 AM

Elemen sebaris dan elemen peringkat blok yang biasa digunakan dalam HTML ialah: 1. Elemen peringkat blok termasuk semantik seperti <div>, <p>, <ul>, <ol>, <li>, <h1>~<h6> , dan teg <header>; 2. Elemen sebaris termasuk teg seperti <span>, <a>, <strong>, <em>, <img> dan <input>.

See all articles