css小零碎|【青训营笔记】

这是我参与「第四届青训营」笔记创作活动的的第2天

1.复习选择器权重

继承、=0000
元素选择器=0001
类、伪类、属性选择器=0010
（属性选择器 div[value $="nal"]---权重div：1,[value$ ="nal"]:10 总权重和是11）
id选择器=0100
行内样式表=1000
！important=无限大
权重由四组数字组成但不会进位；
等级判断从左到右，
继承、<元素<类<id<伪类<行内<！important

a:hover=标签+伪类将a当作标签选择器
复合选择器----权重叠加
li标签权重(0,0,0,1)
ul li 标签权重（0,0,0,1+0,0,0,1)=0,0,0,2
就近原则 :选择器相同，选择离标签近的样式

2.复习字体相关

字体：中文与英文混合的时候，建议将只有英文字符的字体写在前面，确保英文使用的是英文字体，而不是微软雅黑这种中英文字符都有的字体。

3.复习属性选择器

属性选择器下面的例子是把 包含标题（title) 的所有元素变为蓝色：

  /*  1.选择有att属性的E元素   E[att] */
[title] { color:blue; }

属性和值选择器下面的实例改变了标题 title='runoob' 元素的边框样式:

 /* 2.选择带有att属性且属性值等于val的E元素  E[att="val"] */
[title=smallYou] { border:5px solid green; }

属性和值的选择器 - 多值下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

[title~=hello] { background-color:blue; }

属性.png

正则匹配属性值选择器


/* 3.选择带有att属性且属性值以val开头的E元素  E[att^="val"] */
input[name^="search"] {
background-color: skyblue;
}

/* 4.选择带有att属性且属性值以val结尾的E元素  E[att$="val"] */
input[value$="search"] {
background-color: pink;
}

/* 5.选择带有att属性且属性值含有val值的E元素  E[att*="val"] */
input[value*="search"] {
border:2px double orange
}

正则属性选择器.png

4.复习结构伪类选择器

nth-child()

 /*1. E:first-child   匹配父元素中第一个子元素E */
        .div1 ul li:first-child {
            background-color: orange;
        }

        /*2.E:last-child   匹配父元素中最后一个子元素E */

        .div1 ul li:last-child {
            background-color: pink;
        }

        /* 3.E：nth-child(n)(n可以是数字，关键字，公式) 匹配父元素中第n个子元素E */

        .div1 ul li:nth-child(2) {
            background-color: skyblue;
        }

  /*  当nth-child(n)里面的为关键字even偶数/odd奇数时 */
  .div2 ul li:nth-child(even) {
      background-color: #4a4a4a;
  }

nth-of-type() nth-typeof()和nth-child()用法类似，但nth-child 先进行子元素排序（将p标签排为1号了）再进行标签选择（从先选择出的标签里再选择li标签），而nth-of-type先从子元素中选出所有的li标签排序，再从中进行标签选择

 /* 此样式无效 因为frist-child  先进行子元素排序（将p标签排为1号了）再进行标签选择（从先选择出的标签里再选择li标签）*/
  .div3 ul li:first-child {
      background-color: green;
  }
  .div3 ul li:first-of-type {
      background-color: orange;
  }
  .div3 ul li:last-of-type {
      background-color: pink;
  }
  .div3 ul li:nth-of-type(2) {
      background-color: skyblue;
  }
<ul>
   <p style="border: 1px solid;">段落标签p</p>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   
 </ul>

5.复习flex布局

flex布局是一维布局，与Grid布局不同。**要使用flex布局，首先我们要记住它的两根轴线主轴和交叉轴

主轴由 flex-direction 定义，可以取 4 个值：

row/column
(row/column)-reverse

flex-direction决定了主轴的方向为x还是y,同时还决定了垂直于主轴的交叉轴的方向。

起始和终止线，根据查阅MDN英文从左至右、阿拉伯文从右至左。row-reverse 可以让元素沿着行的方向显示，但是起始线和终止线位置会交换。
用 flex-wrap 实现多行 Flex 容器

flex-wrap的值设置为wrap，所以项目的子元素换行显示。若将其设置为nowrap，这也是初始值，它们将会缩小以适应容器，因为它们使用的是允许缩小的初始Flexbox值。如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

flex元素身上的3个属性

flex-basis
flex-grow
flex-shrink
这三个属性可以简写为flex:basis grow shrink

flex-basis 定义了该元素的空间大小 ** ，flex 容器里除了元素本身所占的空间以外的剩余空间就是可用空间 。该属性的默认值是 auto

flex-grow/flex-shrink代表了元素对剩余空间的缩放，具体见MDN文档

flex盒子元素间的对齐和空隙 justity-content控制主轴，align-items控制交叉轴。

设置align-items的值为:
flex-start，使 flex 元素按 flex 容器的顶部对齐，
flex-end 使它们按 flex 容器的下部对齐
center使它们居中对齐。

同样 justity-content:也有类似属性

stretch
flex-start/flex-end/center
space-around // 剩余空间平均分布每个元素周围
space-between // 剩余空间平均分布两个元素中间