前端Day11笔记

一、文字的基线问题
    1、什么是基线？
        小写字母x的底部所在的线
    2、vertical-align 指定行内或行内块元素垂直对齐方式
        1）取值：
            baseline    沿着基线对齐（默认）
            bottom        沿着底部对齐【常用】
            top            沿着顶部对齐
            middle        当前元素的中部与x字母的一半高度对齐
        2）注意：只对行内或行内块元素生效，对块元素无效！【重要】
        3）使用场景
            一般用于图片标签img和文字之间对齐
            
            
二、行高
    1、什么是行高？
        行高就是一行所占的高度，文字会在设置的行高中垂直居中
    2、line-height 行高
        1）取值：
            像素单位px    表示行高占多少像素
            倍数            行高是字体大小的几倍
        2）注意：
            line-height可以写在font属性中，例如：
            font:italic 700 20px/2 "楷体";
            表示字体倾斜，加粗，字号是20px，行高是两倍，字体种类是楷体
            
            
三、盒子模型
    盒子模型中的方位一共有4个，分别是：
        top        上
        right    右
        bottom    下
        left    左
    一个标准的盒子模型组成：
        border    边框
        margin    外边距
        padding    内边距
        content    内容
        
    1、border 边框
        1）border-方位-style 某方向上的边框风格
            取值：
                solid        虚线
                dashed        实线
                dotted        小圆点
        2）border-方位-width 某方向上的边框宽度
            取值：
                像素单位px    需要多宽就设置多少像素
        3）border-方位-color 某方向上的边框颜色
        4）border-方位    某方向上的边框属性连写【复合属性】（没有顺序要求）
            例如：
                border-top: 1px solid red;
                表示设置上边框宽度为1px，实线，红色
        5）border 给四个方向都加上边框【复合属性】（没有顺序要求）
            例如：
                border: 1px solid red;
                表示设置四个方向边框宽度1px，实线，红色
                
    2、margin 外边距
        1）margin-方位 在某个方向上加外边距
            取值：
                像素单位px 需要加多少外边距就设置为多少
        2）margin 在所有方向上设置外边距【复合属性】
            取值：
                像素单位px
            举例：
                margin: 10px 20px 30px 40px;
                表示上外边距10px，右外边距20px，下外边距30px，左外边距40px
            注意：
                margin属性值的书写顺序分别代表上、右、下、左方向，如果缺少像素值，就从对侧补足

        3）margin: 0 auto;
            auto会自动分配左右两侧外边距，让自己居于父元素的中间
            注意：auto属性只对块元素生效！！！【重要】
        4）外边距存在的问题
            a.塌陷现象
                问题描述：
                    给子元素设置margin-top或margin-bottom，这个margin会传递给父元素
                解决方案：
                    给父元素设置边框；
                    给父元素加上属性overflow:hidden;
            b.行内样式设置上下外边距无效
                解决方案：
                    转化成行内块元素
            c.上下外边距重叠
                解决方案：在其中一个元素外套一层盒子，让这个盒子开启BFC（overflow:hidden;）
                
    3、padding 内边距
        1）padding-方位 在某个方向上加内边距
            取值：
                像素单位px 需要加多少内边距就设置为多少
        2）padding 在所有方向上加内边距
            取值：
                像素单位px
            举例：
                padding: 10px 20px 30px 40px;
                    表示上内边距10px，右内边距20px，下内边距30px，左内边距40px
            注意：
                padding属性值的书写顺序分别代表上、右、下、左方向，如果缺少像素值，就从对侧补足

四、盒子模型对宽高的影响
    1、border边框、padding内边距会影响整个盒子的可见宽高；margin外边距不会影响可见宽高，但还是会占位（所占位置会受影响）
    2、没有设置宽度做内边距的时候，左右内边距是不会影响整体宽度（会自动缩减content的宽度来提供给padding，如果设置了宽度，content部分宽度固定，再设置padding时会撑大盒子）

五、选择器进阶
    1、并集选择器        选择器1,选择器2,选择器3,选择器4 {css}
        表示选中选择器1，选择器2，选择器3，选择器4所在的标签
        
    2、交集选择器        选择器1选择器2选择器3选择器4 {css}
        表示选中同时被择器1，选择器2，选择器3，选择器4所选中的标签
        
    3、通配符选择器    * {css}
        表示选中所有标签（包括html、body标签等）
        
    4、子代选择器        选择器1>选择器2>选择器3 {css}
        表示选中选择器1的儿子中选择器2的儿子中的选择器3所在的标签
        
    5、后代选择器        选择器1 选择器2 选择器3 {css}
        表示选中选择器1后代中的选择器2后代中的选择器3所在的标签
        
    6、选择器的权重计算
        通配符<标签选择器<类选择器<id选择器<行内样式
        如果是复合选择器（并集选择器除外），得看选择器中高优先级的选择器数量，数量越多优先级越高

六、清除默认的内外边距
    代码演示：
        * {
            margin: 0;
            padding: 0;
        }