css布局之div + span 以及盒模型

原创 2016年08月28日 22:19:28

本篇主要介绍div + span 以及盒模型的使用。

span:内联元素----包裹其内容。     div是块级元素----占用整行。 

盒模型:相当于容器。

<!doctype html>
<html>
	<head>
		<title>Div+Css布局(div+span以及盒模型)</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{
				margin:0px;
				padding:0px;
			}
		/*
			div{
				background-color:green;
				color:#fff;
			}
			span{
				background-color:green;
				color:#fff;
			}
		
			div{
				width:500px;
				height:500px;
				padding:0px;
				margin:0px;
				border:solid 10px;
			}*/
			.div{
				width:600px;
				height:600px;
				margin:0 auto;
				background-color:green;
			}
			.diva{
			float:left;
			width:240px;
			height:240px;
			background-color:red;
			}
			.divb{
			float:left;
			width:240px;
			height:240px;
			background-color:yellow;
			}
			.div div{
				margin:10px;
				padding:10px;
				border:solid 10px;
			}
		</style>
	</head>
	<body>
		<!--div>今天天气真好DIV</div>
		<div>今天天气真好DIV</div>
		<span>今天天气真好SPAN</span>
		<span>今天天气真好SPAN</span-->
		<div class="div">
			<div class="diva"></div>
			<div class="divb"></div>
		</div>
	</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS学习笔记--Div+Css布局(div+span以及盒模型)

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

《CSS+DIV网页样式与布局从入门到精通》第九章学习笔记(一)盒模型

这是我自己总结的清华大学出版社《CSS+DIV网页样式与布局从入门到精通》第九章第一节盒模型的学习笔记,就是按照顺序写的,没有太多条理,如果要看的话建议对照着这本书看,都是一些小细节,也没什么特深奥的...
  • Jjwxyz
  • Jjwxyz
  • 2016年08月19日 14:15
  • 512

margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题

问题表述: 那天晚上一个同学给我发来一个问题,原型大概是“一个maindiv嵌套了一个div.class="headr1" 的div 和一个div.class="header2" 的这样两个 div...
  • dodott
  • dodott
  • 2014年10月31日 14:31
  • 1927

CSS盒模型属性、CSS浮动属性、使用CSS+div布局

1. 盒子模型 找个网站,按f12后,对照右下脚显示的图片讲解 实线外部为margin空间,不属于元素占用的空间。 实线内部为该元素本身占用的空间:向内部伸展, 依次是b...

看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记

一、盒子模型(box model) 一个盒子又4部分组成:content(内容)、padding(填充)、border(边框)和margin(外边界) 盒子模型有两种: (1)标准W3C盒子模...

div+css实战演练---优酷盒子模型和搜狐首页面布局效果

div+css实战演练---优酷盒子模型和新浪首页面布局效果 说明:为了加强div+css的训练,这里列举了两个实例(未涉及asp、php内容),优酷盒子模型和搜狐首页面的布局。实现方式因人而异...

【阅读】《Head First HTML 与 CSS》第十章——div与span

这一章主要讲的是:div和

使用css制作三角,兼容IE6,用到的标签&lt;div&gt;&lt;s&gt;&lt;span&gt;

使用css来制作三角,在日常用得较多。恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧。 我们分别写一个,,...

CSS SPAN和DIV的区别

CSS SPAN和DIV的区别SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后...

看截图:给图片罩上一层半透明文字描述效果(一)DIV+CSS+SPAN 借鉴百度图片附着文字效果

这段时间项目中要用到:在图片展示时,在图片高度的下边一部分罩上一层透明效果,文字描述附着在透明层上。其实这个东西网上到处都是了,网上也没搜到很好、精简的例子;自己写、去琢磨吧,还真需要一点时间;时间宝...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css布局之div + span 以及盒模型
举报原因:
原因补充:

(最多只允许输入30个字)