![7bb15dd87ed332bcc5ef6bfba5aec20b.png](https://i-blog.csdnimg.cn/blog_migrate/f0d7d6e172c46613d420bdb77d35350d.jpeg)
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;
}