@[toc]
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
六、浏览器的的私有前缀
火狐 ：-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; 用于执行过渡
记得点赞哦
