CSS技巧 (1) · 结构和布局

 前言

　　这一篇主要是总结关于结构和布局的一些技巧，不管什么，一个网页上来，最重要的是先确定他的结构和布局，实现基本的布局之后，我们再进行局部的优化和交互特效。

　　这一篇主要讲 关于 自适应内部元素 的内容

自适应内部元素

　　问题缘由：我们都知道元素可以自动适应内容的高度，但是如何实现宽度也如此呢，换句话说，就是元素的宽度又内部元素决定，而不是外部因素决定

　　问题实例：比如，我们制作一个卡片，包括图片和图片说明，如下

<figure>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQlWQZGiPfKwXnHwbjNKkTAU79_jfAwml-mRvUocJoS91Miomps" alt="">
    <figcaption>这是图片注释，这是图片注释，这是图片注释</figcaption>
</figure>

如不设置样式，效果应该是如下（图1）的，但是如果我们想设置figure元素和图片一样宽（图2），并且是水平居中的该如何呢？

      

　　　　　　　　　　　　图1　　　　　　　　　　　　　　　　　　　　　　　　　图2

 　　问题解决：其实解决方案很简单，只需要利用 min-content属性，便可以设置 外部元素自适应内部元素的宽度了，这种方法对于图片的使用特别有用，且常常是应用于图片大小未知的情况下

figure {
    border:1px dashed;
    max-width: 300px;
    max-width: min-content;
}
/* 这里添加退化功能，如果 min-content 不可用的话，会默认设置最大宽度 300px;若可用的话，img的max-width 也就派不上用场了 */
figure>img {
    max-width: inherit;
}

缺点:  IE（包括IE11）暂时不支持这个属性值~

另外：我们也可以是使用inline-block来使得元素自适应内部元素宽度，但是效果就是和 设置max-content一致

 

figure {
    border:1px dashed;
    display:inline-block;
/*   max-width:max-content; */
}

 

 

 

 小结： 有没有发现很方便，我们子啊也不需要说去设置 figure的宽度和max-width，然后再设置img的max-width：100%；对于小图片也做到了很好的自适应~