Java学习07

1.

内联元素没有竖直方向的margin，padding，也不可以设置，只能设置水平的margin和padding
块状元素有竖直方向的margin，padding
块状元素转内联元素display: inline;
内联元素转块状元素display: block;
内联块状元素结合体display: inline-block;（能设置宽高以及margin和padding值，但是不独占一行）
将元素隐藏display: none;
旋转：transform: rotate(30deg)；
鼠标移入放大：transform: scale(2,2)；
控制变换时间：transition: transform 10s, height 10s,width 10s;

代码

2.

p{
width: 200px;
height: 100px;
background: yellow;
margin:20px 0 ;
padding: 30px 0;
/*转成内联元素*/
/*display: inline;*/
/*内联块状元素结合体*/
/*display: inline-block;*/
/*将元素隐藏*/
display: none;
}
span{
width: 200px;
height: 100px;
background: red;
margin:0px 30px ;
padding:0px 30px;
/*转成块状元素*/
display: block;
}
#d1{
border: 1px solid red;
width: 200px;
height: 200px;
background: yellow;
border-radius: 40px;
}
#d1:hover{
transform: translate(500px,500px);
transition: transform 10s, height 10s,width 10s;
width: 400px;
height: 400px;
}
#d2{
width: 200px;
height: 200px;
background: blue;
}
#d2:hover{
transform: rotate(45deg);
transition: transform 10s;
}
#d3{
width: 500px;
height: 353px;
overflow: hidden;
}
img:hover{
transform: scale(2,2);
transition: transform 6s;
}