盒子模型

婉菡

于 2021-01-27 10:56:12 发布

阅读量171

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113243324

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<!--
		 div进行页面设计
		 一个盒子主要有5个属性: width  height  padding  border  margin
		   宽度width:内容的宽度 
		       具体像素(px为单位) 或者  百分比(相对于父元素来说的)
		   高度height:内容的高度 
		       具体像素(px为单位) 或者  不写高度,整个div高度由内容决定
		   内边距padding:内容距离边框的距离
		   padding-left  padding-top  padding-right  padding-bottom
		  边框border:
		   border复合样式: border-width  border-style  border-color
		   border-left  border-right  border-top  border-bottom
		  盒子的宽度:width+padding+border
		  盒子的高度:height+padding+border
		 margin: 外边距      距离相邻盒子的距离
		   margin:0px auto;/*实现整个盒子在网页中水平居中*/
		-->
		<style>
			#div1{
				width: 100%;/*若100%则整个屏幕多宽它就多宽*/
				height: 100px;
				background-color: pink;
				padding-left: 20px;
				padding-top: 10px;
				border:5px solid gray ;/*边框宽度  样式  颜色*/
				margin:0px auto;/*实现整个盒子在网页中水平居中*/
			}
			#div2{
				width: 200px;/*若100%则整个屏幕多宽它就多宽*/
				height: 100px;
				background-color: pink;
			    margin-top: 20px;
			}
			*{/*针对页面上所有元素*/
				margin: 0px;/*消除外边距*/
			    padding:0px;/*消除内边距*/ 
			 }
		</style>
	</head>
	<body>
		<div id="div1">
	       ddddddddd
		</div>
		<div id="div2">
	       ggggg
		</div>
		<div>
			<p>哇咔咔密闭空间爱不军械库东</p>
		</div>
	</body>
</html>

在这里插入图片描述

课后练习
demo04ex1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#div1{
				width: 180px;
				height: 140px;
				border: 1px solid gray;
			}
			#div2{
				width: 180px;
				height: 250px;
				border: 1px solid gray;
				border-top: 0px;
			}
			#div1 h3,#div2 h3{
				margin-bottom: 5px;
				padding-left: 10px;
			}
			#div1 p,#div2 p{
				padding-left: 30px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<h3>黑板报</h3>
			<p>
				双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼
			</p>
		</div>
		<div id="div2">
			<h3>购物指南</h3>
			<p>
				双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼<br />
			           双十一兑好礼
			</p>
		</div>
	</body>
</html>

在这里插入图片描述 demo04ex2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding: 0px;
			}
			#div1{
				width: 300px;
				border: 1px solid gray;
				border-bottom: 0px;
			}
			li{
				border-bottom: 1px solid gray;
				padding-left: 30px;
				padding-top: 10px;
				padding-bottom: 10px; 
			}
			li div{
				font-size: 13px;
				color: darkgrey;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li>
					<h4>经济管理</h4>
					<div>
						市场管理  市场管理   市场管理   市场管理
						市场管理  市场管理    市场管理   市场管理
						市场管理   市场管理
					</div>
				</li>
				<li>
					<h4>经济管理</h4>
					<div>
						市场管理  市场管理   市场管理   市场管理
						市场管理  市场管理    市场管理   市场管理
						市场管理   市场管理
					</div>
				</li>
				<li>
					<h4>经济管理</h4>
					<div>
						市场管理  市场管理   市场管理   市场管理
						市场管理  市场管理    市场管理   市场管理
						市场管理   市场管理
					</div>
				</li>
				<li>
					<h4>经济管理</h4>
					<div>
						市场管理  市场管理   市场管理   市场管理
						市场管理  市场管理    市场管理   市场管理
						市场管理   市场管理
					</div>
				</li>
				<li>
					<h4>经济管理</h4>
					<div>
						市场管理  市场管理   市场管理   市场管理
						市场管理  市场管理    市场管理   市场管理
						市场管理   市场管理
					</div>
				</li>
				<li>
					<h4>经济管理</h4>
					<div>
						市场管理  市场管理   市场管理   市场管理
						市场管理  市场管理    市场管理   市场管理
						市场管理   市场管理
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

在这里插入图片描述

婉菡

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <!-- div进行页面设计一个盒子主要有5个属性: width height padding border margin 宽度width:内容的宽度具体像素(px为单位) 或者百分比(相对于父元素来说的)
复制链接

扫一扫

专栏目录