盒模型——边框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>postion</title>
<style>
.box1{
/*
*使用width来设置盒子内容的宽度
* height来设置盒子内容的高度
*/
width:200px;
height:200px;
background: greenyellow;
/*
*为元素设置边框必须指定的三个样式（注意：必须）
* border-width：边框的宽度
* border-color：边框的颜色
* border-style: 边框的样式（是实线、虚线、点、还是双线等）
*/
/*border-width:2px;
border-color:#FF0000;
border-style:solid;*/
/**
*设置元素边框：
* 大部分的浏览器中，边框的宽度和颜色都有默认值，而边框的样式默认值是none
* （所以，发现只写边框样式，它也显示了边框了，这是因为浏览器的默认值）
*/
/*border-style:solid;*/
/**
* border的简写样式：
* 1.通过它可以同时设置四个边框的宽度，颜色，样式
* 2.没有顺序可言
* 3.border-指定的就是同时指定四个边不能分开指定
* /
/*border:2px red solid;*/
/*
*border-top、border-bottom、border-left、border-right
* 单独设置一条边的样式
*/
/*border-left:3px red dashed;*/
border:3px red solid;
border-right:none;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
