<!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. 13.QT-QMainWindow组件使用
			
    QMainWindow介绍 主窗口是与用户进行长时间交互的顶层窗口,比如记事本 主窗口通常是应用程序启动后显示的第一个窗口 QMainWindow是Qt中主窗口的基类,继承于QWidget,如下图所示 ...
    
			
    2. 
						
  2. VMWare 虚拟机 共享文件夹
			
    1.不能拷贝和直接拖拽文件至虚拟机系统中  解决办法:    通过共享文件夹的方式进行文件共享.   (Win7 32位  10.0版本的虚拟机). ①:选择虚拟机 虚拟机 → 设置  如下图: ②: ...
    
			
    3. 
						
  3. 进程间通信——XSI IPC之消息队列
			
    进程间通信XSI IPC有3种:消息队列.共享内存.信号量.它们之间有很多相似之处,但也有各自的特殊的地方.消息队列作为其中比较简单的一种,它会有些什么东西呢,来一起探讨探讨.. 消息队列结构 消息队 ...
    
			
    4. 
						
  4. Node.js 控制台
			
    稳定性: 4 - 冻结 {Object} 用于打印输出字符到 stdout 和 stderr.和多数浏览器提供的 console 对象函数一样,Node 也是输出到 stdout 和 stderr.  ...
    
			
    5. 
						
  5. 深入理解DirectByteBuffer
			
    介绍 最近在工作中使用到了DirectBuffer来进行临时数据的存放,由于使用的是堆外内存,省去了数据到内核的拷贝,因此效率比用ByteBuffer要高不少.之前看过许多介绍DirectBuffer ...
    
			
    6. 
						
  6. Java对象的创建 —— new之后JVM都做了什么？
			
    Java对象创建过程 1. 类加载检查 虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载.解析和初始化过.如果没 ...
    
			
    7. 
						
  7. 自写JQ控件-树状菜单控件[demo下载]
			
    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...
    
			
    8. 
						
  8. linux TCP数据包封装在SKB的过程分析
			
    在linux中 tcp的数据包的封装是在函数tcp_sendmsg开始的,在函数tcp_sendmsg中用到skb = sk_stream_alloc_skb(sk, select_size(sk,  ...
    
			
    9. 
						
  9. Xcode中lldb的REPL调试方法
			
    Xcode中lldb调试器有一个repl语句,可以用来模拟swift解释器的REPL行为,即Read Eval Print Loop. 在Xcode里随意打开程序,中断入调试器.在调试控制台中输入re ...
    
			
    10. 
						
  10. Ejb远程调用-jboss服务器调用服务器-Bean调用Bean
			
    英文参考地址 https://docs.jboss.org/author/display/AS71/Remote+EJB+invocations+via+JNDI+-+EJB+client+API+o ...
    
			
    11.