边框设置
div{

/* /* border-style: solid;
border-color: red;
border-width: 10px; */
height: 200px;
width: 200px;
border: 10px solid red;

}
控制圆角
border-radius: 50%;

css盒子模型
content内容区域
padding 内边距
border 边框宽度
div{
width: 100px;
height: 50px;
border: 2px solid red;
/* padding-top: 10px;
padding-left: 5px;
padding-right: 8px;
padding-bottom: 2px;*/
padding: 10px 20px 5px 5px;
}
margin 外边距
top距离上面标签的距离
bottom距离下面标签的距离
left 距离左边标签的距离
rigth 距离右边标签的距离
margin 上右下左
.d1{
width: 100px;
height: 100px;
border: 2px solid red;
}
.d2{
margin-top: 50px;
height:100px ;
width: 200;
border: 2px solid black;
}
两个情况：
垂直方向如果上下两个标签都设置了margin外边距，那么取两者的最大的值
水平方向，两个标签都设置外边距，取两者的边距之和

浮动 float
.c1{
width: 100px;
height: 100px;
border: 5px solid red;
float: left;

}
.c2{
width: 100px;
height: 100px;
border: 5px solid blue;
float:right;
浮动会造成父级标签塌陷问题
解决方法：
1.父级标签设置高度
2.伪元素选择器清除浮动,给父级标签加上下面这个类值
.clearfic:after{
content:'';
display:block;
clear:both;
}