html inline-table,实战笔记二(display:inline-table)

一、inline-table

inline-table的盒子

inline-table得到的是,外面是“内联盒子”,里面是“table盒子”。

得到的是一个可以和文字在一行中显示的表格。

Document

.inline-table {

display: inline-table; //

width: 128px;

margin-left: 10px;

border: 1px solid #cad5eb;

}

.inline-table > p {

display: table-cell;

}

和文字平起平坐的表格:

第1列

第2列

二、width:auto

表现如下:

1、收缩到最小。

当每一列空间都不够的时候,文字能断就断,但中文是随便断的,英文单词不能断。于是第一列被无情地每个字都断掉,形成一柱擎天。这种行为在规范中被描述为“ preferred minimun width”或者“ minimum content width”。后来还有了一个更加好听的名字min-content。

Document

table {

width: 280px;

margin: 0 auto; //这里的auto

text-align: left;

}

就1列就1列就1列就1列就1列当父级relative,且宽度很小的时候,例如{position:relative; width:20px;},absolute元素也会出现一柱擎天的情况;当父级relative,且宽度很小的时候,例如{position:relative; width:20px;},absolute元素也会出现一柱擎天的情况;

2、充分利用可用空间。

比方说,

这些元素的宽度默认是100%于父级容器的。这种充分利用可用空间的行为还有个专有名字,叫作fill-available,大家了解即可。

3、收缩与包裹。

典型代表就是浮动、绝对定位、inline-block元素或table元素,英文称为 shrink-to-fit,直译为“收缩到合适”,有那么点儿意思,但不够形象,我一直把这种现象称为“包裹性”。CSS3中的fit- content指的就是这种宽度表现。

3、超出容器限制。

除非有明确的 width相关设置,否则上面3种情况尺寸都不会主动超过父级容器宽度的,但是存在一些特殊情况。例如,内容很长的连续的英文和数字,或者内联元素被设置了 white- space: nowrap,则表现为“恰似一江春水向东流,流到断崖也不回头”。

Document

.father {

width: 150px;

padding: 10px;

background-color: #cd0000;

white-space: nowrap;

}

.child {

display: inline-block;

padding: 5px;

background-color: #f0f3f9;

}

恰如一江春水向东流,流到断崖也不回头

子元素既保持了inline-block元素的收缩特性,又同时让内容宽度最大,直接无视父级容器的宽度限制。

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值