CSS技巧 (1) · 结构和布局
2024-10-06 12:36:41
前言
这一篇主要是总结关于结构和布局的一些技巧,不管什么,一个网页上来,最重要的是先确定他的结构和布局,实现基本的布局之后,我们再进行局部的优化和交互特效。
这一篇主要讲 关于 自适应内部元素 的内容
自适应内部元素
问题缘由:我们都知道元素可以自动适应内容的高度,但是如何实现宽度也如此呢,换句话说,就是元素的宽度又内部元素决定,而不是外部因素决定
问题实例:比如,我们制作一个卡片,包括图片和图片说明,如下
<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%;对于小图片也做到了很好的自适应~
最新文章
- sqlite索引的原理
- JQ倒计时天时分秒
- Qt之QMutex
- gson转换带有objectId的问题
- 《跨终端Web》读书笔记
- MYSQL同步--主从同步问题集锦
- 虚拟机VMware网络类型&;&;SSH远程连接Linux
- 2017-05-23 Android学习 The first day
- Linux的打印rpm包的详细信息的shell脚本
- C++在单继承、多继承、虚继承时,构造函数、复制构造函数、赋值操作符、析构函数的执行顺序和执行内容
- 【干货】使用SIFT取证工作站校验文件哈希----哈希一致则文件具备完整性
- SpringBoot使用@Cacheable实现最简单的Redis缓存
- 字符串与NUll的拼接问题
- Postman runner参数化
- web项目通过ajax提交数据太大报错
- Win10 64位连接LJM1005打印机局域网访问
- python 的基础 学习 11天 作业题
- svn加锁设置
- zoj 2104 Let the Balloon Rise(map映照容器的应用)
- 初识java内存区域
热门文章
- 将excel中某列数据中,含有指定字符串的记录取出,并生成用这个字符串命名的txt文件
- hihocoder #1617 : 方格取数(dp)
- asp.net core系列 72 Exceptionless使用介绍
- MySQL 之 pymysql
- 安卓手机360浏览器神奇bug,难以理解的
- SVN更新失败
- Could not delete D:/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp1/wtpwebapps/platform/WEB-INF/lib
- PathMarker:命令行快速编辑跳转工具(配合git,find等)
- window 定时关机小程序bat
- ActiveMQ的安装与使用。