盒子模型

最新推荐文章于 2024-05-26 14:33:41 发布

qq_34786755

最新推荐文章于 2024-05-26 14:33:41 发布

阅读量129

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_34786755/article/details/113686324

版权

盒子模型1

什么是盒子模型

盒子模型是css里面非常重要的属性主要作用是用来改变间距，（内间距，外间距）
例如 div body input 等等只要是矩形区域的对象都属于盒子模型

关键字

width,height ，border margin padding

主要作用

进行页面布局时，盒子模型很重要，设置内边距，外边距宽高

示例

magin:10px 上 10px 下 10px 左 10px右 10px
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<link rel="stylesheet" type="text/css" href="./weiyuansu.css"/>
	</head>
	<body>
		<div id="div1" >
			化屋村地处六冲河与三岔河交汇处北岸，主要居住着苗、彝、汉3个民族，
			其中苗族人口占96.7%。曾经，化屋苗寨房屋破漏，不通水、电、路，村民出村
			必须攀爬村后的悬崖“手扒岩”，“辛苦种出来的庄稼还不够养活一家人”。如今，这里已经换了新颜。
			平整宽阔的道路、整齐漂亮的楼房、蓬勃发展的产业、优美的环境……无不标志着这片土地上发生的巨变。
			化屋村地处六冲河与三岔河交汇处北岸，主要居住着苗、彝、汉3个民族，
			其中苗族人口占96.7%。曾经，化屋苗寨房屋破漏，不通水、电、路，村民出村
			必须攀爬村后的悬崖“手扒岩”，“辛苦种出来的庄稼还不够养活一家人”。如今，这里已经换了新颜。
			平整宽阔的道路、整齐漂亮的楼房、蓬勃发展的产业、优美的环境……无不标志着这片土地上发生的巨变。
		</div>
		<div id="div2">
			化屋村地处六冲河与三岔河交汇处北岸，主要居住着苗、彝、汉3个民族，
			其中苗族人口占96.7%。曾经，化屋苗寨房屋破漏，不通水、电、路，村民出村
			必须攀爬村后的悬崖“手扒岩”，“辛苦种出来的庄稼还不够养活一家人”。如今，这里已经换了新颜。
			平整宽阔的道路、整齐漂亮的楼房、蓬勃发展的产业、优美的环境……无不标志着这片土地上发生的巨变。
			化屋村地处六冲河与三岔河交汇处北岸，主要居住着苗、彝、汉3个民族，
			其中苗族人口占96.7%。曾经，化屋苗寨房屋破漏，不通水、电、路，村民出村
			必须攀爬村后的悬崖“手扒岩”，“辛苦种出来的庄稼还不够养活一家人”。如今，这里已经换了新颜。
			平整宽阔的道路、整齐漂亮的楼房、蓬勃发展的产业、优美的环境……无不标志着这片土地上发生的巨变。
		</div>
	</body>
</html>

div{
	width: 200px;
	height: 350px;
	overflow: scroll;
}
#div1{
	background-color: red;
	margin-bottom: 23px;
}
#div2{
	background-color: #FFFF00;
	margin-top: 50px;
}
*{
	/* margin: 10px 10px 10px 10px; */
	margin: 10px 0px 0px 0px ;
	margin-top: 10px;
	margin-left: 10px;
	
}

练习

在不更改蓝色区域大小的情况下，将黄色区域设置为水平垂直居中。
在这里插入图片描述

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .content{
            width:800px;
            height:400px;
            background-color: skyblue;
		box-sizing: border-box;
		padding-top: 100px;
			margin: 10px;
        }
        .top{
            width:400px;
			margin-left: 200px;
            height:200px;
		box-sizing: border-box;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="top"></div>
    </div>
</body>
</html>