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

不念不忘少年蓝@ 2021-12-22 10:37 280阅读 0赞

**前言**

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

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

**自适应内部元素**

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

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

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

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

![图1][1] ![1073915-20170304140634079-1433159989.png][]

图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%；对于小图片也做到了很好的自适应~

转载于:https://www.cnblogs.com/kasmine/p/6501311.html

[1]: https://images2015.cnblogs.com/blog/1073915/201703/1073915-20170304140509048-1888011449.png
[1073915-20170304140634079-1433159989.png]: /images/20211220/3d1957bc263848df99028b99636e2358.png