css background 旋转_JAVA学习—CSS知识总结

1.CSS中的定位

绝对定位：absolute会把之前的位置释放掉，后边的会补上去（基于外层父级标签）

相对定位：relative移动之后不会把之前的位置释放（基于原来的位置）

固定定位：fixed 始终基于浏览器窗口不变（适合做网站旁边的广告）

1.1z-index的作用

z-index:-1（置于底层）

//此属性是用来声明元素的显示级别，主要用于分层

2.CSS中的盒子模型

border：边框

solid 实线 dotted虚线(...) dashed 虚线(---)

2.1 padding和margin

padding:内边距

margin:外边距

margin：0px auto ;//块元素会自动居中

去除网页上下边框空白：

body,html{
padding:0px;
margin:0px;
}
或者
*{
 margin: 0px;
 padding:0px;

}

2.2padding 和 margin 的特点和特性是什么？

1）二者都是用来处理与其他盒子的距离关系进行布局的。

2）形象的介绍，夏季女生在地铁遇到色狼变态时有发生，如果选择穿上羽绒服与色狼保持距离，那就是padding内边距，如果选择移动自己的位置远离色狼，那就是margin外边距。

3）就与borde边框的位置来看，pading在border边框内，margin在border边框外。

4）padding内边距会改变盒模型的大小（即宽高），margin则不会。

5）margin内边距用负值，pading不可以。

3.CSS3

3.1.CSS3 中新增选择器

a.获得class名称是div1下面的第一个子元素

.div1>p:first-child{
color: red;
}
div1>p:last-child{
color: green;
}

b.获得具体的某一个子元素

.div1>p:nth-child(2){
 background-color: palegreen;
 }

c.划分为单行双行两类（单行双行的操作（单行一个颜色，双行一个颜色））

.div1>p:nth-child(even){
 background-color: red;
 }
.div1>p:nth-child(odd){
background-color: green;
 }

d.获得空的元素对象（对没有内容的标签进行操作）

.div1>p:empty{
 height: 50px;
 background-color: darkmagenta;
}

e.获得焦点执行的样式：（光标在哪里，哪里就会变化的效果）

input：focus{
  width:100px;
height:50px;
}

f.当被选中时样式发生变化（哪个被选中，哪个就会变化的效果）

input：checked{
height:50px;
width:50px
}

g.伪对象选择器是在指定的对象之前（或者之后）插入内容

.div1:before{
/*content: "我们的祖国是花园";*/
content: url(img/1.jpg);
}
.div1:after{

}

h.属性选择器

input[type=text]里面可以加单引号’ ’也可以不加单引号

<style>
   input[type=text]{
    height: 30px;
    width: 200px;
    background-color: aqua;
   }
            input[type='password']{
    background-color: pink;
height: 30px;
    width: 200px;
   }
  </style>

属性 ^表示用什么...开头的对象

$表示用什么...结尾的对象

input[name^='fom']{
width: 300px;
height: 40px;
}

4.CSS新增属性

border-radius：100px倒圆角（改变边框角度）

transform:rotate(45deg) 旋转角度为45度

class= abc dd（表示命名了两个）

4.1新增属性

/*倒圆角指令*/

border-radius: 100px;

/* 左上右下 右上左下 */

border-radius:10px 60px;

border-radius:10px 20px 30px 40px;

/*旋转角度*/

transform: rotate(45deg);

/*放大的倍数*/

transform: scale(1.3);

/* X:水平的位移 Y ：垂直的位移 负数：上*/

transform: translate(0px,-5px);

/*2D角度的旋转 X Y*/

transform: skew(40deg,45deg);

/*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色*/

box-shadow: 0px 0px 70px #D5093C;

@keyframes ani{}//规定动画

animation:1s ani(名字) infinite //所有动画的简写属性

div{

box-shadow:0px 0px 80px #E7213D ;

animation: 1s lv infinite;

}

   @keyframes lv{
     0%{transform:rotate(45deg) scale(1);}
     50%{transform: rotate(45deg) scale(1.1);}
     100%{transform:rotate(45deg)scale(1);}
   }

infinite(无限的) @keyframe lv(起的名字){

0%{} animation 1s lv infinite

50%{}

100{}

} animation (动画) (animal 动物)

clear both；//清除之前所有的样式

img{

/*清除之前的样式*/

clear: both;

float: left;

}