盒模型
盒子模型，框模型（box model）
-css将页面中所有元素都设置为了一个矩形的盒子
-将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
-每一个盒子都由一下几个部分组成
内容区（content）宽高
内边距（padding）
边框（border）
外边框（margin）
收藏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: linear-gradient(red,pink) no-repeat fixed;
background-size: cover;
}
p {
background: linear-gradient(blue, pink);
border: 20px solid rgb(146, 140, 140);
/* Content内容区域 */
width: 150px;
height: 200px;
/* 内边距 padding
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
/* 边框属性(border)
none：没有边框
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线 */
/* 上边框样式 */
border-top-style:double;
/* 下边框样式 */
border-bottom-style:dotted;
/* 左边框样式 */
border-left-style:solid;
/* 右边框样式 */
border-right-style:dashed;
/* 外边距 margin */
margin-top: 50px;
margin-right: 150px;
margin-left: 120px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<p>这个是内容部分</p>
<div class="c1">
<p>这个也是内容</p>
</div>
<img src="box-model.png" />
</body>
</html> 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
