CSS知识点

CSS 知识梳理图

一、层次选择器

   /*后代选择器*/
        body p{
            background-color: rebeccapurple;
        }

    /*子选择器*/
        body>p{
            background-color: rebeccapurple;
        }

    /*相邻兄弟选择器*/
       .action +p{
          background-color: #dddddd;
       }

     /*通用兄弟选择器 当前选中元素的向下的所有元素*/
       .action~{
          background-color: #dddddd;
       }

二、结构伪类选择器

     ul li:first-child{
           background-color: #a9c1ed;
       }
        ul li:last-child{
            background-color: #fac0e7;
        }
        
        /*选中当前元素的父级元素下的元素，是顺序*/
           p:nth-child(1){
            background-color: #fac0e7;
        }
        /*选中父元素下的p的第二个，是类型*/
        P:nth-of-type(2){
            background-color: rebeccapurple;
        }

三、属性选择器

==绝对等于
*=包含等于
^=以这个开头
$=以这个结尾

   /*存在id*/
        a[id=first]{
            background-color: rebeccapurple;
        }
        /*class元素的定位*/
        a[class*="circle"]{
           background-color: #fac0e7;
        }
         /*a标签中href中以http开头的元素*/
        a[href^=http]{
           background-color: rgba(134,179,220,0.16); 
        }
           /*a标签中href中以abc开头的元素*/
        a[href$=abc]{
            background-color: rgba(134,179,220,0.16);
        }
        

四、文本样式

4.1 rgb是16进制的表示颜色方式

rgba是在16进制的表示颜色方式的基础上添加了透明度
透明度的值是1~0，值越小说明透明度越高

4.2 首行缩进

text-indent:2em //em 表示一个字的大小

4.3 ul li{

        list-style: none; //去掉前面的点
        list-style:circle;
        list-style: decimal;
    }

5.背景图片
background-image: url("/static/12.png");
background-repeat:no-repeat; //设置是否平铺
背景渐变网站

6.display 的属性
block 块级元素
inline行内元素
inline-block 是块但是可以内敛。
none 不显示

7.父级边框塌问题(浮动)
clean 的属性
clean用于清除浮动
clean：both 清除两侧的浮动
解决方案
1.添加空的div，清除浮动
2.在父级元素增加overflow：hidden属性
3.在父级中添加伪类（父级元素father）
fatehr:after{
content: ‘’;
display: block;
clear: both;
}

五、定位

5.1相对定位relative

相对于原来的位置进行偏移，在任意文档流中，原来的位置会保留。
position: relative;
top: -10px;
left: 10px;
bottom: 10px;
right: 10px;

5.2绝对定位absolute

相对于父级的位置进行偏移，在任意文档流中，原来的位置不会保留。
一般是父级元素存在定位时，相对父级元素进行偏移。
但是不会超出父级元素的范围。
position: absolute;

5.3固定定位fixed

固定在摸一个设定的位置就不会随网页的滑动而改变位置。
position: fixed;

5.4 z-index

z-index 默认是0 最高无限>opacity: 0.5;一帮用于网页背景的透明度

六、浏览器的的私有前缀

火狐 ：-moz-
谷歌：-webkit-
IE: -ms-
opera:-o-

七、圆角边框

border-radius:10px 20px 30px 40px /10px 20px 30px 40px
前面四个值是水平半径，后面四个值是垂直半径。
border-radius：10px 30px;
一个参数两个值 ，10px代表左上和右下的水平和垂直，30px代表右上和左下的水平和垂直。

八、阴影

text-shadow（文字）
第一个值是水平偏移量，第二值是垂直偏移量，第三个值是模糊度。
box-shadow(盒子)
box-shadow: 1px 2px 3px 6 red;
6px是外延值

九、2D转化

1.transform: translate(5px,10px);
第一个值是水平方向的移动，第二值值是垂直方向的移动
2.transform: rotate(30deg);
30是旋转的角度
3.transform:scale(1.5 0.4);
第一个水平的缩放，第二值是垂直的缩放。
4. transform: skew(50deg,20deg);
第一个水平的倾斜，第二值是垂直的倾斜

十、过渡属性（transition）

/过渡属性/
1. transition-property:all ;
/过渡完成时间/
2.transition-duration:4s;
/过渡函数/
3.transition-timing-function:linear ;
/延时执行时间/
4.transition-delay: 1s;

十一、动画

@keyframes myName {
50%{
margin-left: 20px;
}
100%{
margin-left: 40px;
}
}
myname为动画的名称，50%为关键帧。
transition: myName 5s 1s; 用于执行过渡

记得点赞哦