web@h,c小总结

问题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; }