• div 标签选择器

• .box 类名选择器

• #box　id选择器

• div p 后代选择器

• div.box 交集选择器

• div,p,span 并集选择器

• div>p 子代选择器

• : 通配符

• div+p: 选中div后面相邻的第一个p

• div~p: 选中的div后面所有的p

  CSS3属性选择器

  • ^：开头 $：结尾 ：包含

  • E[title] 选中页面的E元素，并且E存在 title 属性即可。

  • E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。

  • E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。

  • E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。

  • E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。

  • E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。

  • E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。

    CSS3伪元素选择器

    • E::before 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。

    • E::after 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。

      UI库:

      • ant design

      • iview

      • pc用element ui,移动端用vant

        盒模型中的 box-sizing 属性

        • 外加模式：（css的默认方式） box-sizing: content-box; 解释：此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
        • 内减模式：【需要注意】 box-sizing: border-box; 解释：此时设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。

    CSS和HTML结合的三种方式：

    • 行内样式表、
    • 内嵌样式表、
    • 外部样式表

    CSS四种基本选择器：

    • 标签选择器、

    • 类选择器、

    • ID选择器、

    • 通用选择器

      CSS几种扩展选择器：

    • 后代选择器、

    • 交集选择器、

    • 并集选择器

      CSS样式优先级

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类 1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前 :visited 链接被访问过之后 PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候 :active “激活”： 鼠标点击标签，但是不松手时。 :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

• 文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
• 盒子、定位、布局的属性，都不能继承。

• id 选择器
• 类选择器、
• 属性选择器、
• 伪类选择器
• 标签选择器、
• 伪元素选择器

计算权重
权重问题大总结
CSS样式表的冲突的总结
权重问题深入
同一个标签，携带了多个类名
!important标记

• 空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格。

• 高矮不齐，底边对齐：

• 自动换行，一行写不满，换行写。

• 标签分为两种等级

  行内元素
          与其他行内元素并排；
          不能设置宽、高。默认的宽度，就是文字的宽度。
  块级元素
          霸占一行，不能与其他任何元素并列；
          能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
  

• 文本级标签：p、span、a、b、i、u、em。
• 容器级标签：div、h系列、li、dt、dd。

• 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
• 块级元素：所有的容器级标签都是块级元素，还有p标签。
• 块级元素可以转换为行内元素: display: inline
• 行内元素转换为块级元素: display: block;

（1）浮动 float:left **一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。 **所有标签，浮动之后，已经不区分行内、块级了。

浮动的清除
    1：给浮动元素的祖先元素加高度
    2：clear:both;
    3：overflow:hidden

（2）定位 #绝对定位 position: absolute;
绝对定位的盒子脱离了标准文档流。 （1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角： （2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角： （3） 一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。

     # 相对定位   position: relative; 
    让元素相对于自己原来的位置，进行位置调整
    相对定位不脱标
    （1）微调元素
    （2）做绝对定位的参考，子绝父相
   
    # 固定定位 position: fixed;    
    就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。