div与span

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

CSS显示模式

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>HTML5+CSS3</title>

<style>

    * {

        margin:0;

        padding:0;

        font-family: "Microsoft YaHei";

    }

    div {

        display:inline;

    }

    span {

        display:block;

        background:green;

        width:100px;

        height:100px;

    }

    .cc {

        background:blue;

        width:200px;

        height:200px;

        display:inline-block;

    }

</style>

</head>

<body>

<!--

在HTML中所有的标签分为两类：容器级与文本级

在CSS中将所有标签分为两类：块级元素与行内元素

1：什么是块级元素，什么是行内元素？

    块级元素独占一行：div , h , ul , ol , dl , li , dt , dd , p

    块级元素如果没有设置宽度就和父级元素一样宽；如果设置了宽高就和设置的一样宽高

    行内元素不会独占一行：span , buis , strong , em , ins , del

    行内元素如果没有设置宽度默认就和内容一样宽

    行内元素是不可以设置宽度和高度的

2：行内块级元素

    为了能够让元素既能够不独占一行，又可以设置宽度和高度，就出现了行内块级元素

3：显示模式的互相转换

    设置元素的display属性：block 块级, inline 行内, inline-block 行内块级

-->

<div>这是DIV</div>

<div>这是DIV</div>

<span>这是SPAN</span>

<span>这是SPAN</span>

<p class="cc">这是P</p>

<b class="cc">这是B</b>

</body>

</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. Popush End

    coconut: (咳咳)作为一名后台开发者,我觉得自己在这次作业完成中最大的收获就是跟node.js的异步模型打交道.首先我得出了一个这样的结论:异步模型能够提高服务器的高性能并发请求,但是却加大了 ...

  2. rabbitMq实现与zookeeper类似的watcher功能

    场景:A.B.C.D(可以是一个机器的不同进程,也可以是不同机器的进程)启动了相同的项目,使用同一个数据库.但是,如果A修改了数据库的数据,需要B.C.D在很短的时间能够知道数据库发生了修改.当然可以 ...

  3. 《Linux内核分析》第六周学习小结

    进程的描述和进程的创建 一．进程的描述 进程描述符task_struct数据结构: (1)操作系统的三大功能: 进程管理.内存管理.文件系统 (2)进程的作用: 将信号.进程间通信.内存管理和文件系统 ...

  4. SQL大杂烩

    DML 语句(数据操作语言)Insert.Update. Delete.Merge DDL 语句(数据定义语言)Create.Alter. Drop.Truncate DCL 语句(数据控制语言)Gr ...

  5. Maven遇到github引用的项目有bug怎么办？

    Maven遇到github引用的项目有bug,自己想要修复/作者已经修复了但是还没有版本出来. 一个maven的做法 git clone 该项目(可能直接下载zip比较快). 在项目中mvn inst ...

  6. leetcode: 638.大礼包

    题目描述: https://leetcode-cn.com/problems/shopping-offers/ 解题思路: 这类求最大最小的问题首先想到的就是用DP求解. 这题还用到了递归,首先计算单 ...

  7. 第三个spring冲刺总结（附团队贡献分）

    基于调查需求下完成的四则运算,我们完成了主要的3大功能. 第一,普通的填空题运算,这个是传统的运算练习方式,团队都认为这个选项是必要的,好的传统要留下来,在个人经历中,填空练习是一个不错的选择. 第二 ...

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

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

  9. php配置虚拟主机

    在httpd.conf的目录下,新建一个配置文件virtualhost-host.conf,添加虚拟主机配置 <VirtualHost *:80> DocumentRoot "E ...

  10. ORA-01654 ： 表空间不足

    参考: Oracle表空间不足ORA-01654 查看表空间和表的使用率 ORA-01654 索引 无法通过 表空间扩展 Oracle 查看表空间的大小及使用情况sql语句 一.基础查询 1.查看表空 ...