<!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. R语言使用 multicore 包进行并行计算
			
    R语言是单线程的,如果数据量比较大的情况下最好用并行计算来处理数据,这样会获得运行速度倍数的提升.这里介绍一个基于Unix系统的并行程序包:multicore. 我们用三种不同的方式来进行一个简单的数 ...
    
			
    2. 
						
  2. proc文件系统探索 之 根目录下的文件[1]
			
    2.1根目录下的文件2.1.1lock文件内核锁,记录与被打开的文件有关的锁信息. 该文件显示当前被内核锁定的文件.该文件包含的内容是内核调试数据,根据使用的系统的这些数据会变化很大.一个/proc/ ...
    
			
    3. 
						
  3. 网络爬虫框架Scrapy简介
			
    作者: 黄进(QQ:7149101) 一. 网络爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本:它是一个自动提取网页的程序,它为搜索引擎从万维 ...
    
			
    4. 
						
  4. [Pelican]Pelican入门(一)
			
    听说这个静态博客很好用,最近又在协助"蟒周刊"翻译,于是先学习下基本的用法 office site You can startup for here. 安装环境 我的os是win7 ...
    
			
    5. 
						
  5. [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
			
    本文地址:http://blog.csdn.net/sushengmiyan/article/details/41911539 本文作者:sushengmiyan ------------------ ...
    
			
    6. 
						
  6. Linux jar包 后台运行
			
    Linux 运行jar包命令如下: 方式一: java -jar shareniu.jar 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? ...
    
			
    7. 
						
  7. Android View框架总结（八）ViewGroup事件分发机制
			
    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52298780 上篇分析了View的事件分发流程,留了一个问题:如果上 ...
    
			
    8. 
						
  8. spring 的OpenSessionInViewFilter简介
			
    假设在你的应用中Hibernate是通过spring 来管理它的session.如果在你的应用中没有使用OpenSessionInViewFilter或者OpenSessionInViewInterc ...
    
			
    9. 
						
  9. Android简易实战教程--第十二话《代码获取手机总运行内存的大小》
			
    手机RAM存储,类似于电脑的内存.这一篇,对通过代码获取手机总内存大小做详细介绍. 首先,定义一个engine类,这个类功能就是获取进程信息,包括运行的程序个数,系统总内存,系统剩余总内存.本篇先完成 ...
    
			
    10. 
						
  10. iOS中 为 iOS 建立 Travis CI  韩俊强的博客
			
    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 你是否曾经试着为 iOS 项目搭建一台支持持续集成的服务器,从我的个人经验而言,这可不是一个轻松的活.首先需要准备 ...
    
			
    11.