想让盒子(div)居中
1 让盒子中的内容居中--文本或者行内，行内块元素水平居中：
text-align: center;
/*垂直居中，line_height： 盒子高度 -->上下间距总是保持一致的*/
让盒子本身水平居中，而不是内容居中
margin: 0 auto;
/*注意：
margin 和padding是一样的，又上下左右四个值，写两个的时候表示前面一个值是上下外边距，后面一个值是左右外边距。
auto的意思是充满，如果，只有左边外边距是auto，也就是左边充满，相当于是向右对齐。因此如果左右都是auto，左右都充满，那就互相平分，也就是水平会居中。
*/
注意点 ： margin:0 auto; 生效的两个条件：
- 必须是块级元素，块级元素默认占一行；
2.这个块级元素必须指定了宽度，如果不指定，这个宽度是和父盒子一样宽的，最外层的话也就是和浏览器一样宽的，这时候居中没有任何意义。
CSS 默认去除浏览器内外边框
* {
margin: 0;
padding: 0;
}
/*指定* 是为了方便，真正生产中的代买需要指定那些标签不需要内外边距，指定的速度比不指定的速度快一些*/
margin 的外边距合并的问题
1 如果一个盒子的下边距 margin-bottom: 20px; 在他下面的盒子的上边距是margin-top: 10px; 这样一般理解为上下间距为30px，但事实上，上下的外边距会合并为较大的外边距的值，也就是在这里上下边距只有20px。
这个问题是浏览器的特定行为，没办法解决，只能尽量避免，而且嵌套的外边距也会有这个问题。
2 注意点： 只有垂直方向的外边距 也就是 margin-top和margin-bottom会有这样的问题。水平方向的margin是没有这样的问题的。
3 回忆 ： 内边距 padding 需要合并需要设置：
padding-collapse: collapse;
外边距 margin塌陷问题：
嵌套的两个盒子，如果内里面的盒子设置 margin-top: 50px; 会发现两个盒子同时下移了50px位置，这个叫做外边距塌陷。
解决方案有两种： 1 给父盒子和子盒子设置间隔，也就是说核心是让他们不要完全贴紧： 方案是：
border： 1px solid xxx;
或者
padding-top: 1px;
border-top:1px;
核心就是让父控件和子控件不要完全紧贴；
解决方案2 ：
overflow: hidden; --还没搞明白，明白了再回来填坑。
一个关于padding的注意点
之前了解到，给一个设定了宽高的盒子设置padding值会撑开这个盒子的大小，这个时候为了保持设计稿的一致，就只能修改盒子的宽高，
但是 一个父盒子设定了宽高，一个子盒子没有设定宽高，这个时候给子盒子设定宽高是不会造成子盒子撑开，因为什么呢？ 因为子盒子没有设定宽高，所以设置padding的时候不会撑开盒子大小，而且由于是子盒子，盒子默认宽高就是父盒子的宽高，设置padding之后，盒子会往里面收缩。
圆角边框 CSS3 特性 -- border-radius
border-radius: 10px; ---这个表示四个角额圆角长度为10px，这个值可以调，值越大，圆角的角度越大，也就越接近一个真正的圆。
如何成为一个真正的圆
barder-radius: 50%; 这就是一个圆
注意： border-radius: 1px 2px 3px 4px； 可以设定四个角的圆角大小，也就是和padding和margin是一样的，可以有一个值，两个值，三个值和四个值。
盒子阴影 box-shadow
1 这也是css3 的特性--一般也无所谓兼容性了，css3都兼容了。
2 box-shadow: 0 15px rgba(0,0,0, 0.1); 这个是小米的阴影，
➡️ 水平 垂直 模糊距离 阴影尺寸 颜色 inset等这个多属性，可以省略一些，比如上面个，到时候慢慢调就行。
浮动
1 normal flow 标准流
块级元素占一行，自上而下显示；
行内元素从左到又一次排列；
2 float 浮动
浮动的意思就是浮在上面，也就是他不占标准流布局的空间，他是在上面一层盖住的感觉，因此如果一个div变成float ，他就会覆盖在原来的布局上面，而原来的布局由于空出来一块div的距离，整体就会上去。
float : left | right; 浮动只有左右，没有上下
1 浮动的作用是 能够让多个div在一行内显示。
2 如果需要三个div，依次靠左一行显示，就是给每个div 的 float: left; 就会靠左对其，float不占标准布局的空间，但是float之间空间还是会根据float的方向进行分配，因此如果子盒子想要在父盒子靠右对齐；就可以使用 float: right;
3 float 时，边框是父盒子的边框，也就是移动的范围是在父盒子的边框内部，而且 不能越过父盒子的padding
4 float 有隐式的显示模式转换
也就是说 块级元素 使用float后有行内块的特性，一行内可以显示多个；
行内元素span 使用float后 有了行内块的特性，可以设置宽高。
记忆：
浮： 浮在其他盒子上面；
漏： 在标准流中没有位置；
特：和父盒子一起使用，默认有显示转换的特性。
