css知识复习笔记

 css常用知识

　　盒子模型:

包括content ,padding,border,margin;

当两个盒子嵌套使用时,子元素的margin-top会直接作用到父盒子,发生嵌套崩塌,解决方式:添加overflow:hidden;

border:

　　线型:dashed(虚线),dotted(点), solied(实线), double(双实线)

　　利用border画出三角形:控制border-color的不同位置的颜色,将其余背景设置为透明色即可.

　　

　　伪元素:常用(before)(after)

　　  利用伪元素实现边框尖角效果,结合定位实现左上和右下定位,减少标签使用.

　　            

      .box1{
            width: 50px;
            height: 50px;
            background-color:skyblue;
            opacity: .5;
            position: relative;
        }
        .box1::before{
            content:"";
            width: 10px;
            height: 10px;
            display: inline-block;
            border-left: 1px solid red;
            border-top: 1px solid red;
            position: absolute;
        }
        .box1::after{
            content:"";
            width: 10px;
            height: 10px;
            display: inline-block;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            position: absolute;
            right: 0;
            bottom: 0;
        }

　　伪类: 常用           

 (:hover)  ===>>  鼠标放上后显示的效果

       (:active) ====>>> 选中的效果

　   (:first-child) ===>> 第一个子元素

       (:nth-child(val))  ==>>选中第几个元素  ,此处val 可传递参数,公式,数字; 数字:第几个元素,Odd 和 even 是匹配的奇偶,  n + b  n为计数选择第几个, b为偏移量.

   　　CSS3新增

　　阴影: text-shadow;

　　简写: (水平偏移量),(垂直偏移量)(模糊半径)(颜色);

　　可写入多个值控制;

　　边框用图片展示:

　　border-image: source, slice, width, outset, repeat;

　　颜色渐变:

       1. 线性渐变,

direction: 方向 角度顺时针  或者to top/left/right/bottom
    eg: background: linear-gradient(right ,red 60%,orange 80%);

重复渐变: background: repeating-linear-gradient(to right,red 0, red 10%, purple 10%, purple 20%)

　　2.径向渐变

　　

shape 渐变形状 : circle 
size 渐变大小:
    closest-side（指定径向渐变的半径长度为从圆心到离圆心最近的边）
    closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
    farthest-side（指定径向渐变的半径长度为从圆心到离圆心最远的边）
    farthest-corner（指定径向渐变的半径长度为从圆心到离圆心最远的角）
    重复渐变 : background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

 

 

　　过渡:

transition: transition-property transition-duration transition-timing-function transition-delay
        transition-property   规定应用过渡的 CSS 属性的名称 ,不能实现display得变换.
        transition-duration   过渡消耗时间.
        transition-timing-function: 动画得曲线.
                    linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
        transition-delay         动画得开始时间

transform: 
缩放 scale(x, y) 元素进行水平和垂直方向的缩放，,负值是无效的
移动 translate(x, y) 可以改变元素的位置，x、y可为负值
旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针
//倾斜本人使用较少
倾斜 skew(x-angle,y-angle)    定义沿着 X 和 Y 轴的 2D 倾斜转换
        skewX(x-angle)     定义沿着 X 轴的 2D 倾斜转换
        skewY(y-angle)    定义沿着 Y 轴的 2D 倾斜转换

rotateX/Y/Z         沿X/Y/Z轴旋转
translateX/Y/Z     沿X/Y/Z轴移动

　　css3 动画:animation:

　　1、@keyframes来定义动画运行得动作；

      2、可以使用百分比,也可以使用from/to

       3、定义动画中变化得属性

       4、添加得标签得类上面.

　　name 动画的名称(必填项)

　　duration 动画持续时间(也是必填)

   delay 动画延迟（只是第一次）

   iteration-count 重复次数 infinite 无限次

　　Flex布局

　　jusitify-content 主轴排列

　　

.box{ justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly(实验属性); }
flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：均匀排列每个元素，每个元素之间的间隔相等

　　align-items 交叉轴排列

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

　　align-self 的作用

　　

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

   flex-wrap 的作用

.box{
    flex-wrap: nowarp | wrap | wrap-reverse;
}
nowrap（默认值）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

　　flex-direction 的使用

　　

.box{
    flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
注意： flex-direction 改为垂直方向时，jusitify控制垂直方向，align控制水平方向

    flex

　　flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto。

　　calc

　　calc(expression) 函数用于动态计算长度值

　　calc()函数支持 "+", "-", "*", "/" 运算