div与span

div与span有什么区别
div单独占一行，span不会单独占一行
div是容器级的标签，而span是一个文本级的标签
容器级的标签有：div , h , ul , ol , dl , li ...
文本级的标签有：span , p , buis , del , em , ins ...
容器级的标签中可以嵌套其它所有标签
文本级的标签中只能嵌套文字/图片/超链接

CSS显示模式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML5+CSS3</title>
  6. <style>
  7.     * {
  8.         margin:0;
  9.         padding:0;
  10.         font-family: "Microsoft YaHei";
  11.     }
  12.     div {
  13.         display:inline;
  14.     }
  15.     span {
  16.         display:block;
  17.         background:green;
  18.         width:100px;
  19.         height:100px;
  20.     }
  21.     .cc {
  22.         background:blue;
  23.         width:200px;
  24.         height:200px;
  25.         display:inline-block;
  26.     }
  27. </style>
  28. </head>
  29. <body>
  30. <!--
  31. 在HTML中所有的标签分为两类：容器级与文本级
  32. 在CSS中将所有标签分为两类：块级元素与行内元素
  33. 1：什么是块级元素，什么是行内元素？
  34.     块级元素独占一行：div , h , ul , ol , dl , li , dt , dd , p
  35.     块级元素如果没有设置宽度就和父级元素一样宽；如果设置了宽高就和设置的一样宽高
  36.     行内元素不会独占一行：span , buis , strong , em , ins , del
  37.     行内元素如果没有设置宽度默认就和内容一样宽
  38.     行内元素是不可以设置宽度和高度的
  39. 2：行内块级元素
  40.     为了能够让元素既能够不独占一行，又可以设置宽度和高度，就出现了行内块级元素
  41. 3：显示模式的互相转换
  42.     设置元素的display属性：block 块级, inline 行内, inline-block 行内块级
  43. -->
  44. <div>这是DIV</div>
  45. <div>这是DIV</div>
  46. <span>这是SPAN</span>
  47. <span>这是SPAN</span>
  48. <p class="cc">这是P</p>
  49. <b class="cc">这是B</b>
  50. </body>
  51. </html>

　　

CSS的显示模式的更多相关文章

  1. 课时92.CSS元素显示模式转换（掌握）

    我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...

  2. CSS元素显示模式

    CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...

  3. 课时91.CSS元素显示模式（掌握）

    在HTML中HTML将所有的标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 1.什么是块级元素,什么是行内元素? 块级元素会独占一行 行内元素不会 ...

  4. CSS 标签显示模式

    标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 一.块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高 ...

  5. CSS——标签显示模式(display)

    非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用. 欧洲白人: 生活寒带或着是说常年温度较低 ...

  6. CSS【06】：CSS显示模式

    div和Span标签 作用:一般用于配合css完成网页的基本布局 <style> .header{ width: 980px; height: 100px; background: red ...

  7. CSS显示模式

    div和span标签 1.容器级的标签中可以嵌套其他所有的标签(div->一般用于配合CSS完成网页的基本布局.h.ul.ol.dl.li.dt.dd......),文本级的标签中只能嵌套文字/ ...

  8. 前端CSS技术全解（二）

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52813761 本文出自:[余志强的博客] 一.CSS三大特性 1)继 ...

  9. 前端基础-- CSS

    CSS知识 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).Css之车更丰富的文档外 ...

随机推荐

  1. C# 中颜色和名称样式对照表

    WPF中的画刷也一样适用 System.Windows.Media.Brushes.名称 (如:System.Windows.Media.Brushes.AliceBlue) :first-child ...

  2. 11-Python3从入门到实战—基础之生成器和迭代器

    Python从入门到实战系列--目录 切片 Python提供切片(Slice)操作符用来获取列表.元组等数据中的部分元素:如,读取列表 list[m:n]:表示获取m-n区间的元素 list[m:n: ...

  3. shell脚本--continue、break

    shell中的continue和break和其他语言中的使用方法一模一样:continue用于跳过本次循环,break用于中断本层的循环 下面是使用例子: #!/bin/bash #文件名:test. ...

  4. ActiveMQ应用(1)-安装及示例

    简介: Apache ActiveMQ ™ 是最流行最强大的开源消息及继承模式服务器.i Apache ActiveMQ 速度快,支持多种语言的客户端及代理,可便捷的使用企业集成模式,完整支持JMS1 ...

  5. CentOS7.5下MYSQL8.0.11

    MYsql的安装 1. 下载bundles 包 https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-1.el7.x86_64.rpm-bun ...

  6. Maven Archetype简介以及搭建

    为什么会写这篇文章,因为公司先在构建项目骨架都是用的 maven archetype ,身为一个上进的渣渣猿,自己还是有必要了解下这个东西的. Archetype介绍 Archetype 是一个 Ma ...

  7. CnPack实用功能推荐

    已经使用CnPack好几年了,这个插件太好了,现在离开它我都不会写代码了,现在将使用心得与大家分享一下: 1.代码助手非常好用,只需要输入几个字符后,自动出现提示列表,真是懒人的福音呀. 2.代码高亮 ...

  8. 将关系型数据库抽取成redis的思路

    思路是 先把id抽取出来形成一个·list表示数量 然后再把表变成键值对形式把id当做成键

  9. MVC DropDownList

    最近发现一个 MVC中绑定前台DropDownList , 并且设置默认选中项的简单方法. 直接上代码 方案一 Action:  ViewData["goodsTypeList"] ...

  10. day28 反射 属性操作 getattr hasattr setattr delattr

    反射 用字符串来对应其同名的属性或者方法,通过某种方法调用这个字符串来执行方法或者获取属性 网络编程的时候非常好用,是很重要的内容 先看个示例吧: class Teather: dic = { &qu ...