1.盒模型的属性：
1.padding
.box{ width: 200px; height: 200px; background-color: red; /*顺时针 上右下左*/ padding: 20px 30px 40px 50px; }
2.border
三要素：线性的宽度、线性的样式、颜色
.box{ width: 200px; height: 200px; background-color: red; /*周围设置*/ border: 5px solid green; /*分别对每个边进行设置*/ border-left: 5px solid green; border-right: 1px dotted yellow; border-top: 5px double purple; border-bottom: 1px dashed purple; /*选中一个边设置属性*/ border-left-style: solid; border-left-width: 1px; border-left-color: green; /*选中一个属性进行设计，也是顺时针*/ border-width: 5px 10px; border-color: green yellow; border-style: solid double; }
制作圆角：border-redius：xx px;(就是相当于以xxpx为半径切下去一个1/4圆)
3.margin
在标准文档流下：margin的水平不会出现任何问题，但是垂直方向上margin会出现塌陷问题
在父盒子里有一个子盒子时，设置子盒子的margin-top属性，并不是他与父盒子之间的距离，如果想做到和父盒子之间有距离，需要将父盒子设置成浮动效果。
2.display显示
在标准文档流下
属性：
block 块级标签
独占一行，可以设置宽高，如果不设置宽，默认是父盒子宽度的100%
inline 行内标签
在一行显示，不可以设置宽高，根据内容来显示宽高
inline-block 行内块
在一行内显示，可以设置宽高
none 不显示 隐藏 不在文档上占位置
visibility：hidden；隐藏 在文档上占位置
3.浮动：脱离了标准文档流
作用好处：是元素实现并排（布局），就在页面上不占位置
浮动带来的问题：子盒子浮动，不在页面上占位置，如果父盒子不设置高度，那么撑不起父盒子的高度，页面出现紊乱
清除浮动带来的问题：
1.个父盒子设置固定的高度（但是后期不好维护）
2.clear:both;
给浮动元素的最后面，加一个空的块级标签（标准文档流下的块级标签）
给当前这个标签设置一个clearfix类名，设置该标签属性clear:both;（但是代码冗余）
.clearfix{ clear: both; } </style> </head> <body> <div class="father"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <!--内墙法--> <div class="clearfix"></div> </div> <div class="father2"></div>
3.clearfix：after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
4.overfow:hidden;
1em=当前标签下的字体大小