div、span
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的更多相关文章
- 让HTML标签、DIV、SPAN拥有focus事件和blur事件,聚焦和失焦
DIV和其他普通标签是不具有onfocus和onblur事件的.INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在IN ...
- div、span绑定内容改变事件
内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...
- 1、前端--HTML简介、head内常见标签、body内常见标签(特殊符号、div、span、a、img、列表、表格table、表单form)、标签两大属性
今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...
- HTML中Div、span、label标签的区别
div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
- div、span内容超出省略号
span设置部分省略...: span{ overflow: hidden; text-overflow: ellipsis; -o-text-over ...
- 真正让HTML标签、DIV、SPAN拥有onfocus和onblur,聚焦和失焦
转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的, ...
- Jquery系列:设置div、span等dom结点的内容,jquery中没有innerText、innerHtml
发现如果我在div或者其他非表单的标签中赋值,原本用普通的js就直接document.getElementById("id").innerHtml(或者其他几个)就可以了. 但是在 ...
- (4)《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型;div与span;<a>元素的链接色;伪类
1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...
随机推荐
- Asterisk 未来之路3.0_0007
原文:Asterisk 未来之路3.0_0007 Modules Asterisk 是基于模块构建的.一个模块提供某个特定的功能,它是动态的被装载.比如:信道驱动(chan_sip.so),或可以连接 ...
- jQuery MiniUI
今天找到一个关于jQuery的又一个不错的UI,特此保存下.备用. http://www.miniui.com/
- 【C#版本详情回顾】C#2.0主要功能列表
泛型 优点:类型安全/重用代码/提升性能 应用:泛型接口.泛型类.泛型类型参数.泛型方法.泛型事件和泛型委托 命名空间:System.Collections.Generic 特性:泛型约束,defau ...
- 【推荐】30个Matlab视频教程合集(含GUI视频教程)下载
自己收集别人网盘上存的资源,分享一下[点击文件名可得到下载地址] Matlab 7.8 基础视频教程 实例1 数据传递和多窗口编程_avi.zip 205.11 MB Matlab ...
- c#后台输出javascript语句和一些通用验证的类
大家在用MVC的时候,经常会用到MODEL层的验证或者是正则表达式,我这边看到了一篇不错的文章,转载过来http://blog.csdn.net/accpxcb/article/details/311 ...
- SZU:B47 Big Integer II
Judge Info Memory Limit: 32768KB Case Time Limit: 10000MS Time Limit: 10000MS Judger: Normal Descrip ...
- [转]Libev教程
libev Table of Contents 1 libev 1.1 About The Code 1.2 EventLoop 1.3 Watcher 1.4 How it works 1.4.1 ...
- C语言基础复习总结
C语言基础复习总结 大一学的C++,不过后来一直没用,大多还给老师了,最近看传智李明杰老师的ios课程的C语言入门部分,用了一周,每晚上看大概两小时左右,效果真是顶一学期的课,也许是因为有开发经验吧, ...
- api的安全问题
在给第三方系统提供api时,我们需要注意下安全问题. 比较常见的接口有http接口.以http接口为例.我们需要注意的几点: 1.只有被允许的系统才可以调用api 2.如果http请求被截获.也不 ...
- IL代码完结篇
读懂IL代码就这么简单(三)完结篇 一 前言 写了两篇关于IL指令相关的文章,分别把值类型与引用类型在 堆与栈上的操作区别详细的写了一遍这第三篇也是最后一篇,之所以到第三篇就结束了,是因为以我现在 ...