<!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. TensorFlow实验环境搭建
			
    初衷: 由于系统.平台的原因,网上有各种版本的tensorflow安装教程,基于linux的.mac的.windows的,各有不同,tensorflow的官网也给出了具体的安装命令.但实际上,即使te ...
    
			
    2. 
						
  2. Android开发之手把手教你写ButterKnife框架（一）
			
    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52662376 本文出自:[余志强的博客] 一.概述 JakeWhar ...
    
			
    3. 
						
  3. oracle11实战详解
			
    因为最近可以学习oracle了,所以昨天把oracle装好了,装的时候因为种种不知名的原因,把我的mysql居然连连不上了.说实话如果自己看教程安装的话还是有一点小复杂的,特别是对于我这种学渣来说,我 ...
    
			
    4. 
						
  4. HOG OpenCV 代码片段
			
    直接上代码: #include <opencv2/opencv.hpp> using namespace cv; #include <cmath> using namespac ...
    
			
    5. 
						
  5. iOS界面不能点击（tableView 的cell 不能使用点击事件，tableView也不能上下滚动）
			
    iOS开发中间遇到了很多问题,有些后来又遇到,竟然忘记怎么处理了,所以还是来写下博客记录自己遇到的问题,方便自己也方便别人. 之前想的是项目小,就用storyboard在绘制界面,但是项目慢慢的扩展, ...
    
			
    6. 
						
  6. [nginx] 对UA为空的请求返回403
			
    nginx blocking blank user agent . sometime apps' backgroud request always visit a url, and these req ...
    
			
    7. 
						
  7. Nginx的负载均衡 - 加权轮询 (Weighted Round Robin) 下篇
			
    Nginx版本:1.9.1 我的博客:http://blog.csdn.net/zhangskd 上篇blog讲述了加权轮询算法的原理.以及负载均衡模块中使用的数据结构,接着我们来看看加权轮询算法的具 ...
    
			
    8. 
						
  8. Java的LinkedList详解，看源码之后的总结
			
    1. LinkedList实现了一个带表头的双向循环链表: 2. LinkedList是线程不同步的: 3. LinkedList中实现了push.pop.peek.empty等方法,因此Linked ...
    
			
    9. 
						
  9. cassandra 如何写数据以及放置副本
			
    application发送数据到server application 发送请求到server 根据设置的load balance 规则从cluster中挑选一个coordinator,一般使用轮询即可 ...
    
			
    10. 
						
  10. FFmpeg源代码简单分析：avcodec_open2()
			
    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...
    
			
    11.