CSS3------CSS大结局_css battle怎么查看结局方案-CSDN博客

本文链接：https://blog.csdn.net/makabaka12138/article/details/125487181

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

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

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

层级选择器：

<header>
    <style>
    .child + li{
        background:green;
    }
    
    /*.child ~ li{
        background:green;
    }*/
    </style>
</header>

<body>
    <div>
       <ul>
            <li class = "child">111111</li>
            <li>222222</li>
            <li>333333</li>
            <li>444444</li>
            <li>555555</li>
       </ul>
    </div>
</body>

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

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

属性选择器：

[class]{background:yellow;}
/*有class的都变黄*/


div[class]{background:green;}
/*div且带有class的背景颜色都变绿*/

div[class = box1]{background:green;}
/*div且带有class叫box1的背景颜色都变绿*/

tips:

divbox1{
}

div box1{

}
/*他们之间的区别，有空格是儿子，没有空格是叫box1的div*/

模糊匹配:

/*以这个字母开头的*/
class ^= "b" 

/*以这个字母结尾的*/
class &= "b"

/*包含这个这个字母的*/
class *= "b"

结构伪类选择器：

<!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>Document</title>
    <style>
        .box div:first-child
        {
            background-color: rgb(0, 255, 255);
        }
        .box div:nth-child(2)
        {
            background-color: coral;
        }
        .box div:last-child{
            background-color: tomato;
        }
        .box{
            width: 200px;
            height: 600px;
            border: 1px;;
        }
        .box div{
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            border: 1px;;
        }
    </style>
</head>
<body>
    <div class = "box">
        <div></div>
        <div></div>
        <div></div>
     </div>
</body>
</html>

目标伪类选择器：

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

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        div:target{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#a">1</a></li>
        <li><a href="#b">2</a></li>
        <li><a href="#c">3</a></li>
    </ul>
    <div id ="#a"></div>
    <div id ="#b"></div>
    <div id ="#c"></div>
</body>
</html>

目标伪类选择器：

E:enabled    匹配所有用户界面中处于可用元素的E元素
E:disabled   匹配所有用户界面中处于不可用元素的E元素
E:checked    匹配所有用户界面中处于选中元素的E元素
E:selection  匹配所有用户界面中处于高亮元素的E元素

appearance :none;

否定和动态伪类选择器：

否定: E:not(s) 匹配除S的元素E

动态：

E:link:

E:visited:

E:active:

E:hover:

文本阴影：

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

盒子阴影(box-shadow)：

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

圆角边框：

border-radius:10px;

border-top-left-radius:10px;/*左上*/

一个值：四个角一样

二个值：对角一样

三个值：左上 右下右上 右下

四个值：顺时针 左上 左下 右下 右上

border-radius：30px/60px;

30px:是水平距离
60px:是垂直距离

border-radius：100%;

字体引入：

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

怪异盒模型：

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

标准盒子的width是content的宽

怪异盒的width是border的宽

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

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

display:flex;

1.子元素默认横向排列

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

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

可以修改主轴方向：

默认主轴方向是水平方向

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

主轴侧轴对齐方式：

align-items:center;
justify-content:flex-start;
/*flex-start*/
/*flex-end*/
/*flex-center*/
/*flex-space-between*/
/*flex-around*/

折行与行间距：

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

flex-wrap:wrap;

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

纵轴：与宽度有关

横轴：与高度有关

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

align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:baseline;
align-self:stretch;

项目剩余宽高：

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

div1,div3{
    flex:1;
}

div2{
    flex:2;
}

模拟器上显示分辨率：

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

物理分辨率：设备像素

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

设计稿：（1）百分比

（2）弹性盒布局

（3）rem布局

（4）meta viewport

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

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

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

多列布局

column-count:规定元素应该被分割的列数
column-gap:规定列之间的间隔大小

/*列边框*/
column-rule-color:列之间的颜色
column-rule-style:列之间的间隔
column-rule-width:列之间的宽

/*高度自适应*/
column-fill:auto;
column-fill:balance;

/*跨列*/
column-span:none; /*不跨*/
column-span:all;  /*跨所有列*/

column-width：列宽

break-inside:avoid;
/*禁止折行*/

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

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

媒体查询:

媒体查询结构：

@media all and(min-width:320px)
{
    body{background-color:blue;}
}


屏幕最小
(min-width:320px)

屏幕最大
(max-width:320px)

(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%，不包括滚动条，剩余空间占满。

线性渐变：

background:linear-gradient(to direction,color ,.....);

to 后面跟上方向：top buttom left right (top left) (90deg)角度

径向渐变：

重复渐变：

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

transition:all 5s linear;

all 全部属性

5s 过度时间

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,然后引用这个关键字动画

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

关键帧动画：

animation:run 5s step(1,end);
数字越大越好，

end:保留当前帧，看不到最后一帧，动画结束
start:保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧。

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

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

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

3d缩放：

网格布局:

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

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

display：gird;/*上下排列*/
display:inline-grid/*左右排列*/


例子(三行三列)：
grid-template-rows:repeat(auto-fill,200px);
grid-template-columns:repeat(auto-fill,20%);

grid-template-rows:200px,200px,200px;
grid-template-columns:200px,200px,200px;

fr:片段

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