1.Html区块元素

  HTML可以通过<div>和<span>将元素组合起来

  大多数HTML元素被定义为块级元素内联元素

  而块级元素在浏览器显示时,通常会以新行来开始(或结束)。如:<h1>,<p>,<ul>,<table>

  内联元素在显示时通常不会以新行开始。如:<b>,<td>,<a>,<img>

2.<div>元素

  HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

  <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

  如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

  <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

默认情况下,浏览器通常会在<div>元素前后放置一个换行符。(可以通过css改变这种情况

  1.设置float

  设置float:left样式让div对象靠左,这样div会失去本身的宽度样式

     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
div{ float:left}
</style>
</head>
<body>
<div>第一个div盒子</div>
<div>第二个div盒子</div>
</body>
</html>

  2.设置display样式

  设置display:inline样式让div失去默认100%独占一行的宽度

  display:inline(让对象并排显示)

     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div并排实例 www.dvicss5.com</title>
<style>
div{ display:inline}
</style>
</head>
<body>
<div>第一个div盒子</div>
<div>第二个div盒子</div>
</body>
</html>

    2.1属性

属性   描述
align

left

right

center

justify

html5中不支持

3.<span>元素

  <span>元素是内联元素,可以作为文本的容器,没有特定的含义。当与CSS一起使用时,<span>元素可以用于为部分文本设置样式属性。

  3.1说明

  <span> 用于对文档中的行内元素进行组合。

  <span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

  <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

  

div、span的更多相关文章

  1. 让HTML标签、DIV、SPAN拥有focus事件和blur事件,聚焦和失焦

    DIV和其他普通标签是不具有onfocus和onblur事件的.INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在IN ...

  2. div、span绑定内容改变事件

    内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

  3. 1、前端--HTML简介、head内常见标签、body内常见标签(特殊符号、div、span、a、img、列表、表格table、表单form)、标签两大属性

    今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...

  4. HTML中Div、span、label标签的区别

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

  5. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

  6. div、span内容超出省略号

    span设置部分省略...: span{         overflow: hidden;         text-overflow: ellipsis;         -o-text-over ...

  7. 真正让HTML标签、DIV、SPAN拥有onfocus和onblur,聚焦和失焦

    转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的, ...

  8. Jquery系列:设置div、span等dom结点的内容,jquery中没有innerText、innerHtml

    发现如果我在div或者其他非表单的标签中赋值,原本用普通的js就直接document.getElementById("id").innerHtml(或者其他几个)就可以了. 但是在 ...

  9. (4)《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型;div与span;<a>元素的链接色;伪类

    1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...

随机推荐

  1. flex 用footerdatagrid做列的汇总合计

    之前用flex+c#做的一个项目中,有涉及到列的汇总计算.可以用到的方法很多,这里列举了一种,在前台flash中用footerdatagrid结合labelfunction的用法即可实现.当然,下面的 ...

  2. SSMS2008插件开发(1)--介绍

    原文:SSMS2008插件开发(1)--介绍 SSMS2008就是Microsoft Sql Server Management Studio 2008的简称.许多人叫做SQL2008或SQL SER ...

  3. Bootstrap 使用清单组组件创建价格表

    价格表是销售产品或服务的任何网站的主要成分之一.即使 Boortstrap 3(与之前的版本一样)没有直接提供价格表组件,但是它提供了列表组组件.设计该组件的目的是为了渲染复杂的定制内容.利用这个特征 ...

  4. MVC 在控制器中获取某个视图动态的HTML代码

    ASP.NET MVC 在控制器中获取某个视图动态的HTML代码   如果我们需要动态的用AJAX从服务器端获取HTML代码,拼接字符串是一种不好的方式,所以我们将HTML代码写在cshtml文件中, ...

  5. sqlite3结合ios开发

    简介:         SQLite是遵守ACID的关系数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp创建的公有领域项目. 不像常见的客户端/服务器结构范例,SQLite引 ...

  6. MAKE gnu

    GNU Make 学习系列一:怎样写一个简单的Makefile 编程通常遵循一个相当简单的程序:编辑源文件,编译源代码成可执行的格式,调试结果.尽管将源代码翻译成可执行程序是常规的过程,如果做的不正确 ...

  7. 企业架构研究总结(42)——企业架构与建模之ArchiMate详述(中)

    2.4 技术层模型元素 技术层模型元素包括了企业在信息基础设施方面(企业中基本的软硬件环境,包括物理设备.系统软件等为信息化提供基本支持的设施)的各种概念元素,以及他们之间的关系.与应用层模型元素相类 ...

  8. 新部署的linux web服务器error Host ‘*.*.*.*’ is not allowed to connect to this MySQL server

    最近上头交给我个任务,把WINDOWS平台下开发的网站,部署在LINUX环境上. 把mysql安装好了,所有表单都导入没问题,然后代码都放在tomcat下的webapps文件夹下了,主页 面可以正常显 ...

  9. 重构MVC多条件分页解决方案

    重构MVC多条件+分页解决方案 为支持MVC的验证,无刷新查询,EF,以及让代码可读性更强一点,所以就重构了下原来的解决方案. 这里就简单讲下使用方法吧: Model: 继承PagerBase:  S ...

  10. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现)

    “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现) 一.前三篇的内容是否对您有帮助呢?如果有的话,请您继续关注这篇吧,这篇主要是实现”用户管理“的 ...