CSS3系统学习

最新推荐文章于 2022-03-22 22:16:16 发布

啥时候能干全栈

最新推荐文章于 2022-03-22 22:16:16 发布

阅读量223

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_42177478/article/details/104065774

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

2020-01-21
----------------------study--------------------------------------------------------------------------------

1.bief introductio of css3

两个学习时的查询网站

reference manual website:http://css.doyoe.com;
Authoritative inquiry website:http://www.caniuse.com;

预处理器：less/sass cssNext插件

后处理器:autoprefixer插件
postCss+插件（充分体现扩展性）：用js实现的css的抽象的语法树AST（Abstract Stntax Tree）

2.Selectors of css3

(1)Relationship Selectors

1)E+F:下一个满足条件的兄弟元素节点

div + .demo {
       background-color:red;
}

2）E~F:满足条件的兄弟元素节点

div ~ p {
     background-color:green;
}

(2)Attribute Selectors

E[attr~="val"] E[attr |="val"] E[attr^="val"] E[attr$="val"] E[attr*="val"]

<div class = "a">1</div>
<div class = "a-text">2</div>
<div class = "b-text>3<//div>

div[class |= 'a']//选择一个以后面的值为开头所以1,2会被选择。

(3)Pseudo-Element Selectors(伪元素选择器)//被选中的元素的一种状态

1）E::placeholder//改变文本框中提示字的颜色...

2）E::selection //改变字体选中之后的样式color，background-color，text-shadow。
3）E:not()

<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>

li:not(:last-of-type){
    border-bottom:1px solid black;
    //将最后一行的直线取消
}

4）:root{}和html{}是相等的；//根标签选择器
5）:target//点击一个元素影响另一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel = "stylesheet" href = "demo.css">
</head>
<style>
  :root,body{
    margin: 0;
    height: 100%;
  }
  #red,
  #green,
  #gray{
    height: 100%;
    width: 100%;
  }
  //点击谁 谁变颜色
  div[id]:not(:target){
    display:none;
  }
  #red{
    background-color: #f20;
  }
  #green{
    background-color: green;
  }
  #gray{
    background-color: gray;
  }
  div.btn-wrapper{
    position: absolute;
    width: 600px;
    top:400px;
  }
  div.btn-wrapper a{
    text-decoration: none;
    color: #fff;
    background-color:#fcc;
    font-size: 30px;
    border-radius: 3px;
    margin: 0 10px;
  }
</style>
<body>
  <div class="btn-wrapper">

    <a href="#red" class = "bgred">red</a>
    <a href="#green" class="bggreen">green</a>
    <a href="#gray" class="bggray">gray</a>
  </div>
  <div id="red"></div>
  <div id="green"></div>
  <div id="gray"></div >
  </body>
</html>

6）E:first-child E:last-child E:only-child E:nth-child(n)
7）E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n)
8）E:empty

------------------------2020-01-23-----------------------------------------------------------------

3.border&background

1）设置四个角的弧度，可任意变换

border-top-right-radius: ;
border-bottom-rigjt-radius: ;
border-bottom-left-radius: ;
border-top-left-radius: ;

2）box-shadow：水平偏移量，垂直偏移量，阴影值，放大的值，inset（内部）；//基于边框的位置向外模糊
//栗子：鼠标移入渐渐变大有阴影，移除变回原样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel = "stylesheet" href = "demo.css">
</head>
<style>
*{
  margin: 0;
  padding: 0;
}
div{
  position: absolute;
  border-radius: 5px;
  left: calc(50% - 50px);
  top:calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 0px 1px 2px rgba(0,0,0,.1);
  transition: all .6s;
}
div::after{
  content:" ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0px 5px 15px rgba(0,0,0,.3);
  opacity: 0;
  transition: all .6s;
}
div:hover{
  transform: scale(1.25,1.25);
}
div:hover::after{
  opacity: 1;
}
</style>
<body>
<div></div>  
</body>
<script>
</script>
</html>

3）border-image-source:url(source/border.png);
border-image-slice:10;//添加切割线，一般来说slice值和border值相同
border-image-outset；px//让背景图片向外延伸
border-image-width：px；//border图片的宽度
border-image-repeat:stretch;/*stretch,将图片用平铺的方式展示，round，repeat，space；
4）background-image：linear-gradient（#f0f，#f00）/radial-gradient；//线性渐变
background-image:url(),url();//可以添加多张图片；
background-origin:
background-clip:
在这里插入图片描述

//文字反切背景图片
*{
    padding:0;
    margin: 0;;
}
div{
    position: absolute;
    left: calc(50% - 200px);
    top: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 100px;
    font-weight: bold;
    width: 400px;
    //以下
    background-image: url(1.png);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* text-fill-color:transparent; */
}
</style>
<body>
    <div>王俊凯</div>
