css3知识总结

Posted 2020-12-29 mr171733

边框

|---盒子圆角 border-radius

|---盒子阴影 box-shadow：

背景

|---引入背景  background-image

|---背景尺寸  background-size

|---背景平铺 background-repeat

|---背景位置

|-----位置定位1（background-origin）

|------根据文本位置：content-box

|------根据边框位置：border-box

|------根据内边距位置:padding-box

|------使用这个属性，必须设置背景为no-repeat

|-----位置定位2（background-position）

|------ top  rihgt  bottom  left；background-position:距左多少   距右多少

|---多重背景：逗号分割：background-image:url(images/bg_flower.gif), url(images/border.png);

                                        background-repeat:no-repeat;

文字

|---文本阴影：text-shadow：三个值：分别代表距离左侧、距离上侧、阴影颜色  阴影会显示文字

                      text-shadow：四个值：分别代表距离左侧、距离上侧、模糊程度及阴影颜色

|---文本溢出属性

|-----overflow: hidden;  white-space:nowrap;让文本强制不换行  要先设置这两个属性

|-----text-overflow

|------clip：修剪文本。

|------ellipsis：显示省略符号来代表被修剪的文本

|------自定义（string）：自己定义符号，给定的字符串来代表被修剪的文本

|---文本换行属性 word-break:

|-----word-break:break-all 内容长度到200px时自动换行。如果最后是一个完整的长单词，它会把单词截断

|-----word-break:break-word; 会把句末单词完整的放到下一行的开头

颜色之RGBA与透明度opcity

|---R：红 G：绿 B：蓝  alpha:透明度的参数

|---RGB的取值范围是0~255/0~100%   alpha的取值范围是0~1  不可为负值

|---透明度 opcity：取值范围0~1

渐变颜色

|---background-image: linear-gradient(to bottom,#fff,red);

|---说明：参数说明：第一个参数指定渐变方向 to top,to bottom,to right,to left,to top left......
               第二和第三个参数：是指定开始与结束的颜色值  可以有多个颜色background-image: linear-gradient(to bottom,#fff,black,red);

旋转

|---2D

|-----transform:

|------rotate()——进行旋转，括号内部写旋转角度，默认顺时针旋转.允许负值，元素将进行逆时针旋转

|------translate()——从当前位置进行移动，括号内为x，y值。允许负值，将反方向移动
        transform:translate(30px,30px)：向右30px，向下30px移动，原来位置保存

|------scale()——改变原始尺寸，按照倍数变化，括号内为width、height的倍数
        transform:scale(2,4)：宽度变为2倍，高度变为4倍

|------skew()——水平、垂直方向进行扭转，括号内是水平扭转角度、垂直扭转角度
        transform:skew(30deg,0deg);将横向扭转30度的div，内部文字会跟随扭转
        transform:skew(0deg,30deg);将纵向扭转30度的div，内部文字会跟随扭转
        transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div，内部文字会跟随扭转

|---3D

|-----transform

|------rotateX()——沿水平X轴进行垂直的翻转，括号内写转动度数

|------rotateY()——沿垂直Y轴进行水平的翻转，括号内写转动度数

|---2D与3D的区别

|-----2D转换跟3D转换的区别：2D转换仅仅在于平面，文字可以看出并没有反过来
       3D转换是相当于镜面效果的，进行了前后空间（涉及到了Z轴）的占用进行的翻转。

过度

|---transition：专门应对颜色、长度、宽度、位置等变化的过渡

               #aaa{
            width:200px;
            height: 200px;
            border: 1px solid red;
            transition:2s;
        }
        #aaa:hover{
            width: 500px;
        }

效果是鼠标移上之后框会有过程放大

动画

|---1、@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
     2、使用animation进行动画捆绑。两个值：动画名称、时长
     3、我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...，效果等同于0%~100%。
     4、加上一个infinite值就可以无限执行了
     5、ease——默认开始慢慢加速，结束时慢慢减速。
     linear——默认始终使用相同速度运行。
     alternate——交替执行（也可以成为正反执行）

 

div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由于需要进行位置改变，所以增加了position属性*/
    animation:myfirst 5s infinite alternate;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行，交替执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

弹性盒子

|--- CSS3 的一种新的布局模式。

|-----  display: flex;考虑浏览器兼容问题：定义为弹性盒子

|-----弹性子元素在父容器中的位置排列（横向、纵向）

|------flex-direction

|------- row：横向从左到右排列（左对齐），默认的排列方式。

|------- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

|------- column：纵向排列。

|-------column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

|-----弹性盒子的子元素换行方式

|------flex-wrap：nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
                          wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
                          wrap-reverse -反转 wrap 排列

|-----弹性子元素在父容器中的对齐方式

|------横向对齐：justify-content：

|------纵向对其：align-items：

|-----弹性子元素如何分配空间

|------flex：

.flex-container {
    display: flex;
    width: 400px;
    height: 250px;
}
.item1 {
    flex: 2;
}

.item2 {
    flex: 1;
}

.item3 {
    flex: 1;
}

|-----子元素的属性

|------排序：order

|------边距：margin

|------纵轴对齐方式：align-self