1.边框：
①常用属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
200px; #边框宽
height: 200px; #边框高
/*border-style: solid;*/ #边框样式
/*border-color: red;*/ #边框颜色
/*border- 10px;*/
border:10px solid red;
border-radius: 50%; #控制边框形状，是否为圆角
/*border-left-style: solid;*/ #左边框样式
/*border-left- 10px;*/ #左边框宽度
/*border-right-style: dashed;*/
/*border-top-style: dashed;*/
/*border-bottom-style: dashed;*/
/*border-right- 5px;*/
/*border-left:10px solid red;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2.display属性：
div{
100px;
height: 100px;
border: 1px solid red;
/*display: inline; !* 将标签设置为内敛标签 *!*/
/*display: inline-block; !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/
/*display: none; !* 隐藏标签 ,并且不占用自己之前的空间*!*/
}
3.盒子模型：
/*padding-top: 10px;*/
/*padding-left: 5px;*/
/*padding-right: 2px;*/
/*padding-bottom: 4px;*/
/*padding: 10px 20px; !* 10px上下内边距 ,20px左右内边距 *!*/
/*padding: 10px 20px 5px 2px; !* 10px上下内边距 ,20px左右内边距 *!*/
/*padding: 10px 20px 5px 0; !* 10px上下内边距 ,20px左右内边距 *!*/
/*margin-top: 100px;*/
/*margin: 10px 20px;*/
margin: 10px 5px 6px 3px;
4.float：
①用来做布局的
.c1{
background-color: red;
height: 100px;
100px;
float: left;
}
.c2{
background-color: blue;
height: 100px;
100px;
float: right;
}