前端基础知识day04

1、面试题： 什么是标准文档流？
    常规情况下，元素按照从上至下【div类型】，从左至右【span类型】依次排列
        当上一个元素发生变化时，下一个元素也会随之发生变化

2、宽度高度的默认值
        如果一个盒子  不设置高度，那么高度是由内容撑开
        如果一个盒子，不设置宽度，那么宽度是 使用其父级元素

3、css的浮动
    给某个元素添加浮动之后，当前这个元素占据的空间会丢失， 【不再占据空间】
    其下的一个元素就会自动补位，

    float : left | right | none 【默认值】

    如果水平方向上放不下了，就会自动换行显示 

    使用浮动时，一定要注意 元素 一开始的书写顺序问题！！！

4、盒模型
    1、组成部分
            margin                      === 外边距
                border                  === 边框
                    padding             === 内边距
                        content         === 书写的内容

    2、margin  === 盒子与盒子之间的距离
            如果给一个盒子加了上边距【正的值】；  这个盒子会向下移动，
            如果给一个盒子加了上边距【负的值】；  这个盒子会向上移动，

            如果给一个盒子加了下边距【正的值】；  这个盒子本身不会移动，但是其下方的盒子会向下移动，
            如果给一个盒子加了下边距【负的值】；  这个盒子本身不会移动，但是其下方的盒子会向上移动，

            如果给一个盒子加了左边距【正的值】；  这个盒子会向右移动，
            如果给一个盒子加了左边距【负的值】；  这个盒子会向左移动，

            如果给一个盒子加了右边距【正的值】；  这个盒子本身不会移动，但是其右边的盒子会向右移动，
            如果给一个盒子加了右边距【负的值】；  这个盒子本身不会移动，但是其右边的盒子会向左移动，

            结论：如果在工作过程中，想要实现垂直方向上的两个【兄弟关系的】盒子 之间产生距离，
                只需要给其中一个添加外边距，
                    方案一： 给上边的添加下边距 【推荐使用】
                    方案二： 给下边的添加上边距

            结论：如果在工作过程中，想要实现水平方向上的两个【兄弟关系的】盒子 之间产生距离，
                只需要给其中一个添加外边距，
                    方案一： 给前边的添加右边距 【推荐使用】
                    方案二： 给后边的添加左边距

                水平方向  === 两者之间的距离 永远是两者之和

    3、border  === 盒子的边框  === 设置边框之后，占据空间也会变大
        border : 1px solid pink;
            1px     === 边框的粗细          === 默认也是存在【因为和用户的浏览器设置有关】   

            solid   === 边框的类型          === 必不可少的，如果没有，那么边框也不会显示
                        solid  --- 实线
                        dashed --- 虚线
                        double --- 双实线
                        dotted --- 点线

            pink    ===边框的颜色           === 默认是黑色

    4、padding  === 盒子与内容之间的距离
        需要注意的是：padding的值 不能设置负数

        特别需要注意的是：设置padding之后，盒子的占据空间会变大
            【不想让盒子变大】
                处理方案一： 重新计算宽高值
                处理方案二： 添加 box-sizing: border-box; 【推荐使用】

    ==========================================================================================
    进阶用法
        padding 的四值语法
            四值 10px  20px  30px   40px    ===     上   右  下  左
            三值 10px  20px  30px           ===     上   左右   下
            两值 10px  20px                 ===     上下    左右
            一值 10px                       ===     四个都一样

        margin 的四值语法
            四值 10px  20px  30px   40px    ===     上   右  下  左
            三值 10px  20px  30px           ===     上   左右   下                    
            两值 10px  20px                 ===     上下    左右
            一值 10px                       ===     四个都一样

        border 的单边写法
            border-方位值 【上下左右  -  top  bottom  left  right】
    ==========================================================================================

    特殊用法
        给盒子添加  margin :  0 auto;   能够实现居中

        面试题： 利用边框制作三角形
            {
                width: 0px;
                height: 0px;
                border-top: 100px solid transparent;
                border-bottom: 100px solid pink;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }

            transparent ---> 透明色

    ==========================================================================================

5、calc()  函数

    css 运算函数  = 符合数学运算【可以加 小括号参与】 = 带着单位进行
        运算符左右必须要存在一个 空格 【语法要求】

6、溢出的内容设置为隐藏
    overflow : hidden