<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css"> 

/*

	盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。

	盒子模型主要是用于操作内边距(padding)与外边距（margin）

*/

	div{

		border-style:solid;

		width:100px;

		height:100px;

		/* 内边距 */

		padding-left:10px;

		padding-top:20px;

	}

	.one{

		margin-bottom:30px;

	}

	.two{

		margin-left:700px;

	}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

	<div class="one">

    	这个是一个div

    </div>

    <div class="two">

    	这个是二个div

    </div>

</body>

</html>

盒子模型案例：
</pre><pre code_snippet_id="1692619" snippet_file_name="blog_20160522_4_5039454" name="code" class="html">  <pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css"> 

	.outer{

		border-style:solid;

		width:370px;

		height:200px;

		margin-top:250px;

		margin-left:420px;

		background-image:url(../1.jpg);

		background-repeat:no-repeat;

		background-position:center;

	}

	.userName{

		margin-top:60px;

		margin-left:80px;

	}

	.password{

		margin-left:80px;

		margin-top:20px;

	}

	input{

		border-color:#000;

		border-width:3px;

	}

	#button{

		margin-left:120px;

	}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

	<div class="outer" >

        <div class="userName">

        	用户名 <input type="text"/>

        </div>

        <div class="password">

        	密  码 <input type="password"/>

        </div> 

        <input id="button" type="submit" value="登陆"/>

    </div>

</body>

</html>

效果如图：

												


											
css之盒子模型案例的更多相关文章
	

    
								
  1. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
		
    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局)  ...
    
		
    2. 
						
  2. 深入理解CSS系列（一）：理解CSS的盒子模型
		
    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
    
		
    3. 
						
  3. 使用css弹性盒子模型
		
    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
    
		
    4. 
						
  4. #CSS的盒子模型、元素类型
		
    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
    
		
    5. 
						
  5. 深入了解CSS中盒子模型
		
    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
    
		
    6. 
						
  6. CSS 弹性盒子模型
		
    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
    
		
    7. 
						
  7. 认识CSS中盒子模型
		
    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
    
		
    8. 
						
  8. css属性 盒子模型
		
    一.    css属性相关 1.宽和高    1.width可以为元素设置宽度 2. height可以为元素设置高度 3.只有块级标签才可以设置宽度和高度,内联标签并不能设置宽度和高度,及时设置了也不 ...
    
		
    9. 
						
  9. css 大话盒子模型
		
    什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JS实现2048代码
			
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
			
    2. 
						
  2. android  获取栈顶activty的方法总结（兼容API 5.0）
			
    声明:本文为Dujinyang CSDN原创投稿文章,未经许可,禁止任何形式的转载. 最近5.0\6.0\7.0 安卓系统都陆续上岗了,兼容性和代码更新是个很头疼的问题,这次我们来说下TASK的基础和 ...
    
			
    3. 
						
  3. MacOS下对postgresql的简单管理操作
			
    如何安装在另一篇blog中有述,这里不再赘述.本篇简单说一下安装完postgresql之后的一些管理和查询操作. 首先安装完postgresql之后需要初始化数据库: initdb /usr/loca ...
    
			
    4. 
						
  4. GDAL库进度信息编写示例
			
    GDAL进度信息编写 GDAL库中的算法以及读写数据的时候一般都会提供两个与进度信息相关的参数,下面分别进行描述: GDALProgressFunc pfnProgress void * pProgr ...
    
			
    5. 
						
  5. 使用Android Studio向GitHub提交代码
			
    使用Android Studio向GitHub提交代码 在GitHub上创建一个仓库 填写仓库名称.描述.类型(公有.私有)等信息,点击创建 到此,成功创建了我们的仓库,并且初始化创建了README. ...
    
			
    6. 
						
  6. ViewPager 几个状态详解
			
    ViewPager.SCROLL_STATE_DRAGGING 当用户按下ViewPager视图并且需要滑动第一下时; ViewPager.SCROLL_STATE_SETTLING: 当用户滑动的放 ...
    
			
    7. 
						
  7. [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
			
    本文地址:http://blog.csdn.net/sushengmiyan/article/details/41911539 本文作者:sushengmiyan ------------------ ...
    
			
    8. 
						
  8. Spark技术内幕: Shuffle详解（一）
			
    通过上面一系列文章,我们知道在集群启动时,在Standalone模式下,Worker会向Master注册,使得Master可以感知进而管理整个集群:Master通过借助ZK,可以简单的实现HA:而应用 ...
    
			
    9. 
						
  9. 如何查看App provision profile文件中的钥匙链访问组名称
			
    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们因为某些原因希望安全的在多个App中共享一些信息,我们可以 ...
    
			
    10. 
						
  10. 如何将Ubuntu部署到U盘中，用U盘安装linux操作系统
			
    http://jingyan.baidu.com/article/d5c4b52be79960da560dc59f.html 用U盘装一个linux系统是非常简单的事情,不会就看看这篇文章吧,后期我会 ...
    
			
    11.