前端学习第三天- margin和浮动

想让盒子(div)居中

1 让盒子中的内容居中--文本或者行内，行内块元素水平居中：

text-align: center; 
/*垂直居中，line_height： 盒子高度 -->上下间距总是保持一致的*/

让盒子本身水平居中，而不是内容居中

margin: 0 auto; 
/*注意：
  margin 和padding是一样的，又上下左右四个值，写两个的时候表示前面一个值是上下外边距，后面一个值是左右外边距。
auto的意思是充满，如果，只有左边外边距是auto，也就是左边充满，相当于是向右对齐。因此如果左右都是auto，左右都充满，那就互相平分，也就是水平会居中。
*/

注意点 ： margin:0 auto; 生效的两个条件：

1. 必须是块级元素，块级元素默认占一行；
   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后 有了行内块的特性，可以设置宽高。

记忆：
浮： 浮在其他盒子上面；
漏： 在标准流中没有位置；
特：和父盒子一起使用，默认有显示转换的特性。