问题0：元素内联元素,行内元素，行内块元素.

        内联: 宽高M,P都有效

        行内元素:无宽高,内容撑开,M,P左右有效

        行内块元素:可设宽高,内容撑开,M,P都有效

        文档流中:marging上下塌陷取最大，左右叠加

        float中:marging上下左右叠加

        浮动后的元素  可以设置宽高

        absolute fixed定位后的元素  可以设置宽高

悬浮：从无到有的--采用脱离文档流方式

问题1:行内元素，行内块元素元素有个硬伤-- 有默认的间隙

        分析:行内元素换行写导致的

        解决:同行写/把父级font-size设置为0

        <span>你好啊!</span><span>你好啊!</span>

问题2:文档流，脱离文档流，半脱离文档流

        文档流:坚守着它原来占据的空间

        定位: 脱离 不脱离

        absolute相对 定位父元素 都没有默认为初始窗口(默认html.body都没定位)

        文档流中子集marging带动父级问题:

       

解决办法：

        外部处理

        父级或子元素使用浮动或者绝对定位absolute

        内部处理

        父级overflow:hidden;

        父级设置padding（破坏非空白的折叠条件）

        父级设置border

问题3:负marging外边距

        本质:移动 只能用未重叠部分 例如 文本（优先级一样）内容过多会文本重叠   其他按优先级遮挡显示

        注意：只能设置负外边距，不能设置负内边距，浏览器会忽略负内边距

        流方向:____________________------------------------------

            文档流:将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖自己。

            float:left->marging-right/bottom 会把后面的盒子往里拉

                    right->marging-left/bottom 会把后面的盒子往里拉

问题4：

水平居中：

1. inline元素，父元素 text-align : center

2. 块级元素有定宽，margin:0 auto;

3. 块级元素绝对定位，transform : translate（-50%，0）；

4. 块级元素绝对定位，并且知道宽度， margin-left: - 宽度的一半

5. 块级元素绝对定位，left:0;  right:0; margin:0 auto

垂直居中

1. 若元素是单行文本, 则可设置 line-height 等于父元素高度，原理见上面；

2. 若元素是行内块级元素, 基本思想是父使用display: table-cell;vertical-align: middle;

3. 使用flex, 在父元素上面添加.parent { display: flex; align-items: center;

4. 绝对定位的块用 transform: translate(0, -50%)

5. 绝对定位，并且有定高， margin-top : -高度的一半          注意不要用 margin-bottom,  不会生效的

6. 设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }