css3基础

https://developer.mozilla.org/zh-CN/docs/Web/CSS

• css的由来历史->1996/12 css1.0->20210 css3.0
• css working group 2010

兼容性

https://caniuse.com/

CSS3选择器

属性选择器

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors

1. [attr]表示带有以 attr 命名的属性的元素。
2. [attr=value]表示带有以 attr 命名的属性，且属性值为 value 的元素。
3. [attr^=value]表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
4. [attr$=value]表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
5. [attr~=value]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
6. [attr|=value]表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

<div lang="zh-CN">世界您好！div>

/* 将所有语言为中文的 
 元素的文本颜色设为红色
   无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
div[lang|="zh"] {
  color: red;
}

7. [attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

8. [attr operator value i]
   在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）

UI元素状态伪类选择器

1. :hover hover 鼠标滑入
2. :focus 输入框焦点聚焦
3. :active 激活状态的样式（元素按住不松开）（松开后返回原状态）

<a>baidua>
<input type="text"/>
<div>按住变色div>
<style>
    a:hover{
        color: red;
    }
    input:focus{
        color: red;
    }
    div:active{
        color: red;
    }
style>

• focus active 的对比

    <style>
        button.focus:focus{
            background-color: orange;
        }
        button.active:active{
            background-color: palegreen;
        }
    style>
    <button class="focus">focus测试button>
    <button class="active">active测试button>

4. :enabled :disabled

• :enabled 元素能够输入点击被激活的元素

<input type="text" disabled/>
<input type="password"/>
<style>
    input:disabled{
        background-color: red;
    }
    input[type="password"]:enabled{
        background-color: green;
    }
style>

5. :read-only :read-writed

• 只读和禁用的区别-只读可以进行表单提交,而禁用不可以

6. :checked :default
   :default默认选中 不会随着反复点击而丢失默认样式

<input type="radio" value="radio"/>
<input type="checkbox" value="checkbox" id="read">
<label for="read">readlabel>
<input type="checkbox" value="checkbox" id="play" checked>
<label for="play">playlabel>
<style>
    input:checked{
        outline: 2px solid red;
    }
    input:default{
        outline: 3px solid green;
    }    
style>

7. :indeterminate 不确定状态

<input type="checkbox" id="sleep">
<label for="sleep">sleeplabel>
<style>
    /* 不确定 */
    input:indeterminate+label{
        background-color: hotpink;
    }
style>
<script>
    var inputs = document.getElementsByTagName('input')
    for(var i =0;i<inputs.length;i++){
        inputs[i].indeterminate = true; //此时复选框处于选中和未选中之间的状态
    }
script>

7. ::selection 选中状态

<div id="box">
    <p>sdasd dfd dfsdfsdsadsdadadadsadasda dff
        dfpsdfd[sg]<br> dsfsfspdgsd
        sdfpisdpg
    p>
div>
<style>
    p::selection{
        color: red;
        background-color: yellow;
    }
style>

8. user-select禁止复制

<div id="box">
    <p>sdasd dfd dfsdfsdsadsdadadadsadasda dff
        dfpsdfd[sg]<br> dsfsfspdgsd
        sdfpisdpg
    p>
div>
<style>
    #box{
        user-select: none;
    }
style>

伪类结构选择器

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

伪类选择器优先级高于标签

1. :root
   :root 选择器匹配文档根元素。
   在 HTML 中，根元素始终是 html 元素。

html{}
/*  */
:root{
    backgroundColor:orange
}

3. :not

这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素 table 内部的 a 上, 因为 tr将会被 :not(table) 这部分选择器匹配。

/* 非 
 元素 */
body :not(p) {
  text-decoration: underline;
}

/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
/* 注意，此语法尚未获广泛支持。 */
/* not里面放的是其他选择器  */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

<div class="one">
    one
div>
<div>
    <div class="two">
        two
    div>
div>
<style>
    /* :not(.one) {
        color: red;
    } */

    /* body:not(.one) {
        color: red;
    } */

    /* 只有这个生效 */
    div:not(.one) {
        color: red;
    }
style>

4. :empty

<div class="box">div>
<div class="box">这是空的元素div>
<div class="box">
    
div>
<style>
    .box{
        background-color: red;
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }
    .box:empty{
        background-color: blue;
    }
style>

5. :target
   a标签对应的锚点

