有关CSS的芝士

    1.对网页中元素位置进行排版,美化页面的效果
    2.可以嵌入到HTML文件中编写, 就需要一个style标签
    3.div 选择器 声明了针对页面上哪个/些元素生效
    4.CSS具体设置的属性, 键值对---若干个属性都在 {} 里, 属性之间;分割 键和值:割
    5.CSS的引入方式:
        1.内部样式
        2.内联样式---使用style属性 每个标签都有-里面可以直接写CSS,
        3.外部样式
    6.CSS选择器
        描述了你要选中的页面中 哪个/些元素   {}的样式就是针对这些元素生效的
        有很多种写法
            基础选择器
                1.标签选择器
                    写个标签名字,标签名就表示针对当前页面中所以的指定标签,都要被选中
                2.类选择器
                    可以让样式差异化效果,允许让多个元素引入同一个类
                     . 开头的就是表示一个CSS类
                3.id选择器
                    每个元素都有一个id属性, 值要在页面中是唯一的
                    #开头的表示id选择器
                4.通配符选择器
                    可以让页面所有元素都被选中, 通常用于干掉浏览器的默认样式
                    *{  }
            复合选择器
                把多个基础选择器组合起来了
                    1.后代选择器
                        中间有个空格
                    2.子选择器
                        使用>表示这是子元素的关系
                        不会搜索里面的孙子元素
                    3.并集选择器
                        用逗号分割
                    4.伪类选择器
                        :hover  鼠标放上去
                        :active 鼠标按上去
    7.常用元素属性
        字体属性
            设置字体
                使用front-family
            大小
                使用front-size
            粗细
                使用front-weight 100->900 粗
        文本属性
            颜色
                1. 直接写单词
                2. 写rgb / rgba ---三个数字 每个0-255---a 是透明度 半透明效果
                3. #十六进制数
            对齐
                默认左对齐
                text-align: center;
            装饰
                text-decoration: underline;
            缩进
                text-indent: 18px;
                text-indent: 2em; ---一个em一个文字大小
            行高
                line-height: 10px; = 文字大小+行间距
        背景属性
            颜色
                background-color: blue;
            图片
                 background-image: url(懒羊羊.png);
                    默认是平埔的
                    background-repeat:no-repeat; 可以控制
                    background-position: center; 可以控制位置
            大小
                background-size: 200px;
                    contain变大尽可能把图片显示在内
                    cover变大尽可能拉伸
        圆角矩形
            border-radius: 10px;
    8.元素的显示模式
        独占一行: 块级元素
        不独占一行: 行内元素
        可以使用 display 属性针对行内.块级元素相互转换 display:block
        ---    (display还有一个用途,可以让元素隐藏 display:none)
    9.CSS的盒模型
        页面上的HTML元素都是一个一个矩形, 每个矩形就可以视为''盒子'', 盒子里面就可以装东西
        CSS中通过一些属性来设置
            内边距 padding
                边框与内容之间的距离
            边框 border
                三个属性 粗细,颜色,风格-solid,dotted,dashed
                box-sizing: border-box;加这个属性,可以让边框不撑大盒子
            外边距 margin
                元素之间的距离
    10.弹性布局
        描述元素之间的关系  (相对位置关系) --- 解决了如何在一行里 如何排列元素
        历经用法
            1.最早用表格
                功能有限
            2.基于浮动
                副作用大
            3.弹性布局
                功能强,使用简单 一维的
            4.网络布局
                二维的
        对于 行内元素, 宽度/高度 外边距 都是不生效的
            若想要生效,需要转成块级元素display:block
            但是, 元素独占一行了,现在想水平排开需要
            ---    弹性布局:
                    display:flex 把当前元素,设置成''弹性布局''的容器, 里面的元素就会按照弹性布局的规则来排列(只针对子元素生效) ---要加在div上
                    在弹性布局的父容器这里,
                        设置水平方向的排列方式: 使用 justify-content
                            space-around   space-between
                        设置垂直方向的排列方式: 使用 align-items