盒子模型和背景设置

本文深入探讨了CSS中的rgba颜色模型,特别是透明度参数的应用,以及border-radius属性如何影响元素形状,从圆形到椭圆的变化过程。同时,文章还讲解了如何通过不同的border样式如double和dashed创建视觉效果,以及解决浮动元素引发的文档流塌陷问题的方法,包括设定高度和使用overflow属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

 

 

 

 

 

 

rgba最后一个参数表示透明度

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注:前三个统一使用,缺一不可

border-style:dobule 双实线

border-dashed;虚线

 

当weight和height一致,border-radius设置为50%时,就可以是原形,当超过50%时,就以50%显示

 

 

transparent透明色

 

 

 

 

关于塌陷问题的解决方案:

可以用<div>对一整行进行包裹进行设置,并且保证都有内容填充

position:absolute //定位

 

 

over-flow:hidder 隐藏

 

 

正常文档流:

浮动文档流:

解决浮动文档流导致的正常文档流:

方法一:给浮动文档流添加一定的高度(height:800px)

方法二:给浮动文档流添加over-flow:hidder 隐藏

 

左浮动&右浮动:

 

围绕文字:正常文档流容易被浮动文档流吸引,会围绕再浮动文档流周围

 

浮动应用(若是应用浮动,则要把父级元素设为浮动;)

在浮动元素中可以定义一些正常文档流

要使span里的内容上下对齐,可以把span里的宽高对齐

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值