其他分享
首页 > 其他分享> > 内联与块元素display,css3新样式

内联与块元素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