• CSS3------CSS大结局

    首先是渐进增强和优雅ji降级

     简单的说：渐进增强先保证最基本的功能，然后根据高级浏览器，进行改进

    而优雅降级，先构建完整功能，再对低级的兼容。

    层级选择器：

    1. <header>
    2.     <style>
    3.     .child + li{
    4.         background:green;
    5.     }
    6.     
    7.     /*.child ~ li{
    8.         background:green;
    9.     }*/
    10.     </style>
    11. </header>
    12.  
    13. <body>
    14.     <div>
    15.        <ul>
    16.             <li class = "child">111111</li>
    17.             <li>222222</li>
    18.             <li>333333</li>
    19.             <li>444444</li>
    20.             <li>555555</li>
    21.        </ul>
    22.     </div>
    23. </body>

    +:表示当前元素的后一位

    ~:表示当前元素的所有亲兄弟

    属性选择器：

    1. [class]{background:yellow;}
    2. /*有class的都变黄*/
    3.  
    4.  
    5. div[class]{background:green;}
    6. /*div且带有class的背景颜色都变绿*/
    7.  
    8. div[class = box1]{background:green;}
    9. /*div且带有class叫box1的背景颜色都变绿*/
    10.  
    11. tips:
    12.  
    13. divbox1{
    14. }
    15.  
    16. div box1{
    17.  
    18. }
    19. /*他们之间的区别，有空格是儿子，没有空格是叫box1的div*/

    模糊匹配:

    1. /*以这个字母开头的*/
    2. class ^= "b" 
    3.  
    4. /*以这个字母结尾的*/
    5. class &= "b"
    6.  
    7. /*包含这个这个字母的*/
    8. class *= "b"

    结构伪类选择器：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         .box div:first-child
    10.         {
    11.             background-color: rgb(0, 255, 255);
    12.         }
    13.         .box div:nth-child(2)
    14.         {
    15.             background-color: coral;
    16.         }
    17.         .box div:last-child{
    18.             background-color: tomato;
    19.         }
    20.         .box{
    21.             width: 200px;
    22.             height: 600px;
    23.             border: 1px;;
    24.         }
    25.         .box div{
    26.             width: 200px;
    27.             height: 200px;
    28.             background-color: chartreuse;
    29.             border: 1px;;
    30.         }
    31.     </style>
    32. </head>
    33. <body>
    34.     <div class = "box">
    35.         <div></div>
    36.         <div></div>
    37.         <div></div>
    38.      </div>
    39. </body>
    40. </html>

    目标伪类选择器：

    E:target 选择匹配E的所有元素

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         div{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.         }
    14.  
    15.         div:target{
    16.             background-color: greenyellow;
    17.         }
    18.     </style>
    19. </head>
    20. <body>
    21.     <ul>
    22.         <li><a href="#a">1</a></li>
    23.         <li><a href="#b">2</a></li>
    24.         <li><a href="#c">3</a></li>
    25.     </ul>
    26.     <div id ="#a"></div>
    27.     <div id ="#b"></div>
    28.     <div id ="#c"></div>
    29. </body>
    30. </html>

    目标伪类选择器：

    1. E:enabled    匹配所有用户界面中处于可用元素的E元素
    2. E:disabled   匹配所有用户界面中处于不可用元素的E元素
    3. E:checked    匹配所有用户界面中处于选中元素的E元素
    4. E:selection  匹配所有用户界面中处于高亮元素的E元素
    5.  
    6. appearance :none;

    否定和动态伪类选择器：

    1. 否定: E:not(s) 匹配除S的元素E
    2.  
    3. 动态：
    4.  
    5. E:link:
    6.  
    7. E:visited:
    8.  
    9. E:active:
    10.  
    11. E:hover:

    文本阴影：

    1. text-shadow:10px 10px 10px red;
    2. 第一个10px:水平方向位移
    3. 第二个10px:垂直方向位移
    4. 第三个10px:模糊程度
    5. 第四个：阴影颜色

    盒子阴影(box-shadow)：

    1. h-shadow:必须有，水平阴影，可以负数，
    2. v-shadwo:必须有，垂直阴影，可以负数，
    3. blur:模糊距离
    4. spread:阴影大小
    5. color:阴影颜色
    6. inset:内侧阴影

    圆角边框：

    1. border-radius:10px;
    2.  
    3. border-top-left-radius:10px;/*左上*/
    4.  
    5. 一个值：四个角一样
    6.  
    7. 二个值：对角一样
    8.  
    9. 三个值：左上 右下右上 右下
    10.  
    11. 四个值：顺时针 左上 左下 右下 右上
    12.  
    13. border-radius：30px/60px;
    14.  
    15. 30px:是水平距离
    16. 60px:是垂直距离
    17.  
    18. border-radius：100%;

    字体引入： 

    font-face是css3中的一个模块，把自己定义的web字体嵌入到我的网页。

    怪异盒模型：

    怪异盒子模型和盒子模型的区别：

     

    标准盒子的width是content的宽

    怪异盒的width是border的宽

    1. box-size:content-box;/*标准盒模型*/
    2. box-size:border-box;/*怪异盒模型*/

    弹性盒子(贼适合移动端)：

    display:flex;

    1.子元素默认横向排列

    2.用span,行内元素变成了块级元素

    3.只有一个元素，margin：auto,自动居中。

    可以修改主轴方向：

    默认主轴方向是水平方向

    1. flex-direction:row;            /*主轴水平*/
    2. flex-direction:colunmn;        /*主轴垂直*/
    3. flex-direction:row-reverse;    /*主轴水平方向*/
    4. flex-direction:column-reverse; /*主轴垂直反向*/

    主轴侧轴对齐方式：

    1. align-items:center;
    2. justify-content:flex-start;
    3. /*flex-start*/
    4. /*flex-end*/
    5. /*flex-center*/
    6. /*flex-space-between*/
    7. /*flex-around*/

    折行与行间距：

    内容多了，自动换行，弹性盒特点

    flex-wrap:wrap;

    项目(弹性盒里面的元素叫项目)对齐方式：

    纵轴：与宽度有关

    横轴：与高度有关

    项目有个属性：order,按顺序排序，默认值为0，数字越大，排名越靠后。

    1. align-self:flex-start;
    2. align-self:flex-end;
    3. align-self:center;
    4. align-self:baseline;
    5. align-self:stretch;

    项目剩余宽高：

    用弹性盒设置三栏布局：把两个宽高设定好，剩下的设置为flex:1,自动占满。

    1. div1,div3{
    2.     flex:1;
    3. }
    4.  
    5. div2{
    6.     flex:2;
    7. }

    模拟器上显示分辨率：

    css像素：设备上的独立像素

    物理分辨率：设备像素

    设备像素比 = 物理像素/css像素

    设计稿：（1）百分比

                   （2）弹性盒布局

                   （3）rem布局

                   （4）meta viewport

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

    这句话对移动端至关重要！块级不写宽度就是100%

    1. flex-shrink:1;  /*挤压*/
    2. flex-shrink:0;  /*不允许挤压*/
    3. overflow:auto;  /*溢出*/

    多列布局

    1. column-count:规定元素应该被分割的列数
    2. column-gap:规定列之间的间隔大小
    3.  
    4. /*列边框*/
    5. column-rule-color:列之间的颜色
    6. column-rule-style:列之间的间隔
    7. column-rule-width:列之间的宽
    8.  
    9. /*高度自适应*/
    10. column-fill:auto;
    11. column-fill:balance;
    12.  
    13. /*跨列*/
    14. column-span:none; /*不跨*/
    15. column-span:all;  /*跨所有列*/
    16.  
    17. column-width：列宽
    18.  
    19. break-inside:avoid;
    20. /*禁止折行*/

    响应式布局------媒体查询:

    固定布局，可切换布局，弹性布局，混合布局。特点自己查。

    媒体查询:

    媒体查询结构：

    1. @media all and(min-width:320px)
    2. {
    3.     body{background-color:blue;}
    4. }
    5.  
    6.  
    7. 屏幕最小
    8. (min-width:320px)
    9.  
    10. 屏幕最大
    11. (max-width:320px)
    12.  
    13. (min-width:320px)and(max-width:640px)

     

    响应式布局的优点：解决不同设备的适应性问题

    缺点：兼容多种设备工作量大，代码累赘。

    em与rem

    px:就是px

    em:相对单位，相对父元素的字体大小。

    rem:相对单位，相对于根元素(html)字体大小。

    vw与vh

    vw:view-width:视口宽度

    vw:view-width:视口高度

    100vw = 375px,1vw=3.75px;

    单位转换：

    设置html的font-size;然后假设缩放的倍数为x

    设备像素/font-size = 100v/x,然后求出x。

    100vw 包含滚动条窗口大小

    100%，不包括滚动条，剩余空间占满。

    线性渐变：

    1. background:linear-gradient(to direction,color ,.....);
    2.  
    3. to 后面跟上方向：top buttom left right (top left) (90deg)角度

    径向渐变：

     重复渐变：

    接下来就是重头戏了：过渡

     

    1. transition:all 5s linear;
    2.  
    3. all 全部属性
    4.  
    5. 5s 过度时间
    6.  
    7. linear 过渡效果

    注意：transition对display不好用

    transition-property:属性；

    transition-duration: 时间;

    过渡的2D动画属性：

    平移：translate

    transform:translate();

    transform:translateX();

    transform:translateY();

    缩放：scale

    transform:scale();

    transform:scaleX();

    transform:scaleY()

    可以加上overflow：hidden；超出的部分隐藏

    还可以通过：transform-orgin:来改变中心点的位置。

    旋转：rotate(),正数，顺时针选择，负数，逆时针旋转。

    transform:rotate();

    transform:rotateX();

    transform:rotateY();

     注意：多属性混用的时候：一定要把位移写前面

    倾斜（skew）：

     关键帧动画：

     要自己写一个@keyframes mymove,然后引用这个关键字动画

     关键帧动画------单一属性：

    关键帧动画：

    1. animation:run 5s step(1,end);
    2. 数字越大越好，
    3.  
    4. end:保留当前帧，看不到最后一帧，动画结束
    5. start:保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧。

    3D变化（首先要设置3D舞台：）：

     

    首先要设置3D舞台：transform-style：preserve-3d;

    加上景深：会有那种近大远小的感觉。

     3d缩放：

     网格布局:

    将网页划分成一个个的网格，可以任意组合不同的网格，flex布局是轴线布局，而且针对轴线，算是一维布局，

    grid（网格）则是将容器划分成行和列，产生单元格，类似二维布局。

    1. display：gird;/*上下排列*/
    2. display:inline-grid/*左右排列*/
    3.  
    4.  
    5. 例子(三行三列)：
    6. grid-template-rows:repeat(auto-fill,200px);
    7. grid-template-columns:repeat(auto-fill,20%);
    8.  
    9. grid-template-rows:200px,200px,200px;
    10. grid-template-columns:200px,200px,200px;

    fr:片段

    grid-template-rows:1fr 2fr 1fr;
    grid-template-columns:1fr 2fr 1fr;

  • 相关阅读:
    UE4 C++ 笔记（二）：基础知识
    git基本使用
    mysql中的case when 与 if else
    剑指 Offer 38. 字符串的排列
    Elasticsearch实战（五）---高级搜索 Match/Match_phrase/Term/Must/should 组合使用
    SWT/Jface(1): 表格的创建和渲染
    Linux系统编程 系统编程概念
    抑制剂以及抗体偶联物在免疫检查点中的作用
    MasaFramework的MinimalAPI设计
    R 语言中的 pnorm 方法与 Python scipy 的 norm.cdf、norm.sf 等价
  • 原文地址：https://blog.csdn.net/makabaka12138/article/details/125487181