<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        span{

            /*display: block;*/

            display: inline-block;

            width: 150px;

            height: 30px;

            background: yellowgreen;

        }

        div{

            /*display: inline;*/

            display: inline-block;

            /*width: 300px;*/

            /*height: 30px;*/

            background: antiquewhite;

        }

        p{

            width: 200px;

            height: 150px;

            background: aqua;

            display: none;

        }

    </style>

</head>

<body>

    <div>同学们 晚上好</div>

    <div>同学们 晚上好</div>

    <div>同学们 晚上好</div>

    <div></div>

    <span>同学们 晚上好 123</span>

    <span>同学们 晚上好</span>

    <span>同学们 晚上好</span>

    <p>

        <span>ahhh</span>

    </p>

<!--

    块级元素div  display:block;

    可以包含任何块和行内元素

    独占一行，支持设置宽高

    如果没有设置宽高，高度由内容撑开，宽度默认浏览器宽度

    没有内容，在网页上肉眼看不到东西，但是审查元素，宽度是浏览器宽度，高度0

    行内（内联）元素span   display:inline;

    可以和其他行内元素位于同一行

    行内元素不要包块级元素

    不支持设置宽高

     内容撑开宽高

     行内块元素  display:inline-block;

     块级元素可以横排展示

     行内元素可以设置宽高

     元素既能设置宽高 也能排在一排

     display:none

      隐藏元素,包括他的子标签，在页面中不占位置，等同于消失了

    -->

</body>

html-div+span-4的更多相关文章

  1. div/span等获取焦点问题(tabindex属性的简单理解)

    1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...

  2. HTML基础之HTML标签-html header（meta,title） html body(p,br,h,form,div,span,input,lable)

    摘自:http://www.imdsx.cn/index.php/2017/07/27/html0/ 一.HTML标签 <!DOCTYPE html> <!--标准的html规则,类 ...

  3. HTML中的Div Span label的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  4. CSS 让div,span等块级、非快级元素排列在同一行

    让div,span等块级.非快级元素排列在同一行 by:授客 QQ:1033553122 例子:让两个div排列在同一行 给div添加float样式 <!DOCTYPE html> < ...

  5. 10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）

    一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...

  6. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  7. div span

    无牵无挂,不带任何样式,因此经常使用div完成整体样式的构建,span完成细微样式的构建. div为块级元素,span为行内元素. 使用div完成显示区域的居中.左右浮动等,完成整体的样式布局,然后在 ...

  8. 通过DIV+span方式模拟进度条的实现方法

    上上周用FusionCharts做报表时,有个图是进度条的形式,其实在FusionCharts 3.0之后已经支持了(Linear Gauge),可惜现有系统用的还是1.2.3版本的,重新引入新版本有 ...

  9. jquery给div,Span, a ，button, radio 赋值取值

    jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html(&quo ...

  10. [HeadFirst-HTMLCSS入门][第十章div,span]

    新元素 <div>逻辑容器 能进行分组,等于用一个大的盒子进行包装 <span> 内联字符的逻辑分组 text-align 改变所有内联元素位置. 属性 center 居中 行 ...

随机推荐

  1. python时间日期格式化和反格式化

    strftime()和strptime()行为 date,datetime和time对象都支持一种 strftime(format)方法,以创建一个表示显式格式字符串控制下的时间的字符串.从广义上讲, ...

  2. swift 实践- 07 -- UISwitch 开关

    import UIKit class ViewController: UIViewController { var uiswitch: UISwitch? override func viewDidL ...

  3. ORACLE in与exists语句的区别

    select * from A where id in(select id from B) 以上查询使用了in语句,in()只执行一次,它查出B表中的所有id字段并缓存起来.之后,检查A表的id是否与 ...

  4. Confluence 6 尝试从 XML 备份中恢复时解决错误

    错误可能是因为数据库突然不可访问而产生.也有可能是你备份文件有问题,你需要找到你 XML 备份文件中违反数据库规定的记录修改这个记录后再创建一个新的 XML 备份: 在实例开始恢复的时候,请按照下面的 ...

  5. Confluence 6 数据库整合的限制

    数据库整合的限制 注意: Confluence 自带的 XML 方式导出方法并不适用于备份和整合大数据集.这里有一些第三方的数据库工具你可以使用能够帮助你对大数据集进行备份和整合.如果你在选择正确工具 ...

  6. Confluence 6 升级自定义的站点和空间应用你的自定义布局

    当你升级你的 Confluence 到其他一个主要的 Confluence 发行版本的时候,你需要手动应用你修改过的任何全局或者空间级别的布局.除非有特殊的声明,针对一些非主要的 Confluence ...

  7. 后RCNN时代的物体检测及实例分割进展

    https://mp.weixin.qq.com/s?__biz=MzA3MzI4MjgzMw==&mid=2650736740&idx=3&sn=cdce446703e69b ...

  8. 分布式Dubbo快速入门

    目录 Dubbo入门 背景 zookeeper安装 发布Dubbo服务 Dubbo Admin管理 消费Dubbo服务 抽取与依赖版本管理 Dubbo入门 Editor:SimpleWu Dubbo是 ...

  9. mabatis的批量新增sql 初级的 初级的 初级的

    简单描述:做开发的时候,会遇到一次插入好多条记录,怎么做好呢? 解决思路:循环insert啊!  哪凉快那呆着去←!←  这样会增加数据库开销的,当然不能这么干了,要在sql上下功夫.看代码,一下就明 ...

  10. 《剑指offer》 链表中倒数第k个节点

    本题来自<剑指offer> 链表中倒数第k个节点 题目: 输入一个链表,输出该链表中倒数第k个结点. 思路: 倒数第k个节点,而且只能访问一遍链表,定义两个节点,两者之间相差k个距离,遍历 ...