masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > 在HTML的网页布局里div与span有什么区别

在HTML的网页布局里div与span有什么区别

php中世界最好的语言
Lepaskan： 2017-12-01 15:03:22
asal
2393 orang telah melayarinya

很多刚入行的朋友不是很懂这俩个标签的区别，可能大家认为SPAN也是一块，DIV也是一块，同样的作用为啥有俩个标签呢？本篇文章就给大家解答这个疑惑。

DIV与SPAN的区别与特点

以下是在没有对开发网页页面设置css样式时候情况下，系统默认情况下的介绍
div与span区别
div占用的位置是一行，
span占用的是内容有多宽就占用多宽的空间距离

分析：从上图很容易知道“我是内容一；用的div”和“我是内容二；用的div”两个内容外部用的是

标签，他们得到样式是占用了一排空间（相当于换行一样）；而“我是内容三；用的span”和“我是内容四；用的span”则，文字内容有多宽，就占用多宽距离，使用标签和不使用一样效果。

span标签小结  

在网页开发的时候使用div和span都可以，通常可以理解为没有什么区别。但注意的是div占用一行，span不会占用一行，内容占多大宽度，span就有多宽。

扩展与提升

div内的span无需命名css选择器伪类，例子如下
如果div的class为yangshi，则对内的span设置css属性则，代码如下
.yanshi span{属性及属性值}


相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

CSS里的盒子模型的种类区别

Css3制作动态开关的效果的实现步骤

CSS3的content属性实现步骤

Atas ialah kandungan terperinci 在HTML的网页布局里div与span有什么区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
html span apa
sumber：php.cn
Artikel sebelumnya：css里的font文字怎么设置 Artikel seterusnya：CSS的文本字体颜色如何设置
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
Isu terkini
Perwakilan acara Javascript dengan pemilih dan kanak-kanak yang tidak diketahui Saya mempunyai pemilih dinamik (linkTrigger) yang sepatutnya menangkap klik pada elemen. S...
daripada 2024-04-03 23:39:19
0
1
420
Adakah mungkin untuk mempunyai beberapa kelas span pada baris yang sama tanpa menggunakan div s? Saya mahu setiap teks mempunyai warna yang berbeza, jadi saya menggunakan beberapa kelas s...
daripada 2024-04-03 11:17:18
0
1
360
Paparkan kaunter inventori di berbilang lokasi pada halaman yang sama Skrip ini berfungsi hebat sebagai kira detik saham, tetapi saya tidak boleh memaparkannya ...
daripada 2024-04-02 14:25:38
0
2
2529
Bagaimana untuk mengulangi teg rentang menggunakan gelung dalam HTML/JavaScript? Bagaimana untuk memampatkan begitu banyak tag span? Saya cuba menjadikannya sekecil mungki...
daripada 2024-03-31 16:15:40
0
1
341
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan