css设置盒子自适应宽度或高度

原创 已于 2022-12-18 20:56:32 修改 · 5.9k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #前端

于 2022-12-18 20:52:39 首次发布
本文介绍了两种自适应布局的方法。首先，当右侧盒子内容超过容器宽度时，通过设置width: 0或overflow: auto来隐藏超出部分或显示滚动条。其次，利用flex布局能使下方盒子自动填充剩余高度，只需设置适当样式即可。这些技巧适用于响应式设计，确保内容在不同屏幕尺寸下都能良好展示。

1、自适应宽度

如上图，当右边的盒子内容超出容器的宽度，设置width：0；超出的内容就可以隐藏，或者设置overflow：auto；会出现滚动条显示。

2、自适应高度

 如上图，要使下面的盒子高度撑满剩余的空间，可以使用flex布局，然后设置如图所示样式就ok了。

（width和height不一定要设置为0，只要不大于剩余空间的大小。）

CSS布局 - 弹性盒子布局:CSS中的弹性盒子布局用于实现自适应和灵活的布局效果
Quantity>Quality
04-09 653
在前端开发中，实现灵活自适应的布局效果是至关重要的。而CSS中的弹性盒子布局（Flexbox Layout）就是一种非常强大且灵活的布局方式，可以帮助我们快速构建各种复杂的布局结构。本文将介绍CSS中的弹性盒子布局的基本概念和用法，包括如何使用弹性容器和弹性项目来实现灵活的布局效果。通过示例代码演示，读者将能够快速掌握弹性盒子布局的核心知识，从而在实际项目中灵活运用。弹性盒子布局是CSS中非常实用的布局方式，能够很好地解决传统布局方式所遇到的一些问题，如水平居中、垂直对齐、自适应宽度等。
CSS实现自适应宽度的菜单按钮效果代码
web前端基础入门教程
02-25 3660
这是一款基于CSS打造的自适应宽度的按钮效果代码，本效果你可以说它是菜单，也可以说它是一个CSS按钮的写法实例，不知你是否发现，菜单项的长宽可以自适应文字的多少，文字越多，它就越长，文字越少，它就越短，很智能吧。像这种可以自适应的菜单，其实用性大大增强，而且代码也挺简洁，分享给大家参考。 运行效果截图如下： 具体代码如下： 代码如下: <!DOCTYPE HTML PUBL...
纯CSS实现自适应正方形、自适应正方形布局
采黎的博客
02-27 2641
css自适应正方形，css实现自适应正方形，css实现宽高自适应正方形，css自适应正方形布局、css自适应正方形图片；提起自适应，想必都会想到rem、vw等相对单位，我们分别用这些单位来实现一下。
css让目标盒子占满父盒子剩余的所有高度（兄弟盒子的高度是变化的）
最新发布
qq_41437448的博客
09-10 1658
日常开发中，我们会遇到一个父盒子下面有多个兄弟元素，且兄弟元素的高度可能随着业务数据的变动而发生改变，而我们需要目标子盒子的高度占据满剩余高度，这个时候没办法设置height百分百（会超出导致父盒子产生滚动条），也没办法使用calc计算（兄弟盒子的高度未知），这时候就可以使用flex布局实现。具体来说：可以将父元素设置为和，然后将 listDiv设置为，这样它就会占据剩余的所有高度。
CSS-宽高自适应
2301_80864686的博客
11-04 9292
父元素不设置高度，默认的高度是被子元素撑开的，如果子元素添加浮动，父元素的高度会降低，这种降低的效果被称为高度塌陷—会影响布局。（2）如果添加了盒子模型，auto+数值=auto，不会把盒子撑大；（1）概念：元素不设置宽度，宽度默认是被子元素或者是文本撑开：width默认值为:auto。2、使用方法：用于动态的计算宽度和高度，里面有两个参数calc(参数1 - 参数2)/* 自适应宽度的盒子+盒子模型（外边距）仍然是自适应，不会被撑大 */（2）方法2：使用自适应的方法来完成两栏布局。
css图片适应盒子大小
weixin_62918410的博客
11-02 9734
css图片适应盒子大小
css和css3弹性盒模型实现元素宽度（高度）自适应
01-19
一、css实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>自适应</title> <style> *{ padding: 0; ...
CSS实现宽度自适应宽高16:9的矩形的示例
01-18
第一步先计算高度，假设宽100%，那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 <style> *{ margin: 0px; padding: 0px; } /* .wrap:包裹矩形的div，用来控制矩形的...
css自适应宽度 多种方法实现宽度自适应的水平居中
09-25
本文将详细讲述几种实现自适应宽度水平居中的CSS方法。 1. 使用display:inline-block和text-align:center 此方法适用于父元素和子元素均未定义具体宽度时，通过设置父元素的text-align属性为center，并使子元素的...
怎么让盒子自适应宽度且居中
09-08
要实现盒子自适应宽度且居中，首先需要设置盒子的宽度为自适应的，可以使用CSS中的`width: auto;`来实现。这样盒子的宽度将会根据其内容的大小来自动调整。 接下来，为了实现居中布局，可以使用CSS中的`margin`属性...
CSS盒模型自适应布局——calc与box-sizing
m0_49662897的博客
03-07 1690
CSS盒模型自适应布局——calc与box-sizing
html盒模型向上浮动,css和css3弹性盒模型实现元素宽度（高度）自适应
weixin_35760923的博客
06-03 494
一、css实现左侧宽度固定右侧宽度自适应1、定位自适应*{padding: 0;margin: 0;}.left{background: red;width: 200px;height: 200px;position: absolute;/*定位*/left: 0;top:0;}.right{background: blue;height: 200px;margin-left: 210px;}定宽...
纯CSS实现图片自适应容器大小
石小石Orz的博客
11-10 2722
图片自适应DIV盒子的大小，根据浏览器窗口大小，自动更改图片大小
css实现不等高块状元素盒子按照高度自适应（最高的盒子）
qq_37759901的博客
09-05 700
2.不给boxItem 高度，同行不等高块状元素按照最高的盒子自适应内容动态来保持高度一致。1.boxItem g给盒子高度33%，整行自动缩放高度。
自适应宽度盒子水平垂直居中css
小白变不白
11-09 1360
sorry！小主把截图截的偏了所以看着好像不居中，但是是居中的哦，还有截图上的floatbox有position：fixed样式，这里没有粘贴哦。。     拒绝理由就打死我发的是看见发货单上看了附近的说了句发的是开发商的付款了电视剧方考了多少 .refusebox{ display:-webkit-box; -webkit-box-orient:horizontal;
CSS图片自动适应大小
courseware的专栏
12-02 3429
图片自动适应大小的问题在平时制作的时候是比较常见的问题，下面提供一个比较简单的解决方法：div img { max-width:600px; //IE7、FF等其他非IE浏览器下最大宽度为600px; width:600px; //所有浏览器中图片的大小为600px; width:expression(document.body.clientWidth>600?"600px":"auto"
CSS：宽高自适应详解
热门推荐
ZJH_are的博客
07-17 1万+
2.选择器before{content''}表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容。1.选择器after{content''}表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容。-【重要】当块级元素脱离文档流的时候,宽度由内容决定=>设置浮动和定位的盒子一定记得要加宽高大小！-浏览器的高度默认是0,html,body{height100%}-HTML,BODY表示浏览器,默认是块级元素,宽度是100%...
保持宽高比的宽度自适应盒子
weixin_30394981的博客
10-29 266
基本原理 元素的padding的百分比值是基于其父元素的宽度计算的，如此，设置元素宽度width:25%，元素高度不设定，元素padding-bottom:75%，就可以得到一个高宽比为3:1的盒子。或者，元素的宽高都不设定，设置元素的padding-right: 25%，padding-bottom:75%，也可以得到一个高宽比为3:1的盒子。 使用场景 通常用在图片宽度自适应，...
CSS盒子模型与自适应
weixin_50509134的博客
06-03 1364
在使用CSS布局时，我们一定要用的就是盒子模型，这个盒子就是用来装我们要使用到的元素的。盒子模式的示意图如下：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值