内联与块元素display，css3新样式

一、内联元素与块元素的区别

1、内联元素可以契合在块元素中间，不独立成行，块元素独立成行

2、当内联元素与块元素设置margin与padding值时

	独占一行	能设宽高	竖直方向的margin，padding
块状元素	是	是	有，可以设置
内联元素 扫描二维码关注公众号，回复： 6564727 查看本文章	否	否	没有，也不可以设置，只能设置水平的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;
    }