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是块级元素 ...
  • Evan_Leung
  • Evan_Leung
  • 2016年07月31日 01:09
  • 1497

面试题

为什么离开上家公司? 当时我还是很喜欢这家企业的,但是因为后来公司的业务出现了新的调整(转型了)所以我接受了离职! 主要是因为职业发展与预期有了偏颇,其次合同刚好到期。 说一下你对web前端的看法?...
  • qq_16645009
  • qq_16645009
  • 2016年06月10日 19:20
  • 424

前端面试题目搜集

前端面试题目搜集 一、理论知识 1.1、讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d...
  • u012099645
  • u012099645
  • 2015年12月01日 10:41
  • 1348

css盒模型div嵌套制作网页块状部分案例

html文件 css文件 *{ margin:...
  • qq_24928451
  • qq_24928451
  • 2015年04月26日 22:12
  • 655

解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

盒子模型分为两类:W3C标准盒子模型和IE盒子模型 (微软确实不喜欢服从他家的标准) 这两者的关键差别就在于: W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(...
  • xujie_0311
  • xujie_0311
  • 2015年01月03日 22:22
  • 4550

DIV+CSS两种盒子模型(W3C盒子与IE盒子)

在辨析两种盒子模型之前,先简单说明一下什么叫盒子模型。 原理: 先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), C...
  • u012745215
  • u012745215
  • 2014年07月25日 11:18
  • 9996

CSS3 弹性盒布局模型和布局原理

在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。        虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用C...
  • u010297791
  • u010297791
  • 2017年02月09日 14:00
  • 1452

CSS中的盒模型分类

CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。 怪异模式是“部分浏览器在支持W3...
  • jingtian678
  • jingtian678
  • 2017年07月19日 22:32
  • 145

CSS中的div和span标签

今天学习了关于CSS中的div和span标签,下面来通过例子简单的介绍一下这几个标签怎么使用。 part1: div标签: 一般用于配合css完成网页的基本布局 span标签:一般用于配合css...
  • shwanglp
  • shwanglp
  • 2016年12月04日 16:45
  • 625

学习笔记 div span 垂直居中 + 水平居中

学习笔记:div 内部span垂直居中 5G 0.00%
  • Vincent_Field
  • Vincent_Field
  • 2017年12月07日 18:59
  • 113
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css布局之div + span 以及盒模型
举报原因:
原因补充:

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