<h4 id="one">h4h4>
<p id="two">pp>
<a href="#one">锚点测试h4a>
<a href="#two">锚点测试pa>

<style>
    :target{
        background-color: red;
    }
style>

6. :firest-child
7. :last-child
8. :nth-child(an+b) an+b=1第一个
9. :nth-last-child(n) n=2倒数第二个
10. :first-of-type
11. :last-of-type
12. :nth-of-type
13. :nth-last-of-type

<div>
    <p>第一个子元素p> 
    <h1>第二个子元素h1>
    <span>第三个子元素span>
    <span>第四个子元素span>
div>

p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；
h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；
span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。
然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢
p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
14. :onle-child
CSS伪类:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.

/* Selects each 
, but only if it is the */
/* only child of its parent */
p:only-child {
  background-color: lime;
}
/* 选择main 下面 是父元素唯一的子元素 */
main :only-child {
  color: red;
}

伪类内容选择器

1. first-line first-letter
   伪类选择器 first-line first-letter

• 只能在块级元素中生效

<div id="box">
    <p>sdasd dfd dfsdfsdsadsdadadadsadasda dff
        dfpsdfd[sg]<br> dsfsfspdgsd
        sdfpisdpg
    p>
div>
<style>
    #box{
        width:100px;
        word-wrap: break-word;
    }
    /*表示获取内容的第一行*/
    #box:first-line {
        color: aqua;
    }
    /*表示获取内容的第一个字*/
    #box:first-letter {
        font-size: 50px;
    }
style>

关系选择器

关系选择器是指根据与其他元素的关系选择元素的选择器，常见的符号有空格、>、~，还 有+等，这些都是非常常用的选择器。

1. 后代选择器：选择所有合乎规则的后代元素。空格连接。
2. 并列选择器：选择器之间不需要加空格
3. 直接子元素选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略。>连接。
4. 一般兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。~连接。
5. 相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。

h1+p{color:red;}
h1元素
第一个元素red
第二个元素

文本

文本阴影 text-shadow

文字换行 word-wrap,overflow-wrap

CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行

注：word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

• normal
  行只能在正常的单词断点处中断。（例如两个单词之间的空格）。

• break-word
  表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

• 对于英文 默认换行规则 半角空格和连字符

• 对于中文,任何单字都是一个单独的单词,都会换行,浏览器对于中文,标点符号不能出现在行首

  • 解决,换行处标点符号加空格

• 与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

文字断行word-break

• normal
  使用默认的断行规则。同word-wrap的normal

• break-all
  对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

• keep-all
  CJK 文本不断行。 Non-CJK 文本表现同 normal。

• break-word
  他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。

• 注意：与 word-break: break-word 和 overflow-wrap: break-word 对比，word-break: break-word 将在文本可能溢出其容器的确切位置创建一个断点。

white-space

https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

• normal
  连续的空白符会被合并，换行符会被当作空白符来处理。文本会自动在空白符出换行。
• nowrap
  和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
• pre
  连续的空白符会被保留。在遇到换行符或者br元素时才会换行。 (文本原样显示)
  • pre-wrap(…会自动换行)
    …或者需要为了填充「行框盒子(line boxes)」时才会换行。
  • pre-line(…合并空白符,会自动换行)
    连续的空白符会被合并。在遇到换行符或者br元素，或者需要为了填充「行框盒子(line boxes)」时会换行。
• break-spaces
  与 pre-wrap的行为相同，除了：
  任何保留的空白序列总是占用空间，包括在行尾。
  每个保留的空格字符后都存在换行机会，包括空格字符之间。
  这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

text-overflow单行文本溢出成小圆点

<body>
    <div class="wscont">
        前面也空格了哦,傳前至家法入到飛成子能體點有自習且著就等急且用而四，
        前面也空格了哦,家公看成久各食等海灣整似,这里也有空格哦們等急且用而四，家公看成久各食等海灣整似。
    div>
