【JavaWeb】CSS_盒子模型（div块标签）

最新推荐文章于 2023-08-28 23:44:49 发布

Enjoy96

最新推荐文章于 2023-08-28 23:44:49 发布

阅读量1.3k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Enjoy96/article/details/79085846

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

盒子模型

1.标签格式：<div></div>块标签

2.作用：对页面进行分区

3.在css语法中对盒子属性进行操作：

（1）盒子容量：

①width②height

（2）盒子边框：

①border-color②border-style ③border-width

（3）盒子边距：

①内边距：padding —— 盒子边框和盒子内容之间的距离

②外边距：margin —— 盒子与盒子之间的距离

4.盒子模型图解：

注：<1>简写格式默认：上右下左

<2>在用margin设置外边距时，设置上边距时盒子会向下移动，设置左边距时盒子会向右移动

练习：实现QQ登录页面

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ登陆页面</title>
</head>

<style type="text/css">
	/*设置大盒子属性*/
	#main{
		/*设置盒子容量*/
		width:450px;
		height:300px;
		/*设置盒子边框*/
		border:1px solid #000;
		/*将盒子向中间移动，默认简写格式：上 右 下 左*/
		margin:150px 0 0 420px;
		/*设置背景图片*/
		background-image:url(../images/1.jpg);
		/*将背景图片设置为不重复*/
		background-repeat:no-repeat;
		/*将背景图片移置盒子中央*/
		background-position:top center;
	}
	
	/*设置用户名盒子属性*/
	#username{
		/*将此盒子向下和向右移动*/
		/*注意：在移动上面盒子的同时下面的盒子也会随之向下移动*/
		/*简写格式默认：上 右 下 左*/
		margin:60px 0 0 100px;
	}
	
	/*设置密码盒子属性*/
	#password{
		/*将此盒子向下和向右移动（向下移动是相对于用户名盒子的距离移动，而向右移动是针对大盒子进行移动）*/
		margin:20px 0 0 100px;
	}
	
	/*设置button 盒子的属性*/
	#button{
		/*将此盒子向下和向右移动*/
		margin:20px 0 0 130px;
	}
	
	/*给用户名和密码加头像*/
	#nameimage{
		/*导入图片*/
		background-image:url(../images/head.png);
		/*设置图片不重复*/
		background-repeat:no-repeat;
		/*单独设置这个图片的位置，让它向左移动*/
		padding-left:30px;
	}
	#passwdimage{
		background-image:url(../images/key.jpg);
		background-repeat:no-repeat;
		padding-left:30px;
	}
</style>

<body>
	<div id="main">
		<form action="#" method="post">
        	<div id="username">
    			用户名：<input type="text" id="nameimage" name="username" value="请输入用户名">
            </div>
            <div id="password">
        		密   码：<input type="password" id="passwdimage" name="password" value="请输入					密码">
            </div>
            <div id="button">
        		<input type="submit" value="登陆">    <input type="submit" value="立即注册">
            </div>
    	</form>
    </div>
</body>
</html>

效果：

盒子的定位

1.position属性：

（1）relative —— 相对定位（相对于盒子的原始位置）

（2）absolute —— 绝对定位（相对于屏幕起始位置左上角）

（3）fixed —— 固定定位（固定处于屏幕当中的某一位置，不随屏幕的滚动而移动）

注：top right bottom left 可设置盒子的偏移量，不可以两个属性同时设置对边（同时设置上下，或左右）

例如： position：absolute;

left：10px；

top：10px；

练习：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css定位练习</title>
</head>

<style type="text/css">
	#test{
		/*设置盒子属性*/
		border:1px solid #F0F ;	
		width:100px ;
		height:100px ;
		
		/*绝对定位*/
		position:absolute ;
		left:30px ;
		top:90px;
	}
	
	#smartisan{
		/*设置盒子属性*/
		border:1px solid #F0F ;
		width:100px ;
		height:100px ;
		background-color:#6F0 ;
		
		/*固定定位*/
		position:fixed;
		left:450px ;
		top:200px ;
	}
</style>

<body>
	<div id="test">
    	div
    </div>
	内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

	<div id="smartisan">点击查询</div>
</body>
</html>

效果：

float属性

1.作用：标签块的浮动效果（可将div块标签设置为横向排列）

2.float中的属性:

（1）left：将盒子靠屏幕左侧横向排列

（2）right：将盒子靠屏幕右侧横向排列

例：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div块的横向分布</title>
</head>

<style>
	#left{background:#999;width:200px;height:200px;float:left;}
	#center{background:#FF0;width:200px;height:200px;float:left; margin:30px 0 0 100px;}
	#right{background:#000;width:200px;height:200px;float:left;}
	
	#ip{
		clear:both;
	}
	
</style>

<body>
	
	<div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
    
    <span id="ip"></span>
</body>
</html>

效果：