前端Day12笔记

一、去除行内元素的空格（包含行内和行内块）
    1、为什么行内元素之间会有空格？
        两个标签换行排列会产生空格
        
    2、如何去除空格？
        1）空格也是一个字符，将这个字符的字体大小设置为0时，就不会显示出空格了
        2）代码演示：
            html {
                    font-size: 0;
                }

二、解决行内块元素底部的缝隙
    1、什么是行内块元素底部的缝隙？
        行内块元素没有内容时，父级如果高度由行内块元素撑开，那么父元素content部分的底部和行内块元素底部会产生缝隙
        
    2、这个缝隙产生的原因是什么？
        行内块元素默认是基线对齐，而父级的底部是对应行内块元素的底线，这段距离就是基线和底线之间的距离
        
    3、解决缝隙的方案
        1）设置基线对齐的属性值：
            vertival-align: bottom;
            vertical-align: top;
            vertical-align: middle;
        2）注意：只要不是基线对齐baseline属性值，其他属性值都可以！！！

三、浮动 float
    1、float 浮动属性
        1）取值：
            left    左浮动
            right    右浮动
            
    2、浮动的特点
        1）浮动元素会脱离文档流（标准流）
        2）浮动会往左上角或右上角漂移，直到碰到兄弟浮动元素或父元素的边界时停止
        3）元素浮动之后，这个元素就不区分块元素、行内元素、行内块元素了，而叫做浮动元素，它可以设置宽高，也不会独占一行
        4）相邻的元素同时做一个方向的浮动，会紧紧挨在一起

四、伪元素
    1、什么是伪元素？
        写在css代码中，处于选中元素内容的最前方（或最后方），伪元素可以直接去写样式,但是它类似于行内元素！！！

    2、伪元素选择器
        1）选择器::before{css}
            指定选择器里面的最前方
        2）选择器::after{css}
            指定选择器里面的最后方

    3、注意：
        1）伪元素一定要有content属性，属性值可以是任何东西；
        2）伪元素可以像正常的元素一样添加样式
        

五、清除浮动
    1、clear 清除浮动属性
        用于清除浮动对当前元素产生的影响
        1）取值：
            left    清除左浮动对自身产生的影响
            right    清除右浮动对自身产生的影响
            both    清除左浮动和右浮动对自身产生的影响
        2）注意：
            比较常用的是clear: both
            
六、解决浮动的高度塌陷问题
    子元素浮动之后，父元素的高度会发生塌陷，有以下方案可以解决塌陷问题
    1、给父元素加上高度
        缺点：有时候不能确定内部元素右有多高
    
    2、给父元素开启BFC（块级格式化上下文）
        overflow: hidden;
        缺点：溢出部分会被隐藏
        
    3、在父元素内容的最后面加上一个块元素
        缺点：会在html中多出一个元素，使结构混乱
    
    4、给父元素添加一个伪元素::after，在伪元素中添加清除浮动属性clear: both;
        这个方案解决了第3个方案的弊端，是目前比较合适的解决方案