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. 硬盘安装Archlinux「2013-12-26」

    按照Archlinux的中文WIKI安装完成,最后安装引导失败.原因未知. 折腾的脑袋好大,本来都要放弃了,幸好在贴吧发帖求助,吧友@atmouse耐心热心的帮助 最后重启成功启动.帖子地址:http ...

  2. 安装Visual Studio 2010 - 初学者系列 - 学习者系列文章

    本文讲述如何安装Visual Studio 2010开发工具. 首先,通过下列地址获取Visual Studio 2010的副本 1.开始页面 2.欢迎页 3.这里选择 自定义 ,选择安装路径 4.这 ...

  3. 【工作笔记四】去掉a标签超链接的虚线框的方法

    a{ blr:expression(this.onFocus=this.blur()); /* IE Opera */ outline:none; /* FF Opera */ } a:focus{ ...

  4. Oracle Database Instant Client 11g 32位和64位 安装包发布

    Oracle Database Instant Client 11g 32位和64 Oracle Database Instant Client 11g 11.2.0.3.0 Instant Clie ...

  5. PHP中的表单提交和获取

    在php中表单提交的方式有两种: 1.post提交,这种安全性较高. 2.get提交,他提交的是一个url地址,因此在从地址上面就可以看到许多信息,因此不安全. 每个表单<form>后面都 ...

  6. Java 感知Mysql存储过程变量数量

    在项目中,可能会遇到sybase 移植到 mysql的情况,因为sybase 支持存储过程的可变参数,而mysql不能支持,所以,在调用mysql的时候,需要感知存储过程到底有几个参数,来合理的配置参 ...

  7. SignalR 2.0 入门与提高

    SignalR 2.0 入门与提高 SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP ...

  8. 不是技术牛人，如何拿到国内IT巨头的Offer【转】

    转:http://blog.csdn.net/lsldd/article/details/13506263 不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛人 ...

  9. SecureCRT退出全屏方法

    今天在使用SecureCRT的过程中,无意点了全屏,导致SecureCRT连接某台服务器的seesion全屏.后来想退出全屏,SecureCRT没有任何提示,上网查了一下资料说: 退出全屏的命令是AL ...

  10. ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇

    由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——实践篇 在由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——理论篇中描述了一下ASP.NET新手的三个问题及相关的HTTP协议 ...