引入: link外链式引入css
选择器: ID 类选择器 标签 *
       div,p   div p   div>p   div+p   div~p
       序列选择器 - 选中同级别的第几个,常用于 li、p标签上
       属性选择器 - 根据标签的属性名 or 属性名=属性值 查找
       伪类选择器 - 鼠标未访问悬浮点击已访问input和a标签的样式
                  focus只给input标签使用
       伪元素选择器 - 标签内容前后、内容第一个字..
CSS三大特性: 只有以**color、font-、text-、line-开头的属性**才可以继承 ; 优先级
      

容器级文本级标签: 前者可嵌套任意标签,后者只能嵌套文字、图片、超链接.
块级和行内元素: 
    (布局都用块级、行内用于内容的展示)
    块级元素独占一行,块级可设置宽高 p ul li dl dd 
       - ★宽默认跟父元素一样宽,高默认根据内容撑开,若设置百分比宽,父级直到html元素的高都得设置百分比.
    行内设置也没有,宽高会根据内容撑开 span strong
    行内块级别可设置宽高,不会独占一行 img input
display属性: display:none/block/inline/inline-block;  
               - display:"none"与visibility:hidden的区别
字体属性: 字体的大小、颜色 font-size color
文本属性: 垂直水平居中
        div {
            width: 100px;
            height: 200px;
          
            text-align: center;  /* 水平 */
            line-height: 200px;  /* 垂直 */
            text-decoration: none;  /* 通常用来去除a标签的下划线 */
            text-indent: 10px; /* 在水平垂直居中的基础上首行缩进 */
        }
背景属性: background-color
        - 注意:背景图片和插入图片的区别
        - 背景图片的两个应用场景 
        - 精灵图/雪碧图
★ 盒子模型
  content内容 padding内边距 border边框 外边距margin
  要理解一个逻辑: 
     1> 给一个盒子设置宽和高是在给该盒子的内容设置宽和高!!
     2> 给盒子增加padding border不会影响内容区域的尺寸.但会增加整个盒子的大小!!
     3> 盒子div1嵌套了盒子div2 - div2就是div1的内容;div2的margin相当于div1的padding!!
     So,给子盒子增加margin(等同于父盒子增加padding)、子盒子增加border 都会增加父盒子的大小!!
     Q: 那如何在子盒子设置了padding border后,父盒子的大小不变呢?
     A: 很容易想到的是减少子盒子内容区域的大小.也就是减少子盒子的width和hight的尺寸.
        有一个css属性可快速达到这个效果: `box-sizing: border-box;`
     同理,在父盒子设置padding后,保证父盒子不变,得通过减少子盒子的宽高实现.
  内容:
     内容可能是文本也可能是子盒子
  外边距:
     标签与标签之间的距离就是外边距,说白了,外边距是标签边框与标签边框的距离.
     外边距的那一部分是没有背景颜色的,默认是透明的
     外边距合并现象 - 水平叠加、垂直合并(取大的那个)
  居中问题
     1> 让一行内容在盒子中垂直水平居中
     2> 让多行内容在盒子中垂直水平居中
     3> 让子盒子在父盒子中垂直水平居中
  magin-top塌陷问题: 
     父盒子里的<第一个>子盒子默认是紧贴在父盒子的左上角的.若子盒子设置了margin-top,那么会将父盒子往下拉.
     eg: div1 > div2 > (div3+div4)
            div3设置margin-top=10px,那么会导致div2距离div1的上边距为10px.
            div4设置margin-top=10px,会导致div4距离div3上边距为10px.不会有什么塌陷问题.
            (外边距嘛,边框与边框之间的距离,div4的上边距指的是div4的上边框距离div3下边框之间的距离!!)
         若div2本就设置了距离div1上边距为20px
            div3设置margin-top=10px,不会有变化.
            div3设置margin-top=30px,会让div2距离div1的上边距为30px,也就是多加了10px.
     解决方案 - 给父盒子添加css属性, `overflow: hidden; ` 
     参考博客: https://blog.csdn.net/Hukaihe/article/details/51298665

        
        
浮动
   浮动会有个先后顺序,中途会改变后浮动盒子在标准流的位置,然后后浮动的盒子再浮动.
   浮动起来的盒子,是不管在标准流中的时候是块状行内什么类型的元素,都可以设置宽度和高度