内联与块元素display，css3新样式
作者：互联网
一、内联元素与块元素的区别
1、内联元素可以契合在块元素中间，不独立成行，块元素独立成行
2、当内联元素与块元素设置margin与padding值时
|
独占一行 |
能设宽高 |
竖直方向的margin，padding |
|
|
块状元素 |
是 |
是 |
有，可以设置 |
|
内联元素 |
否 |
否 |
没有，也不可以设置，只能设置水平的margin和padding |
二、内联元素与块元素的转换display
display：block；
内联元素转换成块元素
span{
display：block；span可以设置内外边框
}
块元素转换成内联元素
p，ul，li{
display：inline 以上元素不可设置内外边框
}
内联块元素
ul，li{
display：inline-block； 导航条经常这样使用，垂直列表水平显示。
}
显示隐藏
display：block；
display：none；
如：p{
display：none；p直接隐藏并且所有的内容也不占用位置
}
特殊：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
h1.hidden {visibility:hidden;} 三、css3的动画 圆角边框： border-radius：30px；
transform=2d转换
#d1{
border:1px solid red;
width: 200px;
height: 200px;
background: yellow;
/*圆角边框*/
border-radius: 20px;
}
#d1:hover
{
width: 300px;
height: 300px;
/*transform=2d转换*/
transform:translate(500px,100px);/*逗号记得放着*/ 将200px，200px的圆框转换成500px，100px的边框，
/*过渡*/
transition: width 6s, height 6s, transform 6s;并且让它的宽高变化在6s内完成。
}
#d2{
width:200px;
height: 200px;
background: blue;
}
#d2:hover{
/*2d转换之旋转*/
transform:rotate(60deg); 鼠标transform转换成60度，并且在6秒内完成
transition:transform 7s;
}
#d3{
width:405px;
height: 720px;
overflow:hidden;
}
img:hover{
/*放大各2倍*/
transform: scale(2,2); 鼠标滑过时图片放大2倍，在6秒内完成
/*过渡时间为6s*/
transition:transform 6s;
}
标签：css3,元素,transform,6s,内联,display,200px 来源： https://www.cnblogs.com/a199706/p/11068311.html