前端Day14笔记

一、背景相关样式 background
    1、background-color 背景颜色
        1）取值：
            具体颜色的英文表达
            十六进制
            rgb
            rgba
            
    2、background-img 背景图
        1）取值：
            url()    括号里存放图片的地址（地址加不加""都可以）
        2）背景图片和img标签图片区别：
            a.背景图片不占位置，img图片占位置
            b.背景图片默认会铺满当前容器，img图片只会显示一张
            
    3、background-repeat 背景图重复平铺
        1）取值：
            repeat        重复平铺
            norepeat    不重复平铺
            repeat-x    水平方向重复平铺
            repeat-y    垂直方向重复平铺
            
    4、background-size 背景图大小
        1）取值：
            ？px，？px        宽度和高度
            cover            等比缩放，直到宽和高都占满容器（必须两个方向都占满）
            contain            等比缩放，直到宽或高占满容器（只需要一个方向占满即可
            
    5、background-position 背景图位置
        1）取值：
            ？px，？px    水平方向位置，垂直方向位置
            水平方位，垂直方位    水平方位（left、center、right），垂直方位（top，center，bottom）
        2）注意：
            用方位名词可以省略垂直方位，此时默认垂直方位为center
            
    6.background-clip 背景裁剪
        1）取值：
            border-box        从边框开始裁剪（所有区域都会显示图片内容）【默认值】
            padding-box        从内边距开始裁剪（border区域不会显示图片内容）
            content-box        从内容开始裁剪（border和padding区域不会显示图片内容
            
    7、background-origin 背景位置起源
        1）取值：
            border-box        从边框开始起源
            padding-box        从内边距开始起源【默认值】
            content-box        从内容开始起源
            
    8、background 背景【属性连写】
        1）取值：
            任意数量的background相关的属性
        2）注意：
            a.相关的属性书写顺序可以打乱
            b.一般不会这样写，因为可读性差，需要写的相关属性较多时比较混乱
            
    9、background-attachment
        1）取值：
            fixed            背景固定在浏览器的窗口
        2）注意：
            这个属性是给body的特殊属性，可以实现浏览器窗口滚动时显示相同的背景
    
            
二、body的背景
    1、浏览器窗口的背景颜色是怎么选择的？
        按照以下的顺序：
        1）先看html是否设置了background-color，如果有，则吸取html的background-color；
        2）如果html没有设置background-color，就找body有没有设置background-color，如果有就吸取body的background-color；
        3）如果html和body都没有设置background-color，那么就不设置浏览器窗口的background-color
        
    2、vh单位
        在background-size属性中，取值单位除了像素px，还有vh单位，100vh相当于当前浏览器窗口的高度

三、精灵图
    1、什么精灵图？
        将很多的小图标合成在一张图片中，这张大图片就叫做精灵图
        
    2、为什么要使用精灵图？
        1）使用精灵图可以减少向服务器发送请求的次数。如果不使用精灵图，每次需要加载图片时都会向服务器发送一次请求
        2）为了提高用户的体验。因为在请求资源期间图片显示处是空白的，如果网络状态不佳会导致用户体验不佳
        
    3、如何使用精灵图？
        1）在background-img属性的url()中填写经精灵图的地址，配合background-position属性调整小图标的位置使其正确显示
        
    4、精灵图制作网址：
        https://www.saoban.cn/css-sprites.html
    

四、网站的icon图标
    1、什么是网站的icon图标？
        位于浏览器上方，网页的标题左侧有一个小图标，默认是灰色的圆形（类似风火轮），这个图标就是网站icon图标，它是一个后缀名为ioc的文件
        
    2、如何设置网站icon图标？
        使用link标签：
            <link rel="shortcut icon" href="">
            属性值shortcut icon是特定的类型（必须得这么写，就好像stylesheet属性值代表关联的类型是样式表）；
            href里写icon图标的地址
            

五、包含块
    1、什么是包含块？
        当前元素的width、height或者left、right、top、bottom、padding、margin...等等属性的属性值设置了百分比的时候，需要找到该元素的某个祖先参照元素的宽高来计算，这个参照元素就是包含块
        
    2、包含块的作用？
        给当前元素做参照，包含块的宽高可以用来计算当前元素中百分比对应的px值
        
    3、包含块宽高的参照规则
        不同属性对应参照的值不同，有的属性参照包含块的高，有的参照包含块的宽，具体如下：
        1）height、top、bottom参照包含块的height
        2）width、left right padding margin 这些设置百分比是根据包含块的width来进行计算
        
    2、怎么确定包含块？
        1）一般情况下包含块是父元素；
        2）如果元素有定位属性，需要根据定位属性来确定包含块：
            a.position属性值为static、relative、sticky或者不写时，包含块就是最近的祖先块级元素（这里的块级元素包括行内块、块）
            b.position属性值为asolute时，包含块就是最近的带有position属性且属性值不为static的祖先元素，如果所有的祖先元素都不满足以上条件，则包含块就是视口（初始包含块，就是浏览器窗口）
            c.position属性值为fixed时，包含块就是视口（初始包含块，就是浏览器窗口）
            
            
六、BFC 区块格式化上下文
    1、什么是BFC？
        区块格式化上下文（Block Formatting Context）
        （对块级的效果）
        独立渲染区域，封闭，不会影响外面区域的布局
    
    2、BFC的特点
        1）布局是从上至下的
        2）它的自动高度会计算上内部浮动元素的高度
        3）它内部的元素上下外边距margin会重叠（塌陷现象）
        4）它不会计算绝对定位和固定定位的高度（如果该元素内部包含绝对定位或固定定位的元素，计算高度时不会算上绝对定位或固定定位的元素高度）
        5）它会忽略浮动元素的布局（并且绕过浮动元素）
        
    3、忽略浮动元素布局特点详解
        1）这句话的意思是本来浮动的布局环绕效果消失，并且开启BFC的元素会紧挨着浮动的元素
        1）第一个浮动，第二个开启BFC，会造成两个元素紧紧挨在一起的效果，这是BFC的特点！（就和两个浮动元素看上去类似）