css一个盒子里可以装3个图片并排吗_代码里第三个盒子怎么没有边框了?如果有三个盒子,中间的盒子浮动,是跟第一个同行还是跟第三个同行?...

HTML>

浮动模型

div{

border:2px red solid;

width:200px;

height:400px;

}

#div2{

/*此处将div2的border颜色大小重新设置,方便观察和理解*/

border:2px black solid;

width:100px;

height:200px;

float:left;

}

.ss{

/*此处将ss的border颜色改一下,方便观察和理解*/

border:2px green solid;

}

栏目1
栏目2
hao888

运行结果:

e069ef7a9c90e07196d86aa5b40bd86a.png

由此可见,【第三个盒子为什么没有边框】的原因是因为被第二个盒子的边框给覆盖了,其实第三个盒子的边框还在,只是两者都是红色的,所以无法分辨该框是属于谁的。而文字由于系统默认会被排斥到边框外面显示,以至于视觉上误以为该文字的边框消失了。

【如果有三个盒子,中间的盒子浮动,是跟第一个同行还是跟第三个同行?】答案是跟第三个同行。因为块状元素是独占一行的,所以第一个在没有设置浮动模型的情况下是不允许第二者与其同行的!而中间的盒子浮动的位置是在第二行,第三行在没有设置浮动模型的情况下也是独占一行的,在默认情况下是从左边开始霸占位置的,以至于和中间浮动的那家伙重合去了,实际上浮动的盒子与第三个盒子已经在同一行了,不信你还可以将第三个盒子设置float:right看看

以上为在下的个人理解,如有不对之处,还望指教。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值