</body>
</html>

background-repeat:repeat-x/round/space/round space(横的方向是round，纵向space)
background-attachment:scroll（图片相对于容器进行定位）/local（图片相对于内容区进行定位）/fixed（背景图片相对于可视区视口定位）
background-size:cover(不改变图片比例前提下，用一张图片完完整整的填充满容器)/contain（不改变图片比例的前提下，容器里包含一张完整的图片）;
background-image：linear-gradient(to right,#0f0,#ff0);//（方向，渐变值）
background-image:radial-gradient(green 20%,red 20px);//以一个圆心点向外扩散.

4.Text1

(1)text shadow(x,y,blur,color);

//浮雕效果：
text-shadow:1px 1px #000,-1px -1px #fff;
//镂刻效果
text-shadow:-1px -1px #000,1px 1px #fff;
//

（2）white-space：nowrap文本不换行；
word-break:break-all强制换行/break-word尽可能的保留英文单词完整性换行；
（3）column//不适合瀑布流布局

columns:300px 4；//四列每一列300px；
column-width：300px；
column-count:3；//分3列
column-rule：1px solid black；//给列与列之间加
column-break-before:always;

5.box

①一个盒子真实的宽高：boxWidth = width+border*2+padding*2；

混杂模式盒模型：boxWidth = width；contentWidth = width-border2-padding2；

box-sizing：border-box；

②overflow
overflow：hidden/scroll/auto（当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现）/；
overflow-x：auto；//按需出现；
③resize:none/both（水平和垂直方向可拖拽）；和overflow一起使用；
④flex布局

//父级上
diaplay：flex/inline-flex；
flex-direction:row/row-reverse(主轴方向/自右向左)column/column-reverse（交叉轴方向）；
flex-wrap:wrap;//控制多行或单行
justify-content:flex-start(按左对齐)flex-end（按右对齐）flex-center（中间对齐）space-around（自适应对齐）；ign
align-content:flex-start;//各行向弹性盒容器的起始位置堆叠
//子级上
order:-2;//默认值比1小，越小越排列在后面
align-self：auto|flex-start|flex-end|center|；
flex-grow:1;//当主轴方向还有剩余空间时，按比例瓜分剩余空间，
flex-basis：50px;//可覆盖width，内容大于宽度时，宽度就没了作用。
flex-shrink:1;//压缩。压缩时进行加权值计算时计算的是内容区宽度。
//压缩计算：见box3内容；
/*
basis:
在你设置宽的时候，如果basis设置有值，且小于width，那么真实的宽的范围在basis <realWidth <width
在你不设置width的时候设置basis，元素真实的宽 min-width
当不换行内容撑开超过内容区时，汇城开容易
无论什么情况，卑不换行内容撑开的容器，不会被压缩计算。

//固定布局
//中间固定两边自适应
<div class = "wrapper">
   <div class = "content"></div>
   <div class = "content"></div>
   <div class = "content"></div>
</div>

*{
     matgin:0;
     padding:0;
}
.wrapper{
      resize:both;
      overflow:hidden;
      width:400px;
      height:200px;
      border:1px solid black;
      display:flex;
}
.content{
      flex: 1 1 auto;
      border:1px solid green;
      height:100px;
      box-sizing:border-box;
}
//两边按比例伸缩
.content:nth-od-type(3){
      flex:2 2 auto;
}
.content:nth-of-type(2){
      flex:0 0 200px
}

皇冠布局

<div class = "wrapper">
<div class = "header"></div>
<div class = "container">
  <div class = "left"></div>
  <div class = "center"></div>
  <div class = "right"></div>
</div>
<div class = "footer"></div>
</div>

*{
margin:0;
padding:0;
}

*wrapper{
    resize:both;
    overflow:hidden;
    width:300px;
    height:300px;
    border:1 px solid black;
    display:flex;
    flex-direction:column;    
}
.header, .footer, .left, .right{
   flex:0 0 20%;
   border:1px solid green;
   box-sizing:border-box;
}
.contain{
    flex:1 1 auto;
    display:flex;
}
.center{
    flex:1 1 auto;
}

6.transition

transition-property:all;//监听属性改变
transition-duration：1s;
transition-timing-function:linear;//运动状态
transition-delay：0；//等待几秒后运动

transition:width 2s linear 1s;//宽度在2s中增加
cubic-bezier（贝塞尔曲线，有四个值）：0,0,1,1;

6.animation动画（完整的多状态动画）

@keyframes run{
       0%{
           left:0;
           top:0;
          }
       25%{
           left:100px;
           top:0;
       }
       50%{
           left:0;
           top:100px;
       }
       75%{
           left:0;
           top:0;
       }
       100%{
           left:0;
           top:0;
       }
}

animation-direction:reverse(反向)|alternate(往返运动)；
animation-play-state:pasued(鼠标移入暂停运动)；
animation-fill-mode:forwards(动画停留在最后一帧的状态)|backwards(动画停留在最开始的状态)|both

7.step

animation:change-color 4s steps(1,end) forwards;//步数是每一段动画执行多少步；end：保留当前帧状态直到动画结束；start:保留下一帧的状态，直到动画结束。

 /* 打字效果 */
    *{
        margin: 0;
        padding: 0;
    }
    @keyframes cursor{
        0%{
            border-left-color: rgba(0,0,0,0);
        }
        50%{
            border-left-color: rgba(0,0,0,1);
        }
        100%{
            border-left-color: rgba(0,0,0,0);
        }
    }
    div{
        display:inine-block;
        height: 100px;
        /* background-color: rgb(122, 122, 134); */
        font-size: 80px;
        line-height: 100px;
        font-family: monospace;
        position: relative;
    }
    @keyframes cover{
        0%{
            left: 0;
        }
        100%{
            left: 100%;
        }
    }
    div::after{
        content: "";
        position: absolute;
        left:0;
        top: 10px;
        height: 90px;
        width: 100%;
        background-color: #fff;
        border-left: 2px solid black;
        box-sizing: border-box;
        animation: cursor 1s steps(1,end) infinite,cover 10s steps(10,end);
    }
</style>
<body>
    <div>
wangjunkai
    </div>

//实现钟表走动
transform-origin:center xxpx;//旋转轴
transform-rotate：180deg；//旋转角度
@keyframes minutern{
0%{
     transform:rotate(180deg);
 }
100%{
    transform:rotate(540deg);
 }
}
//秒针
animation:secondrun 60 steps(60,end) infinition;
//分针
animation:minuterun 3600s steps(60,end)

7.rotate

transform-origin：0 0；//旋转中心

//3d变换旋转

transform:rotateX|Y|Z();	//沿着X|Y|Z轴旋转

body{
//增加3d视觉效果
   perspective:800px;
   transform-style:preserve-3d;
//视觉中心
   perspective-origin:300px 300px;
}
div{
  position：absolute；
  left:200px;
  top:200px;
  background-image:url(me.jpg);
  background-size:cover;
  transform-origin:0 0;
  transform:rotateX(0deg);
}

rotate(X,Y,Z,deg);

8.scale

transform:scale(x,y);//x轴y轴的伸缩变换值大于1扩张；

9.skew

transform:skew(x,y);//添加角度值，倾斜坐标轴；

10.matrix（）

11.translate+perspective

transform:translateX|Y|Z;//平移
body{
      perspective:800px;//景深
 }

perspective基于元素在屏幕上的投影，当translate为负值时，实现越来越近，屏幕上的投影会越小

perspective-origin:xxpx,yypx,zzpx;//三个值时为空间3d视觉点；

//鼠标移动展示3d效果

<script type = "text/javascript">
document.body.onmousemove = function(e){
     this.style.perspectiveOrigin = " " + e.pageX + "px" + e.pageY + "px";
}
</script>

transform：perspective（800px）；//多个元素景深一致
transform-style:preserve-3d;//Z轴每一层都可渲染
//图片3d布局并旋转
@keyframes round{
   0%{
   transform:translate(-50%,-50%) rotatey(0deg);
     }
     transform:translate(-50%,-50%) rotatey(360deg);
}
img:nth-of-type(n){
transform:rotatey(xxdeg) translatez(xxxpx);
}

--------------over–haha---------------------------------------------------------

啥时候能干全栈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3系统学习

2020-01-21----------------------study--------------------------------------------------------------------------------1.bief introductio of css3两个学习时的查询网站reference manual website:http://css.doyoe.c...
复制链接

扫一扫