CSS3杂记

NoobNiu
202 阅读4分钟

css

选择器

  • *{}：通配符选择器
  • p{}：元素/标签选择器
  • .class：类选择器
  • .id:id选择器

属性选择器

<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>
  • [foo]:带有foo属性的
  • [foo=abc]:属性为指定值的
  • [foo~=abc]:属性包含abc的
  • [foo^=abc]:以abc开头的
  • [foo$=abc]:以abc结束的
  • [foo*=abc]:包含abc字串的

文档选择器

  • a b：a内部的b
  • a>b>c:选择父元素为a的b（不越级）
  • a+b：与a相邻的b
  • a~b：a后面的所有b

伪类选择器

  • :root|根元素
  • :ntd-child(n)|第n个子代
  • :nth-of-type(n)|重复出现类型的第n个元素
  • :last-child/:frist-child|最后一个/第一个子代
  • a:link|还未访问
  • a:active|被点击
  • a:hover|获得焦点
  • a:visited|已经被访问的
  • :focus|当前获得焦点的

伪元素

  • ::first-line|第一行
  • ::first-letter|第一个字
  • ::before|在其前面插入一个div
  • ::after|在其后面插入一个div
  • ::selection|被用户选取的部分

优先级

  • ！important--行内--ID选择器--类--标签选择器 详细的计算规则
    同一个元素有两组样式，优先级由ABCD四个值确定。
  • A：有行内样式则为1没有为0
  • B：id选择器出现的次数
  • C：类/属性/伪类出现的次数
  • D：标签/为元素选择器出现的次数

每个样式组有自己的四位优先级码，从A开始比较，较大者胜出，比较B以此类推。 ！improtant除外。

grid

felx是线性一维的布局，在两个一维的轴上做布局。grid则为在平面上做的二位布局，他将空间分为网格，将内容装在网格中。然后根据列线号和行线号对内容进行定位。

image.png

.father{
  display: grid;
  /*100px*3的列*/
  grid-template-columns: 100px 100px 100px;
  /*等同*/
  height: 300px;
  grid-template-columns: repeat(3,33%);
  /*等同*/
  grid-template-columns: repeat(auto-fill,100px);
  /*二三列是第一列的一倍，二倍*/
  grid-template-columns: 150px 1fr 2fr;
  /*行宽设置*/
  grid-template-rows:100px 100px 100px;
  /*行间距*/
  grid-row-gap:20px;
  /*分区与合并*/
  grid-template-areas: 'a a b' 'c d d' 'e e e';
  /*排列逻辑-先列后行并且尽量不要空格*/
  grid-auto-flow: column dense;
  /*单格内部水平对齐方式/垂直对齐方式*/
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  /*格子在父元素中的对齐方式*/
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  /*超出部分行的行高*/
  grid-auto-rows: 50px;
}
.son{
  /*此格子列边框是网格列线的哪条*/
  grid-column-start: 2;
  grid-column-end: 4;
  /*等同*/
  grid-column: 2/4;
  /*列长度是几个网格列宽*/
  grid-column-start: span 2;
  /*水平对齐方式*/
  justify-self: start | end | center | stretch;
  /*垂直对齐方式*/
  align-self: start | end | center | stretch;
}

flex

.father{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  /*space-between与边框之间无距离平均分布/space-around与边框有间距*/
  align-items: center;
}
.son{
  /*排列优先级，越小越靠前*/
  order: -1;
  flex:1;
  align-self: flex-end;
  justify-self: flex-start;
  /*有剩余空间或空间不够这个元素放大或缩小的倍数*/
  flex-grow: 2;
  flex-shrink: 2;
}

filter

filter: name(value);

div{
  /*亮度*/
  filter: brightness(200%);
  /*高斯模糊*/
  filter: blur(5px);
  /*对比度*/
  filter: contrast(200%);
  /*灰度*/
  filter: grayscale(50%);
  /*背景滤镜*/
  backdrop-filter:blur(5px);
}

媒体查询

/*屏幕宽度在600-900时的样式*/
@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

动画/变形/过度/移动

属性含义
animation（动画）用于设置动画属性，他是一个简写的属性，包含6个属性,常与@keyfaram共用
transition（过渡）用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）translate只是transform的一个属性值，即移动。
div{
  /*transition: property duration timing-function delay;*/
  /*    过度：     属性名称   时间     动线曲线    延迟执行*/
  transition: width 2s ease-in 1s;
  /*形变方式：X方向偏移量*/
  transform: translateX(10px);
  /*animation: name duration timing-function delay iteration-count direction play-state fill-mode;*/
  /*   动画：     动画名  动画时间   曲线  延迟时间  循环次数  重复方式   暂停状态   结束时状态是否保持*/
  animation: run 5s ease-in 1s infinite alternate forwards;
}
  @keyframes run {
    0%{transform: rotate(0rad)}
    50%{transform: rotate(180rad)}
    100%{transform: rotate(360rad)}
  }

BFC

图层，一般指显示图层，独立的块级格式化上下文；

  • 根元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute或fixed
avatar
文章
阅读
粉丝