<!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. mysql运维

    反反复复装了好多次的mysql,上学的时候从来没有考虑过稳定性,装起来,能跑通,增删改查没有问题万事大吉.参与工作后参与平台搭建和维护,平台的稳定性是首先必须要考虑的问题,之前装mysql使用经历了密 ...

  2. (六)STL仿函数functor

    1.仿函数为算法服务,特点是重载操作符() 2.一共分为3大类,包括算术类,逻辑运算类,相对关系(比较大小):都继承了binary_function 3.仿函数的一些调用示例,其中右边的仿函数没有继承 ...

  3. phpstudy添加redis扩展

    操作系统   windows: 直接贴步骤记录下 一.      划重点,运行phpinfo(), 观察第四行 x86  好了记住这个 x86 三.    http://pecl.php.net/pa ...

  4. laravel CSRF 保护

    在开始之前让我们来实现上述表单访问伪造的完整示例,为简单起见,我们在路由闭包中实现所有业务代码: Route::get('task/{id}/delete', function ($id) { ret ...

  5. 在线版区间众数 hzw的代码。。

    /* 查询区间众数,要求强制在线 设有T个块 1.众数只可能在大块[L,R]里或者两端[l,L) (R,r]里出现 2.大块的众数只要预处理打表一下即可,复杂度n*T(这样的区间有T*T个) 3.两端 ...

  6. AI学习吧-结算中心

    结算中心流程 在结算中心中,主要是对用户添加到购物车商品的结算,由于用户可能添加了多个课程,但是,结算时会选择性的进行支付.在结算时会选中课程id,和对应的价格策略.在后台,首先会对用户进行校验,验证 ...

  7. C/C++返回内部静态成员的陷阱(转)

    在我们用C/C++开发的过程中,总是有一个问题会给我们带来苦恼.这个问题就是函数内和函数外代码需要通过一块内存来交互(比如,函数返回字符串),这个问题困扰和很多开发人员.如果你的内存是在函数内栈上分配 ...

  8. Senparc.Weixin微信开发(3) 自定义菜单与获取用户组

    自定义菜单 代码参考:http://www.cnblogs.com/szw/p/3750517.html 还可以使用他们官网的自定义:https://neuchar.senparc.com/User/ ...

  9. .NetCore 下开发独立的(RPL)含有界面的组件包 (五)授权过滤参数处理

    .NetCore 下开发独立的(RPL)含有界面的组件包 (一)准备工作 .NetCore 下开发独立的(RPL)含有界面的组件包 (二)扩展中间件及服 务 .NetCore 下开发独立的(RPL)含 ...

  10. [转]git 删除远程仓库文件

    来源:https://www.jianshu.com/p/de75a9e3d1e1 git删除远程文件夹或文件的方法 项目开发初期由于.gitignore 文件配置不正确很有可能导致某些不需要的目录上 ...