CSS 揭秘(7)--自适应内部元素

Posted by liveipool on February 9, 2017

自适应内部元素

众所周知,如果不给元素指定一个具体的height,它就会自动适应其内容的高度。假如我们希望width也有类似的行为,看下面这段代码:

	div I am a text! I am a text! ....
	figure
		img(src="/static/pictures/08685344-11d9-426d-a204-ccabbf7049ba-2060x1236.jpeg")
		figcaption I am a text! I am a text! ...
	div I am a text! I am a text! ...

36.1.png
我们希望:这个figure元素能跟它包含的图片一样宽(图片长度不固定),而且是水平居中的。

那么如何让figure的宽度由内部因素(图片),而不是由外部因素(它的父元素)来决定呢?我们可能会想到:

让figure元素浮动:
36.2.png
会得到几乎是我们想要的宽度,但会影响布局模式。

或者,对figure元素应用display:inline-block:
36.3.png
发现宽度还是有偏差,并且这样并没有居中。

再或者,对figure元素应用一个固定的width或max-width值,然后对figure > img应用max-width:100%。这种方法是可以某些情况下实现想要的宽度,但当图片特别小时,布局会很突兀,更别说响应式了。

真正牛逼的解决方法来了:CSS内部与外部尺寸模型(第三版)为width和height属性定义了一些新的关键字,其中最有用的就是min-content了。这个关键字将解析为这个容器内部最大的不可断行元素的宽度。
看下面的代码和效果:

figure {
	border: 1px solid black;
	padding: 10px;
	width: min-content;
	margin: auto;
}

36.4.png
完美实现!
除了min-content,其他的值还有max-content,它的行为类似于display:inline-block。而fit-content的行为与浮动元素是相同的。
现在的浏览器支持情况:
36.5.png