详细说明CSS☏3:overflow特性

日期:2021-01-21 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

1.Overflow

overflow为外溢(器皿),当內容超过器皿时只需加上overflow特性数值hidden, 便可以把超过器皿的一部分掩藏起來;

假如內容超过器皿却又不愿其掩藏时能够将其特性值设定为auto;

overflow:auto 特性假如超过就出現翻转条,沒有超过则出不来现翻转条那样便可以出現翻转条,

翻转条还可以独立设定,比如overflow-x:hidden;overflow-y:auto;那样就只有看到竖直方位的翻转条了。假如独立界定x轴或是y轴的情况下,2个特性都需设定特性值。

初始实际效果:

加上overflow:hidden;特性,实际效果:

能看到,overflow:hidden会把超过小盒子的一部分掩藏,还可以了解为断开。

2.加上overflow-x:hidden;overflow-y:auto特性

特性设成overflow-x:auto;overflow-y:hidden;与图中实际效果恰好反过来,即翻转条侧面掩藏,会出現在底端。

2.overflow的普遍特性值

Overflow属心普遍的有四个:visible,hidden,auto和scroll;

visible为overflow 的默认设置值,为超过显示信息;

hidden为超过掩藏;

auto为全自动,即超过会出現翻转条, 不超过就沒有翻转条;

scroll为內容会被修剪,可是访问器会显示信息翻转条便于查询其他的內容。

3.overflow的奇异使用方法

第一种使用方法:处理margin-top的传送难题

margin-top的传送难题:子原素的margin-top会把父原素一起带出来,给父原素加overflow:hidden就可以处理

第二种使用方法:消除波动产生的危害  --- 父原素高宽比坍塌

全能消除法

overflow:hidden

clear:both

第三种使用方法:显隐动漫  --- 超过掩藏

第四种使用方法:单写作本超过省去

.sl{

    white-space:nowrap;/*不换行*/

    overflow:hidden;/*超过掩藏*/
    
    text-overflow:ellipsis;/*超过省去*/

    width:;

}

留意要设定总宽

之上便是详细说明CSS3:overflow特性的详尽內容,大量有关CSS3 overflow特性的材料请关心脚本制作之家其他有关文章内容!