盒子模型:
CSS将页面中的每个元素都设置为一个盒子
将元素设置为盒子后,对页面的布局就变成了把不同的盒子放到不同的位置
盒子的组成:
内容区(content):
内边距(padding):
边框(border):
外边距(margin):
内容区:元素中的所有子元素和文本内容都在内容区排列
内容区的大小由width和height两个属性组成
width:内容区的宽度
height:内容区的高度
border:边框
盒子的边缘,边框以内是内容区,出了边框是盒子外
需要设置三个部分:
border-width:边框宽度
border-style;边框样式
border-color:边框颜色
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width:200px;
height:200px;
background-color: saddlebrown;
border:2px solid red;
/* border-color:red;
border-style: solid;
border-width:2px; */
}
</style>
</head>
<body>
<div class="box">
<span>好好干吧,年轻人!</span>
</div>
</body>
</html>