一个页面中，有千千万万个元素，我们想将元素布局到页面，就像想买个沙发，摆放到你的50平的客厅里，你需要先知道沙发是什么形状的，沙发有多大，才能搬回来，然后摆放到家里，这里我们把所有的元素都想象成盒子，矩形。这样我们做页面布局，就变成了，将各式各样的盒子，摆放在页面的什么位置，这就是盒子模型存在的意义
盒模型、盒子模型、框模型（box model）
-css将页面中所有元素都设置为一个矩形的盒子
-将元素设置为矩形的盒子后，对页面的布局就变成了不同的盒子摆放到不同的位置
-每一个盒子，都有以下几个部分组成
内容区(content)
内边距(padding)
边框(border)
外边距(margin) 决定位置
-盒子可见框的大小由内容区，内边距和边框共同决定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: #bfa; /*设置背景颜色*/
border-width: 10px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
扫一扫
1620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
