博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【CSS】-----div 和 span的区别
阅读量:6535 次
发布时间:2019-06-24

本文共 825 字,大约阅读时间需要 2 分钟。

hot3.png

div和span

div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。

CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。

 

1                <div>

2                       <h3>中国主要城市</h3>

3                       <ul>

4                              <li>北京</li>

5                              <li>上海</li>

6                              <li>广州</li>

7                       </ul>

8                </div>

div在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,div中的所有元素是一个小区域。

 

div标签是一个容器级标签,里面什么都能放,甚至可以放div自己

span也是表达“小区域、小跨度”的标签,但是是一个“文本级”的标签。

就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

span里面是放置小元素的,div里面放置大东西的:

1                              <p>

2                                     简介简介简介简介简介简介简介简介

3                                     <span>

4                                            <a href="">详细信息</a>

5                                            <a href="">购买</a>

6                                     </span>

7                              </p>

div标签是最最重要的布局标签,至于class是什么意思,下午说:

1                <div class="header">

2                       <div class="logo"></div>

3                       <div class="nav"></div>

4                </div>

5                <div class="content">

6                       <div class="guanggao"></div>

7                       <div class="dongxi"></div>

8                </div>

9                <div class="footer"></div>

所以,我们亲切的称呼这种模式叫做“div+css”。div标签负责布局,负责结构,负责分块。css负责样式。

 

转载于:https://my.oschina.net/lsl1991/blog/1631710

你可能感兴趣的文章
ipsec的***在企业网中的经典应用
查看>>
过来人谈《去360还是留在百度?》
查看>>
mysql备份工具innobackupex,xtrabackup-2.1安装,参数详解
查看>>
【复制】slave筛选复制之二(create/drop table语句)
查看>>
Movie Store OpenCart 自适应主题模板 ABC-0249
查看>>
RedHat linux YUM本地制作源
查看>>
apache端口占用问题
查看>>
本地Office Project计划表同步到SharePoint2013任务列表的权限问题
查看>>
Windows2008 R2 GAC权限问题
查看>>
洛谷——P1469 找筷子
查看>>
几句话就能让你明白:网络地址转换(NAT)
查看>>
springboot项目自定义注解实现的多数据源切换
查看>>
特此说明
查看>>
使用flume替代原有的scribe服务
查看>>
用脚本来定制ESXI安装镜像
查看>>
微软企业级加解密解决方案MBAM架构
查看>>
没有苦劳,只有功劳!
查看>>
基于ThinkPHP写的一个简单的CMS系统
查看>>
Exchange 2010 DAG local and Site DR/Failover and Fail back
查看>>
LigerUI - 树表格的数据来自Server
查看>>