<!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. JavaScript基础知识从浅入深理解（一）
			
    JavaScript的简介 javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互. javascript是由三部分组成:ECMAScript.DO ...
    
			
    2. 
						
  2. PHP 5 MySQLi 函数
			
    在 PHP 中使用 MySQLi 函数需要注意的是:你需要添加对 MySQLi 扩展的支持. PHP MySQLi 简介 PHP MySQLi = PHP MySQL Improved! MySQLi ...
    
			
    3. 
						
  3. 启动Docker容器
			
    启动容器有两种方式,一种是基于镜像新建一个容器并启动,另外一个是将在终止状态(stopped)的容器重新启动. 因为 Docker 的容器实在太轻量级了,很多时候用户都是随时删除和新创建容器. 新建并 ...
    
			
    4. 
						
  4. C#基础拾遗系列之二：C#7.0新增功能点
			
    第一部分: C#是一种通用的,类型安全的,面向对象的编程语言.有如下特点: (1)面向对象:c# 是面向对象的范例的一个丰富实现, 它包括封装.继承和多态性.C#面向对象的行为包括: 统一的类型系统  ...
    
			
    5. 
						
  5. 初识在Spring Boot中使用JPA
			
    前面关于Spring Boot的文章已经介绍了很多了,但是一直都没有涉及到数据库的操作问题,数据库操作当然也是我们在开发中无法回避的问题,那么今天我们就来看看Spring Boot给我们提供了哪些疯狂 ...
    
			
    6. 
						
  6. 教你如何在Android 6.0上创建系统悬浮窗
			
    郭霖大神的文章:http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650235949&idx=1&sn=0f7eded ...
    
			
    7. 
						
  7. Linux块设备加密之dm-crypt分析
			
    相关的分析工作一年前就做完了,一直懒得写下来.现在觉得还是写下来,以来怕自己忘记了,二来可以给大家分享一下自己的研究经验. 这篇文章算是<Device Mapper代码分析>的后续篇,因为 ...
    
			
    8. 
						
  8. 浅谈SSH框架
			
    在学习或者接触一个新的概念的时候,我们应该在脑海中发挥我们的搜索引擎,牵一发动全身的去想,这个知识跟我之前接触过的有哪些相同或者不同的地方,从这个角度去看那些新的知识和概念,经过旧知识和新知识的对比我 ...
    
			
    9. 
						
  9. ROS讲座 关于ROS2和Gazebo C++ in Open Source Robotics
			
    分享一个不错的介绍ROS2和Gazebo的视频讲座. Gazebo中的云彩飘动起来了!!!! 超清视频分享网址:    http://v.youku.com/v_show/id_XMTcyMzY0Nz ...
    
			
    10. 
						
  10. springMVC系列之（四） spring+springMVC+hibernate 三大框架整合
			
    首先我们要知道Hibernate五大对象:,本实例通过深入的使用这五大对象和spring+springMVC相互结合,体会到框架的好处,提高我们的开发效率 Hibernate有五大核心接口,分别是:S ...
    
			
    11.