前言：

  在做完九宫格之后依然会有些困惑，今天就把做完九宫格后做一些深度思考，上午由于一些家庭琐事耽误了，时间还是有些紧凑。

梳理所掌握的内容：

   1.到目前为止，对行内元素不起作用的属性有：width、height、padding-top、padding-bottom、margin-top和margin-bottom。

 2.*{margin：0；padding:0; }用于清除默认的margin和padding，以上代码，测试的时候常用。

   3.在实际开发中，我们常写为：（以下为网易的写）

 4.站在稳定性角度考虑，我们在布局的时候，优先考虑盒子的width和height，其次考虑是盒子的内边距(padding)，最后考虑的才是margin(外边距)。因为margin有诸多的         问题，比如外边框合并的问题，比如IE6下双倍边距的问题

    5.如果一个块状元素，没有指定宽度，那么这个元素是撑满它父级内容宽度的

    6.外边框合并的问题，起初我们认为这是一个bug，后来发现所有的浏览器都有这个问题，所以这不是一个bug，我们只能认为这是一个特性。

  兄弟级并列关系的盒子，上下外边距合并的问题：兄弟级并列关系的盒子，上下外边距会合并（左右外边距不合并）。

  例如：上方盒子a的margin-bottom: 100px，下方盒子b的margin-top:50px，那么两个盒子之间的间距为100px（取a和b盒子外边距的最大值）

  这种情况是无伤大雅的，我们只要给上方盒子单设margin-bottom或者下方盒子单设margin-top之一即可

  7.父子级嵌套关系的盒子，如果父级盒子没有设置上边框( border-top )或上内边距 (padding-top)，那么父子级盒子上外边距也会合并，合并的结果为两个盒子上外边距的最大值。水平方向外边距没有问题。即使父级盒子的margin-top为0，父子级盒子的margin-top也会合并。

 解决方案：

 对应页面效果：

8.让块状元素居中对齐，用margin:0 auto;（推荐写法） 或者margin: auto;

 如果需要将子盒子居左对齐，那么使用margin-left:auto的条件：

   1. 父盒子中只能有一个子盒子；

   2. 这个子盒子必须是块状元素。

9.浮动特性之对齐方式

  1. 如果两个兄弟级并列关系的盒子a和b。如果a和b都浮动，那么a 与b是顶端对齐的。

   2.如果有两个盒子a和b，如果让第一个盒子a不浮动，但是b盒子浮动，那么a 和b是底端对齐的

注意：在一个盒子里面的小盒子，如果一浮动，就要加浮动；如果不浮动，就都要不加浮动。

10.浮动特性之 显示模式转换

任何浮动的元素，都会有宽和高，而且在同一行显示（按照行内块的显示模式来显示）。

如果该元素无宽高，那么会按照里面内容的大小来决定宽高。

11. 清除浮动造成的塌陷

     浮动会造成塌陷，浮动会造成一系列的麻烦问题。

如果子级盒子浮动，那么会造成父级盒子的塌陷（如果没有设定高度，那么高度会变为0）

清除浮动造成的塌陷，简称清除浮动，也叫闭合浮动

    清除浮动造成的塌陷的方法：

   1.额外标签法

在浮动的盒子最后面另加一个盒子，给这个新加的盒子添加清除浮动。

清除浮动的CSS代码：

clear:both;      /*both表示left和right浮动都清除*/

2 给父盒子加overflow:hidden

overflow:hidden;是一段神奇的代码，尤其在IE6下，特别管用。

overflow:hidden有强制盒子检测自身高度的功能。

 这段代码非常的简洁，但是使用的时候要注意：如果里面有定位的话，可能会出问题

3.给父盒子加高度

12.溢出隐藏（overflow）

overflow这个属性规定了，当内容超出盒子的部分，该如何显示

overflow的常用取值：

overflow:visible;       visible 可见的  (vision)

超出盒子部分的内容，依然可以见（默认值）.

overflow:scroll;      scroll 滚动

会显示滚动条，滚动条占的是内容的宽度和高度。当内容没有超出盒子的时候，依然显示滚动条。所以overflow:scroll很少用.

overflow:auto;      auto自动判断

当内容超出盒子的时候，会自动显示滚动条；当盒子内容没有超出盒子的时候，会隐藏滚动条。

    overflow:hidden还有强制让盒子检测自身高度的功能；可以防止父子级关系盒子的上外边框合并的问题；

13.定位总结

遇到的问题：

一、

清除父级盒子的padding-boottom后，出现九宫格消失的问题，在控制台也看了，发现内容高度为0，宽度却存在（前提是没有设宽高，都是自适应的），还有就是发现padding-bottom和宽度是保持一致的，所以有个猜想是：padding-bottom的作用是不是充当高度的作用。

解决：

盒子大小不仅仅是由宽高来决定

盒子的width和height指的是盒子里面内容的宽度和高度

 paddding会撑开盒子。

盒子所占空间的宽度 = 盒子内容的宽度（width） + 左右padding + 左右border + 左右margin

盒子所占空间的高度 = 盒子内容的高度（height） + 上下padding + 上下border + 上下margin

注意：如果一个块状元素，没有指定宽度，那么这个元素是撑满它父级内容宽度的。

二、

    为什么浮动之后一定要清除浮动，试验过发现其实不清楚浮动也无大碍，虽然了解到浮动会造成塌陷，可是却理解的不是很清除。

解决：

     浮动，原本的作用是，文字环绕，后为布局所用。

    危害：浮动脱离了标准流，如果父级元素未设置宽高的话会造成父级元素不能被撑开，所以父级元素设置的 背     景啥的都不能显示，多以要清除浮动。

今天由于家里好多事情给耽误了导致今天的任务都没有完成，心里很是愧疚，只能明天补上了。

明天任务：

 完善今天的日报

 任务一做一个了解了；

 任务二，任务三开始；