Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > div和span的区别_html/css_WEB-ITnose

div和span的区别_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:32:43
Original
849 people have browsed it

是一个块级元素，我们可以把它比喻成盒子，它没什么实际语义能用到很多地方，独占一行不能和其它元素在一行，它还能把
和”装在盒子里”，主要用来组合段落和布局。 

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>div</title>    <style>        div.b{width:500px}        div.b span{color:blue}        div.b div{float: right}    </style></head><body><div class="b">    <p>我是一个<span>被span包含的段落</span></p>    <div>        <p>我是在div里的div</p>    </div></div></body></html>
Copy after login
<strong>*h1是块级元素的</strong>
Copy after login

是行内元素，我们可以把它比喻成袋子，它也没有实际语义也能用到很多地方，如果没有样式它在视觉上和

一样,能和其它元素在一行，它的内容有多大宽度就有多宽，不能再里面添加

，它能把段落中的某一段”装起来”定义样式，能呈现很好的视觉效果。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>span</title>    <style>        div.a span{color:red}    </style></head><body><div class="a">    <ol>        <li><span>2015.11.20</span>财务</li>        <li>2015.11.20<span>人事</span></li>        <li>2015.11.20销售</li>    </ol>    <ul>        <li>我</li>        <li><span>是</span></li>        <li>谁</li>    </ul></div></body></html>
Copy after login
<strong>*ol、li、ul是块级元素</strong>
Copy after login

Related labels：
div和span的区别
source：php.cn
Previous article：Bootstrap_Javascript_弹窗_html/css_WEB-ITnose Next article：Bootstrap_Javascript_选项卡_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to use CSS selectors to target div elements containing specific attributes or tags? I'm working on a POS system that generates a website. Most of the code is proprietary so I...
From 2024-04-03 22:25:59
0
1
277
WooCommerce Checkout - Validate user roles and cart contents I'm having a challenge with WooCommerce's checkout process. I use the "B2BforWooComme...
From 2024-04-03 11:58:52
0
1
475
What is the difference between HTML tags <a></a> and <a href=""></a>? Some websites use [url]website address[/url] in their text area and cannot add anchor text...
From 2024-04-02 22:46:16
0
2
403
How to search title and use another column to check uniqueness I have some scraped product data in the database and I want to use it on my website. I wan...
From 2024-04-02 21:49:55
0
1
375
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template