css之盒子模型案例

最新推荐文章于 2023-11-16 09:06:59 发布

杨道龙

最新推荐文章于 2023-11-16 09:06:59 发布

阅读量1.1k

点赞数 2

分类专栏：从零开发Javaee Css 从前端到后台之javaee规范初步文章标签： css入门 web前端 css css笔记

本文链接：https://blog.csdn.net/qq_32059827/article/details/51476395

版权

从零开发Javaee 同时被 3 个专栏收录

75 篇文章 0 订阅

订阅专栏

从前端到后台之javaee规范初步

22 篇文章 6 订阅

订阅专栏

Css

9 篇文章 0 订阅

订阅专栏

<!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>

效果如图：

杨道龙

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css之盒子模型案例

/* 盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者是边框与边框之间的距离。盒子模型主要是用于操作内边距(padding)与外边距（margin） */ div{ border-style:solid; width:100px; height:100px; /* 内边距 */ padding
复制链接

扫一扫