body>
<style>
    .wscont {
        width: 300px;
        border: 1px solid #bababa;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
style>
html>

语法

css声明,声明以;隔开
css声明块,以{}的形式组合起来
css规则集合,简称css规则
css层叠算法,决定哪个优先级更高

at规则 @keyframes
@charset
@import
@namespace
@media
@font-face

@font-face

<link href="https://fonts.font.im/css?family=Kirang+Haerang" rel="stylesheet">

<body>
    <h2>local fonth2>
    <h2 style="font-family:'Kirang Haerang' ;">online fonth2>
body>
<style>
    /*引入外部字体文件*/
    @font-face {
        font-family: myFirstFont;
        /* font-family就是之后使用时候的字体名称了，如此一来CSS中就可以直接使用本地的字体了 */
        /*eot格式兼容IE*/
        src: url(fonts/AdineKirnber.eot);
        /*ttf格式兼容非IE*/
        src: url(fonts/AdineKirnber.ttf);
    }

    h1 {
        font-family: myFirstFont;
        font-size: 4em;
    }
style>
html>

布局

columns

• <‘column-width’> || <‘column-count’>

https://developer.mozilla.org/zh-CN/docs/Web/CSS/columns

<p class="content-box">
    This is a bunch of text split into three columns
    using the CSS `columns` property. The text
    is equally distributed over the columns.
p>
<style>
    .content-box {
        border: 2px solid red;
        width: 450px;
        /* 分为三列 */
        /* columns: 3; */
        /* column-count: 3; */

        /* 每列100px。最多5列 */
        /* columns: 100px 5; */
        
        /* column-width: 225px;*/
        
        /* 每列100 共四列 */
        column-width: 100px;
        
        /* 间隔空白的大小 */
        column-gap: 2em;

        /* 间隔边框 不是最外边的边框*/
        /* column-rule: 1px solid red; */

        /* 同上 */
        column-rule-width: 5px;
        column-rule-style: ridge;
        /* dotted dashed solid double groove ridge inset outset*/
        column-rule-color: red;
    }  
style>
``
* 可以通过父级元素的字体大小font-size 控制间隔符的大小
* 但也会影响父级元素下的其他字体元素
* 建议使用column-gap 控制间隔的大小（gap是间隙的意思）

* 设置标题 column-span
```html
<div class="content-box">
    <h5>TITLEh5>
    <p>This is a bunch of text split into three columnsp>
    <p>using the CSS `columns`property. p> 
    <p>>The textis equally distributed over the columns.p>
div>
<style>
    .content-box {
        border: 2px solid red;
        width: 450px;
        column-count: 3;
        column-rule: 2px solid red;
    } 
    h5{
        text-align: center;
        column-span: all;
    } 
style>

颜色

英文

16进制

RGB

RGBA

• a代表透明度0.0-1

background-color: rgba(0,0,0,.5);
/* rgba(0,0,0,0.5); */

hsl

background-color: hsl(120,70%,12%);
/* hue色调-360~360的整数 saturation饱和度百分比 light亮度百分比; */

hsla

渐变色background-image

• 渐变色实际上是一种图片

<div>div>
<style>
    div {
        width: 100px;
        height: 100px;
        /* 线性渐变 */
        /* background-image: linear-gradient(red,green); */
        /* background-image: linear-gradient(red 0,green 100%); */
        /* background-image: linear-gradient(red 0,yellow 50%,green 100%); */
        background-image: linear-gradient(to right,red 0,yellow 50%,green 100%);
        background-image: linear-gradient(to top right,red 0,yellow 50%,green 100%);
        background-image: linear-gradient(65deg,red 0,yellow 50%,green 100%);
    } 
style>

布局2

flex一维布局

• viewport

<meta name="viewport" content="width=device-width, initial-scale=1">
    

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

• 任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

• 行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

• 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

• 容器的属性

  1. flex-direction: 决定主轴的方向（即项目的排列方向）
     flex-direction: row | row-reverse | column | column-reverse;
  2. flex-wrap: flex-wrap属性定义，如果一条轴线排不下，如何换行。
     flex-wrap: nowrap | wrap | wrap-reverse;

  3. flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

  4. justify-content: 定义了项目在主轴上的对齐方式。
     justify-content: flex-start | flex-end | center | space-between | space-around;
  5. align-items: 定义项目在交叉轴上如何对齐。
     align-items: flex-start | flex-end | center | baseline | stretch;
     • stretch 如果子元素没有设置高度,此时高度拉满
  6. align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
     align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• 项目的属性

  1. order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  2. flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  3. flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  4. flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）.浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
     • flex-basis: 100%;此项将占据整轴,没有剩余空间

  5. flex: flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
     该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

  6. align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
     该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

• 阮一峰骰子布局和圣杯布局

• 6个骰子布局

<div class="box">
    <span class="item">span>
    <span class="item">span>
    <span class="item">span>
    <span class="item">span>
    <span class="item">span>
    <span class="item">span>
div>
<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: black;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;
    }

    .item:nth-child(4){
        flex-basis: 20%;
        margin: 0 40%;
    }

    .item {
        margin: 10px;
        background-color: yellowgreen;
        width: 60px;
        height: 60px;
    }
style>

• HTM5圣杯布局

<html>
<head>
    <style>
        header,
        section,
        footer,
        main,
        nav,
        aside {
            outline: 2px solid;
            margin: 5px;
        }

        /* 以下为整个页面的布局 */
        body {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* 从上到下3个子元素,中间子元素设为自扩大 */
        header,
        footer {
            height: 50px;
        }

        section {
            flex: 1;
            display: flex;
        }

        /* 左右固定大小 中间自适应 */
        nav,
        aside {
            width: 100px;
        }

        main {
            flex: 1;
            background-color: yellowgreen;
        }
    style>
head>
<body>
    <header>标题栏topheader>
    <section>
        <nav>左边导航栏leftnav>
        <main>主内容main，自动伸缩main>
        <aside>右边right提示栏aside>
    section>
    <footer>页脚栏footerfooter>
body>
html>

• 京东布局-todo

<style>
    body {
        margin: 0;
        background-color: #f2f3ef;
    }

    h3 {
        font-weight: normal;
        margin: 0;
    }

    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    i {
        font-size: normal;
    }

    ul,
    li,
    div {
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
    }

    img {
        width: 100%;
    }

    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }

    /* ul::after,
    div::after{
        content: "";
        display: block;
        clear: both;
    } */

    .floor-header{
        border: 1px solid black;
        width: 1190px;
        height: 45px;
        line-height: 45px;
        text-align: center;
    }
    .floor-header h3{
        /* border: 1px solid black; */
        position: relative;
        width: 150px;
        height: 45px;
        margin: 0 auto 20px;/*居中*/
        padding: 0 50px; /*撑开横线*/
    }
    /* 设置两边短线 */
    .floor-header h3::after,
    .floor-header h3::before{
        content: "";
        display: block;
        position: absolute;/*相对于h3的内部*/
        top: 50%;
        width: 50px;
        height: 3px;
        background-color: #000;
    }
    .floor-header h3.floor-title::before{
        left: 0;/*相对于元素的内部 left>0 向左 left<0 向右*/
    }
    .floor-header h3.floor-title::after{
        right: 0;
    }

    /* --------------------- */
    .show-wrapper{
        width: 1190px;
        height: 450px;
    }
    .show-wrapper .show-box{
        float: left; /* 块级元素一排显示 */
        width: 390px;
        height: 100%;
        background-color: #fff;
        margin-right: 10px;
    }
    .show-wrapper .show-box.last{
        margin-right: 0;
    }
    .show-wrapper .show-box .show-header{
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
    }
style>
<body>
    <div class="floor-header">
        <h3 class="floor-title">智能先锋h3>
    div>
    <div class="show-wrapper">
        <div class="show-box left-box">
            
            <div class="show-header">
                <a href="javascript:;">
                    <h3 class="show-hd-title">手机频道h3>
                    <i class="icon-arrow">i>
                    <span class="show-subtitle">一个极客的诞生span>
                a>
            div>
        div>
        <div class="show-box middle-box">div>
        <div class="show-box right-box last">div>
    div>
body>

grid二维布局

两个主轴xy
二维布局

动画

Value_definition_syntax

• 组合符号 :https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax

transforms属性:transform-origin,transform

1. transform-origin
   指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

2. transform
   指定作用在元素上的变形。取值为空格分隔的一系列变形的列表，他们会像被组合操作请求一样被分别执行。
   https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle

3. 笛卡尔坐标系和右手定则

   • 伸出右手拇，食，中三指成垂直状，拇指——对应x轴正向；食指——对应y轴正向；中指——对应z轴正向。
   • CSS 3D转换采用的是左手坐标系,Z轴正向面向屏幕。

4. transform-function Scale, Rotate, Translate and Skew

   • Scale 缩放的作用就像你可以放大和缩小目标元素。默认的比例值是1，它是原始大小的乘数
   • Rotate 180°的翻转会使物体上下颠倒，360°的翻转则会使物体回到原来的直立位置。
   • Translate
   • Skew 在水平轴(X)或垂直轴(Y)上倾斜对象。

   DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Documenttitle>
       <style>
           .box{
               position: absolute;
               top: 200px;
               /* 居中的写法 */
               /*
               1. left: 50%;
               margin-left: -150px; 
               2. left: calc(50% - 150px);
               */
               left: calc(50% - 150px);
               width: 300px;
               height: 300px;
               padding: 50px;
               border: 1px solid #000;
           }
           .box::before{
               content: "";
               position: absolute;
               left: 0;
               top: 50%;
               z-index: 9;
               width: 400px;
               height: 3px;
               background-color: #000;
               
           }
           .box::after{
               content: "";
               position: absolute;
               left:50%;
               top: 0;
               z-index: 9;
               width: 3px;
               height: 400px;
               background-color: #000;
               
           }
           .inner{
               width: inherit;
               height: inherit;
               background-color: orange;
               transform: rotate(70deg);
           }
       style>
   head>
   <body>
   <div class="box">
       <div class="inner">div>
   div>
   body>
   html>
   

5. rotate(a)

   • 通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):
   • rotate3d(x, y, z, a)
   • rotateX(a)是 rotate3D(1, 0, 0, a)的简写形式。
   • rotateY(a) 是 rotate3D(0, 1, 0, a) 的简写形式。
   • rotateZ(a) 是 rotate3D(0, 0, 1, a) 的简写形式。

6. scale(sx) or scale(sx, sy)

   • scale3d(sx, sy, sz)
   • scaleX(s)
   • scaleY(s)
   • scaleZ(s)

7. skew(ax)或skew(ax, ay)

   • skewX(a)
   • skewY(a)

8. translate(tx)或translate(tx, ty)

   • translate3d(tx, ty, tz)
   • translateX(t)
   • translateY(t)
   • translateZ(t)
   • transform: translate(120px, 50%);

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zHdqTVIE-1652096408709)(https://gitee.com/jingyu7/pic/raw/master/202112311301597.png)]

transitions过渡

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

• transition-property
  指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。

  • 默认值是all;所有属性

• transition-duration
  指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长

  • 默认值是easy

• transition-delay
  指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

• transition-timing-function
  指定一个函数，定义属性值怎么变化。
  缓动函数 Timing functions 定义属性如何计算。

  • ease：默认值，逐渐变慢
  • linear：匀速
  • ease-in：加速
  • ease-out：减速
  • ease-in-out：先加速，后减速
  • 贝塞尔曲线(也叫三次贝塞尔曲线)(cubic-bezier):cubic-bezier(x1, y1, x2, y2)
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A8f0qL8c-1652096408710)(https://gitee.com/jingyu7/pic/raw/master/202112302323858.png)]
    P0：默认值 (0, 0)
    P1：动态取值 (x1, y1)
    P2：动态取值 (x2, y2)
    P3：默认值 (1, 1)

• transition简写语法：后面可以写多组属性动画,以逗号分隔

  div {
      transition:    ;
  }
  

• transition实例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            position: absolute;
            top: 200px;
            left: calc(50% - 150px);
            width: 300px;
            height: 400px;
            background-color: orange;
        }
        div:hover{
            transform: rotate(90deg);
            transition-property: transform;
            transition-duration: 1.5s;
            transition-delay:.5s;
            transition-timing-function: ease-in-out;
        }
    style>
head>
<body>
 <div>div>
body>
html>

• transition多个属性值

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            position: absolute;
            top: 200px;
            left: calc(50% - 150px);
            width: 300px;
            height: 400px;
            background-color: orange;
        }
        div:hover{
            width: 100px;
            height: 100px;
            transform: rotate(90deg);
            transition: transform 2s , width 2s ,height 2s;
        }
    style>
head>
<body>
 <div>div>
body>
html>

Animation动画

1. animation-name
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-name
   animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。

2. @keyframes
   from等价于 0%。
   to等价于 100%。
   percentage 动画序列中触发关键帧的时间点，使用百分值来表示。

   @keyframes slidein {
   from {
       transform: translateX(0%); 
   }
   
   to {
       transform: translateX(100%);
   }
   }
   

   • 重复定义
     如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。
     属性个数不定

   /* 如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉） */
   @keyframes identifier {
   0% { top: 0; left: 0; }
   30% { top: 50px; }
   68%, 72% { left: 50px; }
   100% { top: 100px; left: 100%; }
   }
   /* 例子中，top 属性分别出现在关键帧 0%、30% 和 100% 的中，而 left 属性分别出现在关键帧 0%、68%、72% 和 100% 中。 */
   

   • 同一关键帧中的相同属性被重复定义

   /* 如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。 */
   @keyframes identifier {
   0% { top: 0; }
   50% { top: 30px; left: 20px; }
   50% { top: 10px; }
   100% { top: 0; }
   }
   

   • 关键帧中的 !important

   @keyframes important1 {
   from { margin-top: 50px; }
   50%  { margin-top: 150px !important; } /* 忽略 */
   to   { margin-top: 100px; }
   }
   

3. animation-duration
   animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。

4. animation-timing-function

5. animation-delay

6. animation-iteration-count

   • infinite无限循环播放动画.
   • number 定义动画在结束前运行的次数 可以是1次 无限循环.
   • 如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

7. animation-direction
   指示动画是否反向播放 reverse

8. animation-fill-mode
   设置CSS动画在执行之前和之后如何将样式应用于其目标

   • none
     动画未执行前不会有动画样式,动画结束后,动画样式消失
   • forwards
     动画结束后保留动画最后一个关键帧样式
   • backwards
     动画在延迟执行之前就立即应用第一个关键帧中定义的值
   • both
     动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

9. animation-play-state
   定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
   恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

   • running
     当前动画正在运行。
   • paused
     当前动画已被停止。

• animation初始值

/* as each of the properties of the shorthand: */
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

• animation语法

/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes name | duration | easing-function | delay */
animation: slidein 3s linear 1s;
/* @keyframes name | duration */
animation: slidein 3s;

• 案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .polling_message {
            color: white;
            float: left;
            margin-right: 2%;
        }

        .view_port {
            background-color: black;
            height: 25px;
            width: 100%;
            overflow: hidden;
        }

        .cylon_eye {
            background-color: red;
            background-image: linear-gradient(to right,
                    rgba(0, 0, 0, .9) 25%,
                    rgba(0, 0, 0, .1) 50%,
                    rgba(0, 0, 0, .9) 75%);
            color: white;
            height: 100%;
            width: 20%;
            animation: 4s linear 0s infinite alternate move_eye;
        }

        /* keyframes定义动画的实现 帧 */
        @keyframes move_eye {
            from {
                margin-left: -20%;
            }

            to {
                margin-left: 100%;
            }
        }
    style>
head>

<body>
    <div class="view_port">
        <div class="polling_message">
            Listening for dispatches
        div>
        <div class="cylon_eye">div>
    div>
body>
html>

transform-function perspective() perspective-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective()
perspective(d) d>=0 best >>0
Sets the distance between the user and the z=0 plane.

transform-function translate3d()

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate3d()

• translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

1. translate3D 可以调用GPU进行3D加速
2. translate 因为是 2D 移动，所以不能调用GPU进行3D加速
3. translate3D 可以在一个 z-axis （Z轴） 方向进行移动，正值会感觉元素离你更近，负值会感觉更远，不像translate只能平移。
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translateZ
4. translate 是二个维度的向量
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate
5. translate3D 是三个维度的向量
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate3d
   translate3D 和 translate 都有的 X 和 Y 移动

transform-style

设置元素的直接子元素是位于 3D 空间中还是平面中。

• flat
  设置元素的子元素位于该元素的平面中。
• preserve-3d
  指示元素的子元素应位于 3D 空间中。

backface-visibility

指定当元素背面朝向观察者时是否可见。
元素的背面是其正面的镜像。虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见。 （此属性对 2D 变换没有影响，它没有透视。）

• visible
  背面朝向用户时可见。
• hidden
  背面朝向用户时不可见。

3种居中写法和3D动画加速

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .wrap{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            /* 使容器内元素居中 */
            /* 1. 容器设置padding,容器内元素宽高设为100% */
            /* padding: 100px; */
            /* 2. flex弹性布局 */
            /* 3. 绝对定位:容器相对定位,容器内元素绝对定位 */
            /* 3.1 容器内元素,top,left:50%;margin-left,margin-top为元素对应高宽的一半 */
            /* 3.2 使用calc 直接设置*/
            /* 3.3 容器内元素,top,left:50%;使用transform: translate(-width,-height); */
            /* 3.4 对于容器内元素宽高不定的情况可以设置 transform: translate(-50%,-50%);  3.5 也可以开启GPU加速 transform: translate3d(-50%, -50%, 0);
            */
            position: relative;
            background-color: green;

            transform-style: preserve-3d;
            opacity: .7;
        }
        .box{
            /* height: 100%;
            width: 100%; */
            background-color: orange;

            width: 100px;
            height: 100px;
            position: absolute;
            /* top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px; */
            /* top: calc(50% - 50px);
            left: calc(50% - 50px); */

            top: 50%;
            left: 50%;
            /* transform: translate(-50px,-50px); */
            font-size: 20px;
            /* 方案3几种方式都是对容器内的元素宽高已知的情况下设置的 */
            /* 加入容器内的元素是一个块文本,而文本内容不确定,如何设置 */
            /* transform: translate(-50%,-50%);  */

            /* 模拟z-index, 容器要设置 transform-style: preserve-3d; */
            /* transform: translateZ(-1px); */
            transform: translate3d(-50%,-50%,-1px);

            /* transform:xx3d属性 会开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能的一系列活动。 */
            /* GPU固然加速了网页，但是同时它增加了内存的使用，如果3d动画过多可能会导致严重的性能问题 */
            /* 平时我们写的css3动画（没有触发硬件加速的）都是使用浏览器软件渲染引擎来执行,浏览器会自动对css树进行优化*/
        }
    style>
head>
<body>
    <div class="wrap">
        <div class="box">this is a testdiv>
    div>
body>
html>

响应式设计

视口

• viewport视口:宽度为设备宽度.初始大小为1倍

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询@media

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

• 媒体类型
  媒体类型（Media types）描述设备的一般类别。
  除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。

  • all
    适用于所有设备。
  • screen
    主要用于屏幕。一般都是使用这个类型

• 媒体查询引入方式

  1. 内联样式 2种写法
     • style>media
     • style中media属性
  2. 外部样式 2中写法
     • link中media属性
     • style>import meida

  <html>
  <style>
      #div {
          margin: 15em auto;width: 250px;height:  250px;
      }
      /* 1. 定义子style标签里面 */
      @media screen and (min-device-width:100px) and (max-device-width:500px) {
          #div {
              background-color: red
          }
      }
      @media screen and (min-device-width:501px) and (max-device-width:1000px) {
          #div {
              background-color: green
          }
      }
  style>
  
  <style media="(min-device-width:1001px) and (max-device-width:2000px)">
      #div {
          background-color: yellow
      }
  style>
  
  
  <link href='css/test.css' ref="stylesheet" media="(min-device-width:0px) and (max-device-width:100px)"> 
  
  <style>
      /* 2. import media引入外部样式*/
      /* style中可以使用import引入外部css文件 */
      @import url(css/test.css);
      /* 也可以使用媒体查询 */
      @import url(css/test.css) screen and (min-device-width:0px) and (max-device-width:100px);
  style>
  <div id="div">div>
  html>
  

• link和import的区别

  • 本质的差别：link属于XHTML标签，而@import是CSS提供的语法。
  • 加载顺序的差别：link是异步加载,@import同步加载,需要等待css资源下载完成
  • 兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，而link标签无此问题。
  • DOM控制:link支持使用Javascript控制DOM去改变样式；而@import不支持。
  • 权重:link的权重高于@import × @import权重等于link,谁在后显示谁×
    import css 加载机制
    • @import url(./test.css); 必须写在css文件或style的开头,否则不生效
    • 所以我们的import会写在普通css的前面, 被后面的普通样式覆盖
    • 后面导入的样式会覆盖前面的

    @import url('./test.css'); /* background-color: red */
    /*@import url(./test.css);*/
    @import url('./test2.css'); /* background-color: green; */
    body{
        background-color: blue
    }
    

• 媒体查询中的逻辑运算和视口方向

  • 视口方向orientation:landscape(横屏) | portrait(竖屏)
  1. 与 and

  @media screen and (min-width: 400px) and (orientation: landscape) {
      body {
          color: blue;
      }
  }
  

  2. 或 ,逗号分开

  @media screen and (min-width: 400px), screen and (orientation: landscape) {
      body {
          color: blue;
      }
  }
  

  3. 非,not

  /**你可以用not操作符让整个媒体查询失效。这就直接反转了整个媒体查询的含义。
  因而在下面的例子中，文本只会在朝向为竖着的时候变成蓝色。*/
  @media not all and (orientation: landscape) {
      body {
          color: blue;
      }
  }
  @media not screen and (min-width: 400px) {
      body {
          color: blue;
      }
  }
  

em rem

https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

• em 相对长度单位，这个单位表示元素的 font-size 的计算值。如果用在font-size 属性本身，它则表示元素继承的 font-size 值。

  • 子元素字体大小的em是相对于父元素字体大小
  • 元素的width/height/padding/margin用em的话是相对于该元素的font-size
  • font-size在很多地方都会被设置,对布局影响较大,所以出现了rem

• rem 相对于根标签html的font-size的大小

  • 动态设置html font-size

      document.documentElement.style.fontSize 
      = document.documentElement.clientWidth / 37.5 + 'px'
  

• 最佳实践: rem + 媒体查询

<html>
<head>
    <style>
        html{font-size: 12px;}
        .b{ font-size: 1rem;}
        .c{ font-size: 3rem;}
        /* 竖屏 */
        @media screen and (orientation:portrait) {
            .a{ font-size: 3rem;}
        }
        /* 横屏 */
        @media screen and (orientation:landspace) {
            .a{ font-size: 1rem;}
        }
    style>
head>
<body>
    <div class="wrap">
        <p class="a">横屏是1个rem,竖屏是3个remp>
        <p class="b">我是1个remp>
        <p class="c">我是3个remp>
    div>
body>
html>

webkit属性

-webkit-appearance

https://developer.mozilla.org/zh-CN/docs/Web/CSS/appearance
用于按照 浏览器所在的操作系统所用主题，以平台本地的样式显示元素。

• 模拟button样式,只能手机上显示

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style> 
        div{
            width: 500px;
            -webkit-appearance: button; 
            -moz-appearance: button;
        }
    style>
head>
<body>
    <div>divButtondiv>
body>
html>

-webkit-filter.filter滤镜属性

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
将模糊或颜色偏移等图形效果应用于元素。
滤镜通常用于调整图像，背景和边框的渲染。

/* 模糊 */
filter: blur(5px); 

• blur() 函数将高斯模糊应用于输入图像
• brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。
  值为 0％ 将创建全黑图像。
  值为 100％ 会使输入保持不变。
  其他值是效果的线性乘数。
  如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。
• contrast() 函数可调整输入图像的对比度。
  值是 0% 的话，图像会全黑。
  值是 100%，图像不变。
  值可以超过 100%，意味着会运用更低的对比。
  若没有设置值，默认是 1。
• opacity() 转化图像的透明程度。

webkit-line-clamp

• -webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp
  在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,
  并且在内容显示为指定行数后还会显示省略号(ellipsis ).

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

-webkit-text-fill-color

The -webkit-text-fill-color CSS property specifies the fill color of characters of text.
If this property is not set, the value of the color property is used.

    


    
This text is green.

-webkit-text-stroke文字描边

为文本字符指定了宽 和 颜色 .

p{
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

-webkit-box-reflect文字倒影

p{
   -webkit-box-reflect: below 0 linear-gradient(transparent, white); 
}

设备像素和设备独立像素

• 设备像素
  又称物理像素（physical pixel），设备能控制显示的最小单位
  我们常说的分辨率指的就是物理像素，比如 iphone 6S Plus 的分辨率是 1920x1080，表示横向有 1920 个物理像素，竖向有 1080 个物理像素。
• 设备独立像素(DIP)
  Device Independent Pixels 的简写。
  独立于设备的用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素。
  所以它只是一个虚拟像素单位，那么为什么会有这种虚拟像素的产生呢？举个例子，iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸，但 iPhone 3GS 的分辨率是 320x480，iPhone 4/4s 的分辨率是 640x960，这也就是意味着同样长度的屏幕，iPhone 3GS 有 320 个物理像素，iPhone 4/4s 有 640 个物理像素。如果我们按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位。